Make WordPress Core


Ignore:
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.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/tests/phpunit/tests/kses.php

    r54102 r54117  
    12481248                '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',
    12491249            ),
     1250            // Assigning values to CSS variables introduced in 6.1.
     1251            array(
     1252                'css'      => '--wp--medium-width: 100px; --var_with_underscores: #cccccc;',
     1253                'expected' => '--wp--medium-width: 100px;--var_with_underscores: #cccccc',
     1254            ),
     1255            array(
     1256                'css'      => '--miXeD-CAse: red; --with-numbers-3_56: red; --with-url-value: url("foo.jpg");',
     1257                'expected' => '--miXeD-CAse: red;--with-numbers-3_56: red;--with-url-value: url("foo.jpg")',
     1258            ),
     1259            array(
     1260                'css'      => '--with-gradient: repeating-linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);',
     1261                'expected' => '--with-gradient: repeating-linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
     1262            ),
     1263            array(
     1264                'css'      => '--?><.%-not-allowed: red;',
     1265                'expected' => '',
     1266            ),
    12501267        );
    12511268    }
Note: See TracChangeset for help on using the changeset viewer.