Ticket #48376: 48376.diff

src/wp-includes/kses.php

@@ -2209 +2209 @@
                 'list-style-image',
         );
 
+        /*
+         * CSS attributes where we accept gradient data types.
+         *
+         */
+        $css_gradient_data_types = array(
+                'background',
+                'background-image',
+        );
+
         if ( empty( $allowed_attr ) ) {
                 return $css;
         }
@@ -2223 +2232 @@
                 $css_test_string = $css_item;
                 $found           = false;
                 $url_attr        = false;
+                $gradient_attr   = false;
 
                 if ( strpos( $css_item, ':' ) === false ) {
                         $found = true;
@@ -2231 +2241 @@
                         $css_selector = trim( $parts[0] );
 
                         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 );
                         }
                 }
 
@@ -2261 +2272 @@
                         }
                 }
 
+                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 );
+                        }
+                }
+
                 // Remove any CSS containing containing \ ( & } = or comments, except for url() useage checked above.
                 if ( $found && ! preg_match( '%[\\\(&=}]|/\*%', $css_test_string ) ) {
                         if ( $css != '' ) {

tests/phpunit/tests/kses.php

@@ -878 +878 @@
                                 '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',
                         ),
+                        // 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%)',
+                        ),
+
                 );
         }