Make WordPress Core


Ignore:
Timestamp:
09/09/2022 12:37:47 PM (23 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:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/kses.php

    r54102 r54117  
    22302230 * @since 5.8.0 Added support for `calc()` and `var()` values.
    22312231 * @since 6.1.0 Added support for `min()`, `max()`, `minmax()`, `clamp()`,
    2232  *              and nested `var()` values.
     2232 *              nested `var()` values, and assigning values to CSS variables.
    22332233 *              Added support for `gap`, `column-gap`, `row-gap`, and `flex-wrap`.
    22342234 *              Extended `margin-*` and `padding-*` support for logical properties.
     
    23922392            'overflow',
    23932393            'vertical-align',
     2394
     2395            // Custom CSS properties.
     2396            '--*',
    23942397        )
    23952398    );
     
    24372440        $url_attr        = false;
    24382441        $gradient_attr   = false;
     2442        $is_custom_var   = false;
    24392443
    24402444        if ( strpos( $css_item, ':' ) === false ) {
     
    24442448            $css_selector = trim( $parts[0] );
    24452449
     2450            // Allow assigning values to CSS variables.
     2451            if ( in_array( '--*', $allowed_attr, true ) && preg_match( '/^--[a-zA-Z0-9-_]+$/', $css_selector ) ) {
     2452                $allowed_attr[] = $css_selector;
     2453                $is_custom_var  = true;
     2454            }
     2455
    24462456            if ( in_array( $css_selector, $allowed_attr, true ) ) {
    24472457                $found         = true;
    24482458                $url_attr      = in_array( $css_selector, $css_url_data_types, true );
    24492459                $gradient_attr = in_array( $css_selector, $css_gradient_data_types, true );
     2460            }
     2461
     2462            if ( $is_custom_var ) {
     2463                $css_value     = trim( $parts[1] );
     2464                $url_attr      = str_starts_with( $css_value, 'url(' );
     2465                $gradient_attr = str_contains( $css_value, '-gradient(' );
    24502466            }
    24512467        }
Note: See TracChangeset for help on using the changeset viewer.