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
WordPress · Sep 22, 2019 · 123c175 · 123c175
1 parent 975812c
commit 123c175
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 5 deletions.
diff --git a/src/wp-includes/kses.php b/src/wp-includes/kses.php
@@ -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',
 		)
 	);
 

diff --git a/tests/phpunit/tests/kses.php b/tests/phpunit/tests/kses.php
@@ -839,10 +839,44 @@ public function data_test_safecss_filter_attr() {
 				'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',
+				'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-shrink: 0;flex-grow: 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',
 			),
 		);
 	}