From b819d17eb952d4319b393fa49a6776c407ebaf35 Mon Sep 17 00:00:00 2001 From: scruffian Date: Mon, 13 Mar 2023 13:00:27 +0000 Subject: [PATCH 1/3] Duotone: Style Engine: Add unit test and associated refactoring --- lib/block-supports/duotone.php | 99 +++++++++++++--------- phpunit/style-engine/style-engine-test.php | 31 +++++++ 2 files changed, 90 insertions(+), 40 deletions(-) diff --git a/lib/block-supports/duotone.php b/lib/block-supports/duotone.php index ef950f80ce9448..2bb58f10409a5c 100644 --- a/lib/block-supports/duotone.php +++ b/lib/block-supports/duotone.php @@ -290,6 +290,59 @@ function gutenberg_tinycolor_string_to_rgb( $color_str ) { } } +class WP_Duotone { + static function get_id_selector_property_and_maybe_svg( $duotone_attr, $duotone_support ) { + $is_preset = is_string( $duotone_attr ) && strpos( $duotone_attr, 'var:preset|duotone|' ) === 0; + $is_css = is_string( $duotone_attr ) && strpos( $duotone_attr, 'var:preset|duotone|' ) === false; + $is_custom = is_array( $duotone_attr ); + $filter_svg = null; + // Generate the pieces needed for rendering a duotone to the page. + if ( $is_preset ) { + // Extract the slug from the preset variable string. + $slug = str_replace( 'var:preset|duotone|', '', $duotone_attr ); + + // Utilize existing preset CSS custom property. + $filter_property = "var(--wp--preset--duotone--$slug)"; + } elseif ( $is_css ) { + // Build a unique slug for the filter based on the CSS value. + $slug = wp_unique_id( sanitize_key( $duotone_attr . '-' ) ); + + // Pass through the CSS value. + $filter_property = $duotone_attr; + } elseif ( $is_custom ) { + // Build a unique slug for the filter based on the array of colors. + $slug = wp_unique_id( sanitize_key( implode( '-', $duotone_attr ) . '-' ) ); + + // This has the same shape as a preset, so it can be used in place of a + // preset when getting the filter property and SVG filter. + $filter_data = array( + 'slug' => $slug, + 'colors' => $duotone_attr, + ); + + // Build a customized CSS filter property for unique slug. + $filter_property = gutenberg_get_duotone_filter_property( $filter_data ); + + // SVG will be output on the page later. + $filter_svg = gutenberg_get_duotone_filter_svg( $filter_data ); + } + + // - Applied as a class attribute to the block wrapper. + // - Used as a selector to apply the filter to the block. + $filter_id = gutenberg_get_duotone_filter_id( array( 'slug' => $slug ) ); + + // Build the CSS selectors to which the filter will be applied. + $selector = WP_Theme_JSON_Gutenberg::scope_selector( '.' . $filter_id, $duotone_support ); + + return array( + 'filter_id' => $filter_id, + 'selector' => $selector, + 'filter_property' => $filter_property, + 'filter_svg' => $filter_svg + ); + } +} + /** * Returns the prefixed id for the duotone filter for use as a CSS id. * @@ -451,47 +504,13 @@ function gutenberg_render_duotone_support( $block_content, $block ) { // 3. A CSS string - e.g. 'unset' to remove globally applied duotone. $duotone_attr = $block['attrs']['style']['color']['duotone']; - $is_preset = is_string( $duotone_attr ) && strpos( $duotone_attr, 'var:preset|duotone|' ) === 0; - $is_css = is_string( $duotone_attr ) && strpos( $duotone_attr, 'var:preset|duotone|' ) === false; - $is_custom = is_array( $duotone_attr ); - - // Generate the pieces needed for rendering a duotone to the page. - if ( $is_preset ) { - // Extract the slug from the preset variable string. - $slug = str_replace( 'var:preset|duotone|', '', $duotone_attr ); - - // Utilize existing preset CSS custom property. - $filter_property = "var(--wp--preset--duotone--$slug)"; - } elseif ( $is_css ) { - // Build a unique slug for the filter based on the CSS value. - $slug = wp_unique_id( sanitize_key( $duotone_attr . '-' ) ); - - // Pass through the CSS value. - $filter_property = $duotone_attr; - } elseif ( $is_custom ) { - // Build a unique slug for the filter based on the array of colors. - $slug = wp_unique_id( sanitize_key( implode( '-', $duotone_attr ) . '-' ) ); - - // This has the same shape as a preset, so it can be used in place of a - // preset when getting the filter property and SVG filter. - $filter_data = array( - 'slug' => $slug, - 'colors' => $duotone_attr, - ); - - // Build a customized CSS filter property for unique slug. - $filter_property = gutenberg_get_duotone_filter_property( $filter_data ); - - // SVG will be output on the page later. - $filter_svg = gutenberg_get_duotone_filter_svg( $filter_data ); - } - - // - Applied as a class attribute to the block wrapper. - // - Used as a selector to apply the filter to the block. - $filter_id = gutenberg_get_duotone_filter_id( array( 'slug' => $slug ) ); + list( + 'filter_id' => $filter_id, + 'selector' => $selector, + 'filter_property' => $filter_property, + 'filter_svg' => $filter_svg + ) = WP_Duotone::get_id_selector_property_and_maybe_svg( $duotone_attr, $duotone_support ); - // Build the CSS selectors to which the filter will be applied. - $selector = WP_Theme_JSON_Gutenberg::scope_selector( '.' . $filter_id, $duotone_support ); // Calling gutenberg_style_engine_get_stylesheet_from_css_rules ensures that // the styles are rendered in an inline for block supports because we're diff --git a/phpunit/style-engine/style-engine-test.php b/phpunit/style-engine/style-engine-test.php index 0588f10ef4fce7..d7fc4f27b15b8f 100644 --- a/phpunit/style-engine/style-engine-test.php +++ b/phpunit/style-engine/style-engine-test.php @@ -676,4 +676,35 @@ public function test_should_dedupe_and_merge_css_rules() { $this->assertSame( '.gandalf{color:white;height:190px;border-style:dotted;padding:10px;margin-bottom:100px;}.dumbledore,.rincewind{color:grey;height:90px;border-style:dotted;}', $compiled_stylesheet ); } + + /** + * Tests returning a generated stylesheet from a set of duotone rules. + * + * @covers ::gutenberg_style_engine_get_stylesheet_from_css_rules + * @covers WP_Style_Engine_Gutenberg::compile_stylesheet_from_css_rules + */ + public function test_should_return_stylesheet_from_duotone_css_rules() { + $duotone_attr = array( '#FFFFFF', '#000000' ); + $duotone_support = true; + list( + 'selector' => $selector, + 'filter_property' => $filter_property, + ) = WP_Duotone::get_id_selector_property_and_maybe_svg( $duotone_attr, $duotone_support ); + + $css_rules = array( + array( + 'selector' => $selector, + 'declarations' => array( + // !important is needed because these styles + // render before global styles, + // and they should be overriding the duotone + // filters set by global styles. + 'filter' => $filter_property . ' !important', + ), + ), + ); + + $compiled_stylesheet = gutenberg_style_engine_get_stylesheet_from_css_rules( $css_rules, array( 'prettify' => false ) ); + $this->assertSame( ".wp-duotone-ffffff-000000-1 1{filter:url('#wp-duotone-ffffff-000000-1') !important;}", $compiled_stylesheet ); + } } From 34c5ab3b0b04cf03cf1ccdd00ce8649a26386deb Mon Sep 17 00:00:00 2001 From: scruffian Date: Tue, 14 Mar 2023 11:55:22 +0000 Subject: [PATCH 2/3] simplify test --- phpunit/style-engine/style-engine-test.php | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/phpunit/style-engine/style-engine-test.php b/phpunit/style-engine/style-engine-test.php index d7fc4f27b15b8f..20d817432c0a22 100644 --- a/phpunit/style-engine/style-engine-test.php +++ b/phpunit/style-engine/style-engine-test.php @@ -680,31 +680,26 @@ public function test_should_dedupe_and_merge_css_rules() { /** * Tests returning a generated stylesheet from a set of duotone rules. * + * This is testing this fix: https://github.com/WordPress/gutenberg/pull/49004 + * * @covers ::gutenberg_style_engine_get_stylesheet_from_css_rules * @covers WP_Style_Engine_Gutenberg::compile_stylesheet_from_css_rules */ public function test_should_return_stylesheet_from_duotone_css_rules() { - $duotone_attr = array( '#FFFFFF', '#000000' ); - $duotone_support = true; - list( - 'selector' => $selector, - 'filter_property' => $filter_property, - ) = WP_Duotone::get_id_selector_property_and_maybe_svg( $duotone_attr, $duotone_support ); - $css_rules = array( array( - 'selector' => $selector, + 'selector' => '.wp-duotone-ffffff-000000-1', 'declarations' => array( // !important is needed because these styles // render before global styles, // and they should be overriding the duotone // filters set by global styles. - 'filter' => $filter_property . ' !important', + 'filter' => "url('#wp-duotone-ffffff-000000-1') !important", ), ), ); $compiled_stylesheet = gutenberg_style_engine_get_stylesheet_from_css_rules( $css_rules, array( 'prettify' => false ) ); - $this->assertSame( ".wp-duotone-ffffff-000000-1 1{filter:url('#wp-duotone-ffffff-000000-1') !important;}", $compiled_stylesheet ); + $this->assertSame( ".wp-duotone-ffffff-000000-1{filter:url('#wp-duotone-ffffff-000000-1') !important;}", $compiled_stylesheet ); } } From 1ddd695fad4ffbff4eec067f3d5936ecb1de84a5 Mon Sep 17 00:00:00 2001 From: scruffian Date: Tue, 14 Mar 2023 11:55:41 +0000 Subject: [PATCH 3/3] reset duotone file --- lib/block-supports/duotone.php | 99 ++++++++++++++-------------------- 1 file changed, 40 insertions(+), 59 deletions(-) diff --git a/lib/block-supports/duotone.php b/lib/block-supports/duotone.php index 2bb58f10409a5c..ef950f80ce9448 100644 --- a/lib/block-supports/duotone.php +++ b/lib/block-supports/duotone.php @@ -290,59 +290,6 @@ function gutenberg_tinycolor_string_to_rgb( $color_str ) { } } -class WP_Duotone { - static function get_id_selector_property_and_maybe_svg( $duotone_attr, $duotone_support ) { - $is_preset = is_string( $duotone_attr ) && strpos( $duotone_attr, 'var:preset|duotone|' ) === 0; - $is_css = is_string( $duotone_attr ) && strpos( $duotone_attr, 'var:preset|duotone|' ) === false; - $is_custom = is_array( $duotone_attr ); - $filter_svg = null; - // Generate the pieces needed for rendering a duotone to the page. - if ( $is_preset ) { - // Extract the slug from the preset variable string. - $slug = str_replace( 'var:preset|duotone|', '', $duotone_attr ); - - // Utilize existing preset CSS custom property. - $filter_property = "var(--wp--preset--duotone--$slug)"; - } elseif ( $is_css ) { - // Build a unique slug for the filter based on the CSS value. - $slug = wp_unique_id( sanitize_key( $duotone_attr . '-' ) ); - - // Pass through the CSS value. - $filter_property = $duotone_attr; - } elseif ( $is_custom ) { - // Build a unique slug for the filter based on the array of colors. - $slug = wp_unique_id( sanitize_key( implode( '-', $duotone_attr ) . '-' ) ); - - // This has the same shape as a preset, so it can be used in place of a - // preset when getting the filter property and SVG filter. - $filter_data = array( - 'slug' => $slug, - 'colors' => $duotone_attr, - ); - - // Build a customized CSS filter property for unique slug. - $filter_property = gutenberg_get_duotone_filter_property( $filter_data ); - - // SVG will be output on the page later. - $filter_svg = gutenberg_get_duotone_filter_svg( $filter_data ); - } - - // - Applied as a class attribute to the block wrapper. - // - Used as a selector to apply the filter to the block. - $filter_id = gutenberg_get_duotone_filter_id( array( 'slug' => $slug ) ); - - // Build the CSS selectors to which the filter will be applied. - $selector = WP_Theme_JSON_Gutenberg::scope_selector( '.' . $filter_id, $duotone_support ); - - return array( - 'filter_id' => $filter_id, - 'selector' => $selector, - 'filter_property' => $filter_property, - 'filter_svg' => $filter_svg - ); - } -} - /** * Returns the prefixed id for the duotone filter for use as a CSS id. * @@ -504,13 +451,47 @@ function gutenberg_render_duotone_support( $block_content, $block ) { // 3. A CSS string - e.g. 'unset' to remove globally applied duotone. $duotone_attr = $block['attrs']['style']['color']['duotone']; - list( - 'filter_id' => $filter_id, - 'selector' => $selector, - 'filter_property' => $filter_property, - 'filter_svg' => $filter_svg - ) = WP_Duotone::get_id_selector_property_and_maybe_svg( $duotone_attr, $duotone_support ); + $is_preset = is_string( $duotone_attr ) && strpos( $duotone_attr, 'var:preset|duotone|' ) === 0; + $is_css = is_string( $duotone_attr ) && strpos( $duotone_attr, 'var:preset|duotone|' ) === false; + $is_custom = is_array( $duotone_attr ); + + // Generate the pieces needed for rendering a duotone to the page. + if ( $is_preset ) { + // Extract the slug from the preset variable string. + $slug = str_replace( 'var:preset|duotone|', '', $duotone_attr ); + + // Utilize existing preset CSS custom property. + $filter_property = "var(--wp--preset--duotone--$slug)"; + } elseif ( $is_css ) { + // Build a unique slug for the filter based on the CSS value. + $slug = wp_unique_id( sanitize_key( $duotone_attr . '-' ) ); + + // Pass through the CSS value. + $filter_property = $duotone_attr; + } elseif ( $is_custom ) { + // Build a unique slug for the filter based on the array of colors. + $slug = wp_unique_id( sanitize_key( implode( '-', $duotone_attr ) . '-' ) ); + + // This has the same shape as a preset, so it can be used in place of a + // preset when getting the filter property and SVG filter. + $filter_data = array( + 'slug' => $slug, + 'colors' => $duotone_attr, + ); + + // Build a customized CSS filter property for unique slug. + $filter_property = gutenberg_get_duotone_filter_property( $filter_data ); + + // SVG will be output on the page later. + $filter_svg = gutenberg_get_duotone_filter_svg( $filter_data ); + } + + // - Applied as a class attribute to the block wrapper. + // - Used as a selector to apply the filter to the block. + $filter_id = gutenberg_get_duotone_filter_id( array( 'slug' => $slug ) ); + // Build the CSS selectors to which the filter will be applied. + $selector = WP_Theme_JSON_Gutenberg::scope_selector( '.' . $filter_id, $duotone_support ); // Calling gutenberg_style_engine_get_stylesheet_from_css_rules ensures that // the styles are rendered in an inline for block supports because we're