Ticket #57322: 57322.diff

src/wp-includes/kses.php

@@ -2528 +2528 @@
                         }
                 }
 
-                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 );
-                        }
-                }
-
                 if ( $found ) {
                         /*
                          * Allow CSS functions like var(), calc(), etc. by removing them from the test string.
@@ -2546 +2538 @@
                                 '',
                                 $css_test_string
                         );
+                }
 
+                if ( $found && $gradient_attr ) {
+                        $css_value = trim( $parts[1] );
+                        if ( preg_match( '/(repeating-)?(linear|radial|conic)-gradient\(([^()]|rgb[a]?\([^()]*\))*\)/', $css_test_string ) ) {
+                                // Remove the whole `gradient` bit that was matched above from the CSS.
+                                $css_test_string = preg_replace(
+                                        '/(repeating-)?(linear|radial|conic)-gradient\(([^()]|rgb[a]?\([^()]*\))*\)/',
+                                        '',
+                                        $css_test_string
+                                );
+                        }
+                }
+
+                if ( $found ) {
                         /*
                          * Disallow CSS containing \ ( & } = or comments, except for within url(), var(), calc(), etc.
                          * which were removed from the test string above.

tests/phpunit/tests/kses.php

@@ -1278 +1278 @@
                                 'css'      => '--?><.%-not-allowed: red;',
                                 'expected' => '',
                         ),
+                        // Stacked gradients.
+                        array(
+                                'css'      => 'background: radial-gradient(circle at 5px 5px,#0c0d0d70 2px,#ffffff00 0px,#ffffff00 0px) 0 0 / 8px 8px, linear-gradient(180deg, #345345 0%,#000000 200%)',
+                                'expected' => 'background: radial-gradient(circle at 5px 5px,#0c0d0d70 2px,#ffffff00 0px,#ffffff00 0px) 0 0 / 8px 8px, linear-gradient(180deg, #345345 0%,#000000 200%)',
+                        ),
+                        // Stacked grandients with a CSS variable.
+                        array(
+                                'css'      => 'background: radial-gradient(circle at 5px 5px,#0c0d0d70 2px,#ffffff00 0px,#ffffff00 0px) 0 0 / 8px 8px, linear-gradient(180deg, var(--wp--preset--color--base) 0%,#000000 200%)',
+                                'expected' => 'background: radial-gradient(circle at 5px 5px,#0c0d0d70 2px,#ffffff00 0px,#ffffff00 0px) 0 0 / 8px 8px, linear-gradient(180deg, var(--wp--preset--color--base) 0%,#000000 200%)',
+                        ),
+                        array(
+                                'css'      => '--wp--preset--gradient--dots: radial-gradient(circle at 5px 5px,#0c0d0d70 2px,#ffffff00 0px,#ffffff00 0px) 0 0 / 8px 8px, linear-gradient(180deg, var(--wp--preset--color--base) 0%,#000000 200%)',
+                                'expected' => '--wp--preset--gradient--dots: radial-gradient(circle at 5px 5px,#0c0d0d70 2px,#ffffff00 0px,#ffffff00 0px) 0 0 / 8px 8px, linear-gradient(180deg, var(--wp--preset--color--base) 0%,#000000 200%)',
+                        ),
+                        // Malformed stacked gradients, no closing `)`
+                        array(
+                                'css'      => 'background: radial-gradient(circle at 5px 5px,#0c0d0d70 2px,#ffffff00 0px,#ffffff00 0px) 0 0 / 8px 8px, linear-gradient(180deg, #345345 0%,#000000 200%',
+                                'expected' => '',
+                        ),
+                        // Malformed stacked gradients, mismatching brackets.
+                        array(
+                                'css'      => 'background: radial-gradient(circle at 5px 5px,#0c0d0d70 2px,#ffffff00 0px,#ffffff00 0px) 0 0 / 8px 8px, ( linear-gradient(180deg, #345345 0%,#000000 200%)',
+                                'expected' => '',
+                        ),
                 );
         }