Skip to content

Commit

Permalink
KSES: Allow assigning values to CSS variables.
Browse files Browse the repository at this point in the history
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.
Built from https://develop.svn.wordpress.org/trunk@54117


git-svn-id: https://core.svn.wordpress.org/trunk@53676 1a063a9b-81f0-0310-95a4-ce76da25c4cd
  • Loading branch information
SergeyBiryukov committed Sep 9, 2022
1 parent 5dd8aab commit a6c81fa
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 2 deletions.
18 changes: 17 additions & 1 deletion wp-includes/kses.php
Original file line number Diff line number Diff line change
Expand Up @@ -2229,7 +2229,7 @@ function kses_init() {
* @since 5.7.1 Added support for `object-position`.
* @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.
*
Expand Down Expand Up @@ -2391,6 +2391,9 @@ function safecss_filter_attr( $css, $deprecated = '' ) {
'object-position',
'overflow',
'vertical-align',

// Custom CSS properties.
'--*',
)
);

Expand Down Expand Up @@ -2436,18 +2439,31 @@ function safecss_filter_attr( $css, $deprecated = '' ) {
$found = false;
$url_attr = false;
$gradient_attr = false;
$is_custom_var = false;

if ( strpos( $css_item, ':' ) === false ) {
$found = true;
} else {
$parts = explode( ':', $css_item, 2 );
$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(' );
}
}

if ( $found && $url_attr ) {
Expand Down
2 changes: 1 addition & 1 deletion wp-includes/version.php
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
*
* @global string $wp_version
*/
$wp_version = '6.1-alpha-54116';
$wp_version = '6.1-alpha-54117';

/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
Expand Down

0 comments on commit a6c81fa

Please sign in to comment.