vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-08-12 12:50:28 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

KSES: Allow assigning values to CSS variables.

Browse Source 
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.

git-svn-id: https://develop.svn.wordpress.org/trunk@54117 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Sergey Biryukov
2022-09-09 12:37:47 +00:00
parent 2a8e2051c4
commit a133b6d244
2 changed files with 34 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/wp-includes/kses.php
+17 -1
View File
@@ -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.
*
@@ -2391,6 +2391,9 @@ function safecss_filter_attr( $css, $deprecated = '' ) {
'object-position',
'overflow',
'vertical-align',
// Custom CSS properties.
'--*',
)
);
@@ -2436,6 +2439,7 @@ 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;
@@ -2443,11 +2447,23 @@ function safecss_filter_attr( $css, $deprecated = '' ) {
$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 ) {
tests/phpunit/tests/kses.php
+17
View File
@@ -1247,6 +1247,23 @@ EOF;
'css' => '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',
'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' => '',
),
);
}