Changeset 46794

Timestamp:

11/28/2019 12:28:50 AM (5 years ago)

Author:

SergeyBiryukov

Message:

KSES: Add support for gradient backgrounds.

Props jorgefilipecosta.
Merges [46793] to the 5.3 branch.
Fixes #48376.

Location:

branches/5.3

Files:

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

branches/5.3/src/wp-includes/kses.php

@@ -2074 +2074 @@
      * @since 5.3.0 Added support for `grid`, `flex` and `column` layout properties.
      *              Extend `background-*` support of individual properties.
+     * @since 5.3.1 Added support for gradient backgrounds.
      *
      * @param string[] $attr Array of allowed CSS attributes.
@@ -2210 +2211 @@
     );
 
+    /*
+     * CSS attributes that accept gradient data types.
+     *
+     */
+    $css_gradient_data_types = array(
+        'background',
+        'background-image',
+    );
+
     if ( empty( $allowed_attr ) ) {
         return $css;
@@ -2224 +2234 @@
         $found           = false;
         $url_attr        = false;
+        $gradient_attr   = false;
 
         if ( strpos( $css_item, ':' ) === false ) {
@@ -2232 +2243 @@
 
             if ( in_array( $css_selector, $allowed_attr, true ) ) {
-                $found    = true;
-                $url_attr = in_array( $css_selector, $css_url_data_types, true );
+                $found         = true;
+                $url_attr      = in_array( $css_selector, $css_url_data_types, true );
+                $gradient_attr = in_array( $css_selector, $css_gradient_data_types, true );
             }
         }
@@ -2259 +2271 @@
                     $css_test_string = str_replace( $url_match, '', $css_test_string );
                 }
+            }
+        }
+
+        if ( $found && $gradient_attr ) {
+            $css_value = trim( $parts[1] );
+            if ( preg_match( '/^(repeating-)?(linear|radial|conic)-gradient\(([^()]|rgb[a]?\([^()]*\))*\)$/', $css_value ) ) {
+                // Remove the whole `gradient` bit that was matched above from the CSS.
+                $css_test_string = str_replace( $css_value, '', $css_test_string );
             }
         }

branches/5.3/tests/phpunit/tests/kses.php

@@ -753 +753 @@
      * Testing the safecss_filter_attr() function.
      *
+     * @ticket 37248
      * @ticket 42729
+     * @ticket 48376
      * @dataProvider data_test_safecss_filter_attr
      *
@@ -879 +881 @@
                 'expected' => 'columns: 6rem auto;column-count: 4;column-fill: balance;column-gap: 9px;column-rule: thick inset blue;column-span: none;column-width: 120px',
             ),
+            // Gradients introduced in 5.3.
+            array(
+                'css'      => 'background: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
+                'expected' => 'background: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
+            ),
+            array(
+                'css'      => 'background: linear-gradient(135deg,rgba(6,147,227,1) ) (0%,rgb(155,81,224) 100%)',
+                'expected' => '',
+            ),
+            array(
+                'css'      => 'background-image: linear-gradient(red,yellow);',
+                'expected' => 'background-image: linear-gradient(red,yellow)',
+            ),
+            array(
+                'css'      => 'color: linear-gradient(red,yellow);',
+                'expected' => '',
+            ),
+            array(
+                'css'      => 'background-image: linear-gradient(red,yellow); background: prop( red,yellow); width: 100px;',
+                'expected' => 'background-image: linear-gradient(red,yellow);width: 100px',
+            ),
+            array(
+                'css'      => 'background: unknown-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
+                'expected' => '',
+            ),
+            array(
+                'css'      => 'background: repeating-linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
+                'expected' => 'background: repeating-linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
+            ),
+            array(
+                'css'      => 'width: 100px; height: 100px; background: linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%);',
+                'expected' => 'width: 100px;height: 100px;background: linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%)',
+            ),
+            array(
+                'css'      => 'background: radial-gradient(#ff0, red, yellow, green, rgba(6,147,227,1), rgb(155,81,224) 90%);',
+                'expected' => 'background: radial-gradient(#ff0, red, yellow, green, rgba(6,147,227,1), rgb(155,81,224) 90%)',
+            ),
+            array(
+                'css'      => 'background: radial-gradient(#ff0, red, yellow, green, rgba(6,147,227,1), rgb(155,81,224) 90%);',
+                'expected' => 'background: radial-gradient(#ff0, red, yellow, green, rgba(6,147,227,1), rgb(155,81,224) 90%)',
+            ),
+            array(
+                'css'      => 'background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%)',
+                'expected' => 'background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%)',
+            ),
+
         );
     }