Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Style engine: permit wp custom CSS properties #43071

Merged
merged 5 commits into from
Oct 14, 2022
+47 −13
Merged

Style engine: permit wp custom CSS properties #43071

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5321f2d
Allow a single custom properties with which we can test incoming `--w…
ramonjd Aug 9, 2022
ba273ac
Whoa horsey! Let's simplify this and check for explicit Gutenberg CSS…
ramonjd Aug 9, 2022
da9f89f
Using a CSS property to run the value of a CSS custom property throug…
ramonjd Aug 11, 2022
160762b
Updated tests
ramonjd Sep 27, 2022
4bfdd3c
Updated comment and function name to reflect contents of test.
ramonjd Oct 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions packages/style-engine/class-wp-style-engine-css-declarations.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,21 @@
* @access private
*/
class WP_Style_Engine_CSS_Declarations {
/**
* An array of valid CSS custom properties.
* CSS custom properties are permitted by safecss_filter_attr()
* since WordPress 6.1. See: https://core.trac.wordpress.org/ticket/56353.
*
* This whitelist exists so that the Gutenberg plugin maintains
* backwards compatibility with versions of WordPress < 6.1.
*
* It does not need to be backported to future versions of WordPress.
*
* @var array
*/
protected static $valid_custom_declarations = array(
'--wp--style--unstable-gallery-gap' => 'gap',
);

/**
* An array of CSS declarations (property => value pairs).
Expand Down Expand Up @@ -125,6 +140,23 @@ public function get_declarations() {
*/
protected static function filter_declaration( $property, $value, $spacer = '' ) {
$filtered_value = wp_strip_all_tags( $value, true );

/**
* Allows a specific list of CSS custom properties starting with `--wp--`.
*
* CSS custom properties are permitted by safecss_filter_attr()
* since WordPress 6.1. See: https://core.trac.wordpress.org/ticket/56353.
*
* This condition exists so that the Gutenberg plugin maintains
* backwards compatibility with versions of WordPress < 6.1.
*
* It does not need to be backported to future versions of WordPress.
*/
if ( '' !== $filtered_value && isset( static::$valid_custom_declarations[ $property ] ) ) {
return safecss_filter_attr( static::$valid_custom_declarations[ $property ] . ":{$spacer}{$value}" ) ?
"{$property}:{$spacer}{$value}" : '';
}

if ( '' !== $filtered_value ) {
return safecss_filter_attr( "{$property}:{$spacer}{$filtered_value}" );
}
Expand Down
28 changes: 15 additions & 13 deletions phpunit/style-engine/class-wp-style-engine-css-declarations-test.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,22 +121,24 @@ public function test_should_strip_html_tags_and_remove_unsafe_css_properties() {


/**
* Tests that calc, clamp, min, max, and minmax CSS functions are allowed.
* Tests that calc, clamp, min, max, minmax CSS functions and CSS custom properties are allowed.
*
* @covers ::get_declarations_string
* @covers ::filter_declaration
*/
public function test_should_allow_css_functions_and_strip_unsafe_css_values() {
public function test_should_allow_css_functions_and_custom_properties_and_strip_unsafe_css_values() {
$input_declarations = array(
'background' => 'var(--wp--preset--color--primary, 10px)', // Simple var().
'font-size' => 'clamp(36.00rem, calc(32.00rem + 10.00vw), 40.00rem)', // Nested clamp().
'width' => 'min(150vw, 100px)',
'min-width' => 'max(150vw, 100px)',
'max-width' => 'minmax(400px, 50%)',
'padding' => 'calc(80px * -1)',
'background-image' => 'url("https://wordpress.org")',
'line-height' => 'url("https://wordpress.org")',
'margin' => 'illegalfunction(30px)',
'background' => 'var(--wp--preset--color--primary, 10px)', // Simple var().
'font-size' => 'clamp(36.00rem, calc(32.00rem + 10.00vw), 40.00rem)', // Nested clamp().
'width' => 'min(150vw, 100px)',
'min-width' => 'max(150vw, 100px)',
'max-width' => 'minmax(400px, 50%)',
'padding' => 'calc(80px * -1)',
'background-image' => 'url("https://wordpress.org")',
'line-height' => 'url("https://wordpress.org")',
'margin' => 'illegalfunction(30px)',
'--wp--style--unstable-gallery-gap' => '12em',
'/::border-[<width>]' => '2000.75em',
);
$css_declarations = new WP_Style_Engine_CSS_Declarations_Gutenberg( $input_declarations );
$safecss_filter_attr_allow_css_mock_action = new MockAction();
Expand All @@ -146,13 +148,13 @@ public function test_should_allow_css_functions_and_strip_unsafe_css_values() {
$css_declarations_string = $css_declarations->get_declarations_string();

$this->assertSame(
9,
11,
$safecss_filter_attr_allow_css_mock_action->get_call_count(),
'"safecss_filter_attr_allow_css" filters were not applied to CSS declaration values.'
);

$this->assertSame(
'background:var(--wp--preset--color--primary, 10px);font-size:clamp(36.00rem, calc(32.00rem + 10.00vw), 40.00rem);width:min(150vw, 100px);min-width:max(150vw, 100px);max-width:minmax(400px, 50%);padding:calc(80px * -1);background-image:url("https://wordpress.org");',
'background:var(--wp--preset--color--primary, 10px);font-size:clamp(36.00rem, calc(32.00rem + 10.00vw), 40.00rem);width:min(150vw, 100px);min-width:max(150vw, 100px);max-width:minmax(400px, 50%);padding:calc(80px * -1);background-image:url("https://wordpress.org");--wp--style--unstable-gallery-gap:12em;border-width:2000.75em;',
$css_declarations_string,
'Unsafe values were not removed'
);
Expand Down