From 108a2628f99352a15e8336b59fc2369513b1d2dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Thu, 30 Sep 2021 13:40:11 +0200 Subject: [PATCH 1/5] Update tests to allow duotone styles provided by the user --- phpunit/class-wp-theme-json-test.php | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index a500be9b80482..3091284569aa7 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -1078,6 +1078,11 @@ function test_remove_insecure_properties_removes_unsafe_styles() { ), ), 'blocks' => array( + 'core/image' => array( + 'filter' => array( + 'duotone' => 'var:preset|duotone|blue-red', + ), + ), 'core/group' => array( 'color' => array( 'text' => 'var:preset|color|dark-gray', From 64430d5999e1a196ae5823d99718e9cb3bada4aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Mon, 4 Oct 2021 12:33:09 +0200 Subject: [PATCH 2/5] Add a filter that does not pass validation --- phpunit/class-wp-theme-json-test.php | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 3091284569aa7..e841e859b730b 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -1041,6 +1041,11 @@ function test_remove_insecure_properties_removes_unsafe_styles() { 'duotone' => 'var:preset|duotone|blue-red', ), ), + 'core/cover' => array( + 'filter' => array( + 'duotone' => 'var(--wp--preset--duotone--blue-red, var(--fallback-unsafe))', + ), + ), 'core/group' => array( 'color' => array( 'gradient' => 'url(\'data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+PHNjcmlwdD5hbGVydCgnb2snKTwvc2NyaXB0PjxsaW5lYXJHcmFkaWVudCBpZD0nZ3JhZGllbnQnPjxzdG9wIG9mZnNldD0nMTAlJyBzdG9wLWNvbG9yPScjRjAwJy8+PHN0b3Agb2Zmc2V0PSc5MCUnIHN0b3AtY29sb3I9JyNmY2MnLz4gPC9saW5lYXJHcmFkaWVudD48cmVjdCBmaWxsPSd1cmwoI2dyYWRpZW50KScgeD0nMCcgeT0nMCcgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScvPjwvc3ZnPg==\')', From 51b8d76e7bfcc602e17d1c5995d1ef8bf19471af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Mon, 4 Oct 2021 12:40:21 +0200 Subject: [PATCH 3/5] Enable filter CSS property when we need to use kses to filter user data --- lib/global-styles.php | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/lib/global-styles.php b/lib/global-styles.php index 6b5c7bfa41642..55d4ab624654c 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -274,6 +274,7 @@ function gutenberg_global_styles_filter_post( $content ) { */ function gutenberg_global_styles_kses_init_filters() { add_filter( 'content_save_pre', 'gutenberg_global_styles_filter_post' ); + add_filter( 'safe_style_css', 'gutenberg_global_styles_include_support_for_duotone', 10, 2 ); } /** @@ -345,6 +346,18 @@ function gutenberg_global_styles_include_support_for_wp_variables( $allow_css, $ return ! ! preg_match( '/^var\(--wp-[a-zA-Z0-9\-]+\)$/', trim( $parts[1] ) ); } +/** + * This is for using kses to test user data. + * + * @param array $atts Allowed CSS property names, according to kses. + * + * @return array The new allowed CSS property names. + */ +function gutenberg_global_styles_include_support_for_duotone( $atts ) { + $atts[] = 'filter'; + return $atts; +} + // The else clause can be removed when plugin support requires WordPress 5.8.0+. if ( function_exists( 'get_block_editor_settings' ) ) { add_filter( 'block_editor_settings_all', 'gutenberg_experimental_global_styles_settings', PHP_INT_MAX ); From 53109415d541050bf234c94c4b87077f18b55196 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Mon, 4 Oct 2021 12:50:06 +0200 Subject: [PATCH 4/5] Simplify properties in use --- lib/class-wp-theme-json-gutenberg.php | 34 ++++++++++++++------------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 02b6dba86f744..b56cce3d92f24 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -247,16 +247,7 @@ class WP_Theme_JSON_Gutenberg { '--wp--style--block-gap' => array( 'spacing', 'blockGap' ), 'text-decoration' => array( 'typography', 'textDecoration' ), 'text-transform' => array( 'typography', 'textTransform' ), - ); - - /** - * Metadata for style properties that need to use the duotone selector. - * - * Each element is a direct mapping from the CSS property name to the - * path to the value in theme.json & block attributes. - */ - const DUOTONE_PROPERTIES_METADATA = array( - 'filter' => array( 'filter', 'duotone' ), + 'filter' => array( 'filter', 'duotone' ), ); /** @@ -981,8 +972,25 @@ private function get_block_classes( $style_nodes ) { $selector = $metadata['selector']; $settings = _wp_array_get( $this->theme_json, array( 'settings' ) ); $declarations = self::compute_style_properties( $node, $settings ); + + // 1. Separate the ones who use the general selector and the ones who have th + $declarations_duotone = array(); + foreach ( $declarations as $index => $declaration ) { + if ( 'filter' === $declaration['name'] ) { + unset( $declarations[ $index ] ); + $declarations_duotone[] = $declaration; + } + } + + // 2. Generate the general ones. $block_rules .= self::to_ruleset( $selector, $declarations ); + // 3. Generate the duotone ones. + if ( isset( $metadata['duotone'] ) && ! empty( $declarations_duotone ) ) { + $selector_duotone = self::scope_selector( $metadata['selector'], $metadata['duotone'] ); + $block_rules .= self::to_ruleset( $selector_duotone, $declarations_duotone ); + } + if ( self::ROOT_BLOCK_SELECTOR === $selector ) { $block_rules .= '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }'; $block_rules .= '.wp-site-blocks > .alignright { float: right; margin-left: 2em; }'; @@ -993,12 +1001,6 @@ private function get_block_classes( $style_nodes ) { $block_rules .= '.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }'; } } - - if ( isset( $metadata['duotone'] ) ) { - $selector = self::scope_selector( $metadata['selector'], $metadata['duotone'] ); - $declarations = self::compute_style_properties( $node, $settings, self::DUOTONE_PROPERTIES_METADATA ); - $block_rules .= self::to_ruleset( $selector, $declarations ); - } } return $block_rules; From a7e3e8f08512cac3ec12c45a12d13e7e4c6e0408 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Wed, 6 Oct 2021 10:27:19 +0200 Subject: [PATCH 5/5] Update comment --- lib/class-wp-theme-json-gutenberg.php | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index b56cce3d92f24..e7556bb3614b5 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -973,7 +973,8 @@ private function get_block_classes( $style_nodes ) { $settings = _wp_array_get( $this->theme_json, array( 'settings' ) ); $declarations = self::compute_style_properties( $node, $settings ); - // 1. Separate the ones who use the general selector and the ones who have th + // 1. Separate the ones who use the general selector + // and the ones who use the duotone selector. $declarations_duotone = array(); foreach ( $declarations as $index => $declaration ) { if ( 'filter' === $declaration['name'] ) { @@ -982,10 +983,10 @@ private function get_block_classes( $style_nodes ) { } } - // 2. Generate the general ones. + // 2. Generate the rules that use the general selector. $block_rules .= self::to_ruleset( $selector, $declarations ); - // 3. Generate the duotone ones. + // 3. Generate the rules that use the duotone selector. if ( isset( $metadata['duotone'] ) && ! empty( $declarations_duotone ) ) { $selector_duotone = self::scope_selector( $metadata['selector'], $metadata['duotone'] ); $block_rules .= self::to_ruleset( $selector_duotone, $declarations_duotone );