[wp-trac] [WordPress Trac] #54322: Add Logical Properties to safecss_filter_attr

[WordPress Trac]

#54322: Add Logical Properties to safecss_filter_attr
---------------------------+--------------------------------------
 Reporter:  wazeter        |      Owner:  (none)
     Type:  enhancement    |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  General        |    Version:  5.8.1
 Severity:  normal         |   Keywords:  dev-feedback 2nd-opinion
  Focuses:  accessibility  |
---------------------------+--------------------------------------
 == 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'
 }}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/54322>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform