Changeset 54117

Timestamp:

09/09/2022 12:37:47 PM (2 years ago)

Author:

SergeyBiryukov

Message:

KSES: Allow assigning values to CSS variables.

The safecss_filter_attr() function allows using custom CSS variables like color: var(--color). However, it did not allow assigning values to CSS variables like --color: #F00, which is common in Global Styles and Gutenberg.

This commit adds support for assigning values to CSS variables, so that the function can be used consistently in Global Styles and the future Style Engine in Gutenberg.

Follow-up to [50923], [54100].

Props aristath, ramonopoly, SergeyBiryukov.
Fixes #56353.

Location:

trunk

Files:

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

trunk/src/wp-includes/kses.php

@@ -2230 +2230 @@
  * @since 5.8.0 Added support for `calc()` and `var()` values.
  * @since 6.1.0 Added support for `min()`, `max()`, `minmax()`, `clamp()`,
- *              and nested `var()` values.
+ *              nested `var()` values, and assigning values to CSS variables.
  *              Added support for `gap`, `column-gap`, `row-gap`, and `flex-wrap`.
  *              Extended `margin-*` and `padding-*` support for logical properties.
@@ -2392 +2392 @@
             'overflow',
             'vertical-align',
+
+            // Custom CSS properties.
+            '--*',
         )
     );
@@ -2437 +2440 @@
         $url_attr        = false;
         $gradient_attr   = false;
+        $is_custom_var   = false;
 
         if ( strpos( $css_item, ':' ) === false ) {
@@ -2444 +2448 @@
             $css_selector = trim( $parts[0] );
 
+            // Allow assigning values to CSS variables.
+            if ( in_array( '--*', $allowed_attr, true ) && preg_match( '/^--[a-zA-Z0-9-_]+$/', $css_selector ) ) {
+                $allowed_attr[] = $css_selector;
+                $is_custom_var  = true;
+            }
+
             if ( in_array( $css_selector, $allowed_attr, 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 );
+            }
+
+            if ( $is_custom_var ) {
+                $css_value     = trim( $parts[1] );
+                $url_attr      = str_starts_with( $css_value, 'url(' );
+                $gradient_attr = str_contains( $css_value, '-gradient(' );
             }
         }

trunk/tests/phpunit/tests/kses.php

@@ -1248 +1248 @@
                 'expected' => 'margin-block-start: 1px;margin-block-end: 2px;margin-inline-start: 3px;margin-inline-end: 4px;padding-block-start: 1px;padding-block-end: 2px;padding-inline-start: 3px;padding-inline-end: 4px',
             ),
+            // Assigning values to CSS variables introduced in 6.1.
+            array(
+                'css'      => '--wp--medium-width: 100px; --var_with_underscores: #cccccc;',
+                'expected' => '--wp--medium-width: 100px;--var_with_underscores: #cccccc',
+            ),
+            array(
+                'css'      => '--miXeD-CAse: red; --with-numbers-3_56: red; --with-url-value: url("foo.jpg");',
+                'expected' => '--miXeD-CAse: red;--with-numbers-3_56: red;--with-url-value: url("foo.jpg")',
+            ),
+            array(
+                'css'      => '--with-gradient: repeating-linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);',
+                'expected' => '--with-gradient: repeating-linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
+            ),
+            array(
+                'css'      => '--?><.%-not-allowed: red;',
+                'expected' => '',
+            ),
         );
     }