sergiotarxz
/
Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

KSES: Add support for modern layout techniques in `style` attribute. 

Adds support for `flex`, `grid` and `column` layout techniques to the list of CSS attributes considered safe for inline CSS. The `\` character and CSS functions, eg `minmax()` are not yet supported.

Extends support of `border` properties to include `border-radius` and individual `background` properties to include all those implicitly supported by the shorthand attribute.

Props mrahmadawais, marybaum, birgire, peterwilsoncc, azaozz.
Fixes #37248.
See #47367.


git-svn-id: https://develop.svn.wordpress.org/trunk@46235 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Peter Wilson 2019-09-22 22:16:19 +00:00
parent 975812c783
commit 123c17536f
2 changed files with 72 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/wp-includes/kses.php
View File

@ -2071,7 +2071,8 @@ function safecss_filter_attr( $css, $deprecated = '' ) {
* @since 5.0.0 Added support for `background-image`.
* @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 `flex`, `flex-grow`, `flex-shrink`, and `flex-basis`.
* @since 5.3.0 Added support for `grid`, `flex` and `column` layout properties.
* Extend `background-*` support of individual properties.
*
* @param string[] $attr Array of allowed CSS attributes.
*/
@ -2082,8 +2083,12 @@ function safecss_filter_attr( $css, $deprecated = '' ) {
'background-color',
'background-image',
'background-position',
'background-size',
'background-attachment',
'background-blend-mode',
'border',
'border-radius',
'border-width',
'border-color',
'border-style',
@ -2108,6 +2113,14 @@ function safecss_filter_attr( $css, $deprecated = '' ) {
'border-collapse',
'caption-side',
'columns',
'column-count',
'column-fill',
'column-gap',
'column-rule',
'column-span',
'column-width',
'color',
'font',
'font-family',
@ -2143,9 +2156,30 @@ function safecss_filter_attr( $css, $deprecated = '' ) {
'padding-top',
'flex',
'flex-basis',
'flex-direction',
'flex-flow',
'flex-grow',
'flex-shrink',
'flex-basis',
'grid-template-columns',
'grid-auto-columns',
'grid-column-start',
'grid-column-end',
'grid-column-gap',
'grid-template-rows',
'grid-auto-rows',
'grid-row-start',
'grid-row-end',
'grid-row-gap',
'grid-gap',
'justify-content',
'justify-items',
'justify-self',
'align-content',
'align-items',
'align-self',
'clear',
'cursor',
@ -2154,7 +2188,6 @@ function safecss_filter_attr( $css, $deprecated = '' ) {
'overflow',
'vertical-align',
'list-style-type',
'grid-template-columns',
)
);

38
tests/phpunit/tests/kses.php
View File

@ -839,10 +839,44 @@ EOF;
'css' => 'background: green url("foo.jpg") no-repeat fixed center',
'expected' => 'background: green url("foo.jpg") no-repeat fixed center',
),
// Additional background attributes introduced in 5.3.
array(
'css' => 'background-size: cover;background-size: 200px 100px;background-attachment: local, scroll;background-blend-mode: hard-light',
'expected' => 'background-size: cover;background-size: 200px 100px;background-attachment: local, scroll;background-blend-mode: hard-light',
),
// `border-radius` attribute introduced in 5.3.
array(
'css' => 'border-radius: 10% 30% 50% 70%;border-radius: 30px',
'expected' => 'border-radius: 10% 30% 50% 70%;border-radius: 30px',
),
// `flex` and related attributes introduced in 5.3.
array(
'css' => 'flex: 0 1 auto;flex-basis: 75%;flex-shrink: 0;flex-grow: 1',
'expected' => 'flex: 0 1 auto;flex-basis: 75%;flex-shrink: 0;flex-grow: 1',
'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',
),
// `grid` and related attributes introduced in 5.3.
array(
'css' => 'grid-template-columns: 1fr 60px;grid-auto-columns: min-content;grid-column-start: span 2;grid-column-end: -1;grid-column-gap: 10%;grid-gap: 10px 20px',
'expected' => 'grid-template-columns: 1fr 60px;grid-auto-columns: min-content;grid-column-start: span 2;grid-column-end: -1;grid-column-gap: 10%;grid-gap: 10px 20px',
),
array(
'css' => 'grid-template-rows: 40px 4em 40px;grid-auto-rows: min-content;grid-row-start: -1;grid-row-end: 3;grid-row-gap: 1em',
'expected' => 'grid-template-rows: 40px 4em 40px;grid-auto-rows: min-content;grid-row-start: -1;grid-row-end: 3;grid-row-gap: 1em',
),
// `grid` does not yet support functions or `\`.
array(
'css' => 'grid-template-columns: repeat(2, 50px 1fr);grid-template: 1em / 20% 20px 1fr',
'expected' => '',
),
// `flex` and `grid` alignments introduced in 5.3.
array(
'css' => 'align-content: space-between;align-items: start;align-self: center;justify-items: center;justify-content: space-between;justify-self: end',
'expected' => 'align-content: space-between;align-items: start;align-self: center;justify-items: center;justify-content: space-between;justify-self: end',
),
// `columns` and related attributes introduced in 5.3.
array(
'css' => 'columns: 6rem auto;column-count: 4;column-fill: balance;column-gap: 9px;column-rule: thick inset blue;column-span: none;column-width: 120px',
'expected' => 'columns: 6rem auto;column-count: 4;column-fill: balance;column-gap: 9px;column-rule: thick inset blue;column-span: none;column-width: 120px',
),
);
}