Opened 3 years ago
Last modified 3 years 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'
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.