Changeset 46794 for branches/5.3

Timestamp:

11/28/2019 12:28:50 AM (7 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%)',
+                        ),
+
                 );
         }