KSES: Allow more layout-related CSS properties.

Adds support for the following CSS properties considered safe for inline CSS:
* `flex-wrap`
* `gap`
* `column-gap`
* `row-gap`

Extends support for `margin` and `padding` to include logical properties:
* `margin-block-start`
* `margin-block-end`
* `margin-inline-start`
* `margin-inline-end`
* `padding-block-start`
* `padding-block-end`
* `padding-inline-start`
* `padding-inline-end`

Follow-up to [46235].

Props andrewserong, peterwilsoncc, ramonopoly, bernhard-reiter.
Fixes #56122.

git-svn-id: https://develop.svn.wordpress.org/trunk@54102 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Sergey Biryukov 2022-09-08 15:04:39 +00:00
parent e9206b07e8
commit aa78a510c7
2 changed files with 29 additions and 3 deletions

View File

@ -2224,12 +2224,14 @@ function kses_init() {
* @since 5.1.0 Added support for `text-transform`.
* @since 5.2.0 Added support for `background-position` and `grid-template-columns`.
* @since 5.3.0 Added support for `grid`, `flex` and `column` layout properties.
* Extend `background-*` support of individual properties.
* Extended `background-*` support for individual properties.
* @since 5.3.1 Added support for gradient backgrounds.
* @since 5.7.1 Added support for `object-position`.
* @since 5.8.0 Added support for `calc()` and `var()` values.
* @since 6.1.0 Added support for `min()`, `max()`, `minmax()`, `clamp()`,
* and nested `var()` values.
* Added support for `gap`, `column-gap`, `row-gap`, and `flex-wrap`.
* Extended `margin-*` and `padding-*` support for logical properties.
*
* @param string $css A string of CSS rules.
* @param string $deprecated Not used.
@ -2335,12 +2337,20 @@ function safecss_filter_attr( $css, $deprecated = '' ) {
'margin-bottom',
'margin-left',
'margin-top',
'margin-block-start',
'margin-block-end',
'margin-inline-start',
'margin-inline-end',
'padding',
'padding-right',
'padding-bottom',
'padding-left',
'padding-top',
'padding-block-start',
'padding-block-end',
'padding-inline-start',
'padding-inline-end',
'flex',
'flex-basis',
@ -2348,6 +2358,11 @@ function safecss_filter_attr( $css, $deprecated = '' ) {
'flex-flow',
'flex-grow',
'flex-shrink',
'flex-wrap',
'gap',
'column-gap',
'row-gap',
'grid-template-columns',
'grid-auto-columns',

View File

@ -936,6 +936,7 @@ EOF;
* @ticket 42729
* @ticket 48376
* @ticket 55966
* @ticket 56122
* @dataProvider data_test_safecss_filter_attr
*
* @param string $css A string of CSS rules.
@ -1034,8 +1035,8 @@ EOF;
),
// `flex` and related attributes introduced in 5.3.
array(
'css' => 'flex: 0 1 auto;flex-basis: 75%;flex-direction: row-reverse;flex-flow: row-reverse nowrap;flex-grow: 2;flex-shrink: 1',
'expected' => 'flex: 0 1 auto;flex-basis: 75%;flex-direction: row-reverse;flex-flow: row-reverse nowrap;flex-grow: 2;flex-shrink: 1',
'css' => 'flex: 0 1 auto;flex-basis: 75%;flex-direction: row-reverse;flex-flow: row-reverse nowrap;flex-grow: 2;flex-shrink: 1;flex-wrap: nowrap',
'expected' => 'flex: 0 1 auto;flex-basis: 75%;flex-direction: row-reverse;flex-flow: row-reverse nowrap;flex-grow: 2;flex-shrink: 1;flex-wrap: nowrap',
),
// `grid` and related attributes introduced in 5.3.
array(
@ -1236,6 +1237,16 @@ EOF;
'css' => 'width: (3em + (10px * 2))',
'expected' => '',
),
// Gap introduced in 6.1.
array(
'css' => 'gap: 10px;column-gap: 5px;row-gap: 20px',
'expected' => 'gap: 10px;column-gap: 5px;row-gap: 20px',
),
// Margin and padding logical properties introduced in 6.1.
array(
'css' => 'margin-block-start: 1px;margin-block-end: 2px;margin-inline-start: 3px;margin-inline-end: 4px;padding-block-start: 1px;padding-block-end: 2px;padding-inline-start: 3px;padding-inline-end: 4px',
'expected' => 'margin-block-start: 1px;margin-block-end: 2px;margin-inline-start: 3px;margin-inline-end: 4px;padding-block-start: 1px;padding-block-end: 2px;padding-inline-start: 3px;padding-inline-end: 4px',
),
);
}