Changeset 46235

Timestamp:

09/22/2019 10:16:19 PM (5 years ago)

Author:

peterwilsoncc

Message:

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.

Location:

trunk

Files:

• src/wp-includes/kses.php (modified) (5 diffs)
• tests/phpunit/tests/kses.php (modified) (1 diff)

trunk/src/wp-includes/kses.php

@@ -2072 +2072 @@
      * @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.
@@ -2083 +2084 @@
             'background-image',
             'background-position',
+            'background-size',
+            'background-attachment',
+            'background-blend-mode',
 
             'border',
+            'border-radius',
             'border-width',
             'border-color',
@@ -2109 +2114 @@
             'caption-side',
 
+            'columns',
+            'column-count',
+            'column-fill',
+            'column-gap',
+            'column-rule',
+            'column-span',
+            'column-width',
+
             'color',
             'font',
@@ -2144 +2157 @@
 
             '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',
@@ -2155 +2189 @@
             'vertical-align',
             'list-style-type',
-            'grid-template-columns',
         )
     );

trunk/tests/phpunit/tests/kses.php

@@ -840 +840 @@
                 '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',
             ),
         );