Add Logical Properties to safecss_filter_attr

[wazeter]

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'

[ryokuhi]

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.

[wazeter]

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