WordPress.org

Make WordPress Core

Opened 6 weeks ago

Last modified 2 weeks ago

#54322 new enhancement

Add Logical Properties to safecss_filter_attr

Reported by: wazeter Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.8.1
Component: Formatting Keywords: dev-feedback 2nd-opinion
Focuses: css Cc:

Description

Background

CSS Logical Properties and Values give easier control over automating different writing mode formats by using logical, rather than physical directions. In other words, it means that the intended spacing, sizing, etc for each appropriate side of a box element translate seamlessly.

Mozilla Reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties

With the increase in inline styling from blocks, it's important to add more flexibility to how a theme or plugin developer might want to style their spacing components or future proof them as accessibility and internationalization become increasingly important and stop of mind.

Global usage is at a decent enough support level where it makes sense:
https://caniuse.com/?search=logical%20properties.

Proposed Enhancement

The proposed addition would just be to add to the properties to the default array in safecss_filter_attr().

File: wp-includes/kses.php:
https://github.com/WordPress/wordpress-develop/blob/98bf67e02b0a4b4aa3848f4e8266c4fd66cdaad0/src/wp-includes/kses.php#L2170

The complete list of Logical Properties:

        // Properties for sizing
        'block-size',
        'inline-size',
        'max-block-size',
        'max-inline-size',
        'min-block-size',
        'min-inline-size',

        // Properties for borders
        'border-block',
        'border-block-color',
        'border-block-end',
        'border-block-end-color',
        'border-block-end-style',
        'border-block-end-width',
        'border-block-start',
        'border-block-start-color',
        'border-block-start-style',
        'border-block-start-width',
        'border-block-style',
        'border-block-width',
        'border-inline',
        'border-inline-color',
        'border-inline-end',
        'border-inline-end-color',
        'border-inline-end-style',
        'border-inline-end-width',
        'border-inline-start',
        'border-inline-start-color',
        'border-inline-start-style',
        'border-inline-start-width',
        'border-inline-style',
        'border-inline-width',
        'border-start-start-radius',
        'border-start-end-radius',

        // Properties for margin & padding
        'margin-block',
        'margin-block-end',
        'margin-block-start',
        'margin-inline',
        'margin-inline-end',
        'margin-inline-start',
        'padding-block',
        'padding-block-end',
        'padding-block-start',
        'padding-inline-end',
        'padding-inline-start',

        // Properties for float & positioning
        'inset',
        'inset-block',
        'inset-block-end',
        'inset-block-start',
        'inset-inline',
        'inset-inline-end',
        'inset-inline-start',

        // Other Misc Props
        'caption-side',
        'overflow-block',
        'overflow-inline',
        'overscroll-behavior-block',
        'overscroll-behavior-inline',
        'resize',
        'text-align'

Change History (4)

#1 @SergeyBiryukov
6 weeks ago

  • Component changed from General to Formatting

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


2 weeks ago

#3 @ryokuhi
2 weeks ago

  • Focuses css added; accessibility removed

Hello @wazeter: welcome on WordPress Trac and thank you for your suggestion.

We've reviewed this ticket today during the Accessibility Team's weekly bug-scrub. In our opinion, this is not an accessibility issue and, as such, I'm removing the related focus.

Still, we think that this ticket is worth discussion, so we're adding the CSS focus which we think is more in line with the suggested enhancement.

#4 @wazeter
2 weeks ago

@ryokuhi Sounds great! This also reminded me to submit a pull request, would you like me to do so?

Note: See TracTickets for help on using tickets.