Changeset 54117 for trunk/src/wp-includes/kses.php

Timestamp:

09/09/2022 12:37:47 PM (15 months 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.

File:

• trunk/src/wp-includes/kses.php (modified) (4 diffs)

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(' );
             }
         }