From afb2547a9c30b18dcebcedbd44a6625a3c5c7751 Mon Sep 17 00:00:00 2001 From: scruffian Date: Tue, 21 Feb 2023 17:19:48 +0000 Subject: [PATCH 01/11] Duotone: Only output Duotone filters that are used --- lib/class-wp-theme-json-gutenberg.php | 64 +++++++++++++++++++++- lib/compat/wordpress-6.2/script-loader.php | 4 ++ 2 files changed, 67 insertions(+), 1 deletion(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 1e828edcaddc3..1184405430943 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -2266,6 +2266,42 @@ private static function get_block_nodes( $theme_json, $selectors = array() ) { return $nodes; } + private function gutenberg_get_preset_from_declaration( $declaration ) { + preg_match('/var\(--wp--preset--duotone--(.*)\)/', $declaration['value'], $matches ); + $preset_slug = $matches[1]; + $supports_theme_json = wp_theme_has_theme_json(); + + $origins = array( 'default', 'theme', 'custom' ); + if ( ! $supports_theme_json ) { + $origins = array( 'default' ); + } + + // Copied from get_svg_filters + $blocks_metadata = static::get_blocks_metadata(); + $setting_nodes = static::get_setting_nodes( $this->theme_json, $blocks_metadata ); + + $filters = ''; + foreach ( $setting_nodes as $metadata ) { + $node = _wp_array_get( $this->theme_json, $metadata['path'], array() ); + if ( empty( $node['color']['duotone'] ) ) { + continue; + } + + $duotone_presets = $node['color']['duotone']; + + foreach ( $origins as $origin ) { + if ( ! isset( $duotone_presets[ $origin ] ) ) { + continue; + } + foreach ( $duotone_presets[ $origin ] as $duotone_preset ) { + if( $duotone_preset['slug'] === $preset_slug ) { + return $duotone_preset; + } + } + } + } + } + /** * Gets the CSS rules for a particular block from theme.json. * @@ -2425,8 +2461,34 @@ function( $pseudo_selector ) use ( $selector ) { $declarations_duotone = array(); foreach ( $declarations as $index => $declaration ) { if ( 'filter' === $declaration['name'] ) { - unset( $declarations[ $index ] ); + $filter_preset = $this->gutenberg_get_preset_from_declaration( $declarations[ $index ] ); + $filter_svg = gutenberg_get_duotone_filter_svg( $filter_preset ); + + add_action( + 'wp_footer', + static function () use ( $filter_svg, $selector ) { + echo $filter_svg; + + /* + * Safari renders elements incorrectly on first paint when the + * SVG filter comes after the content that it is filtering, so + * we force a repaint with a WebKit hack which solves the issue. + */ + global $is_safari; + if ( $is_safari ) { + /* + * Simply accessing el.offsetHeight flushes layout and style + * changes in WebKit without having to wait for setTimeout. + */ + printf( + '', + wp_json_encode( $selector ) + ); + } + } + ); $declarations_duotone[] = $declaration; + unset( $declarations[ $index ] ); } } diff --git a/lib/compat/wordpress-6.2/script-loader.php b/lib/compat/wordpress-6.2/script-loader.php index 149a6a18e1450..bf3c526d15d1c 100644 --- a/lib/compat/wordpress-6.2/script-loader.php +++ b/lib/compat/wordpress-6.2/script-loader.php @@ -191,3 +191,7 @@ function gutenberg_enqueue_global_styles_custom_css() { } } add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_global_styles_custom_css' ); + + +remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' ); +remove_action( 'in_admin_header', 'wp_global_styles_render_svg_filters' ); \ No newline at end of file From 0335718ddf85ba8586d045df4d555802d5974e7a Mon Sep 17 00:00:00 2001 From: scruffian Date: Wed, 22 Feb 2023 09:58:52 +0000 Subject: [PATCH 02/11] simplify --- lib/class-wp-theme-json-gutenberg.php | 73 ++++--------------- .../get-global-styles-and-settings.php | 42 +++++++++++ lib/compat/wordpress-6.2/script-loader.php | 33 ++++++++- 3 files changed, 87 insertions(+), 61 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 1184405430943..a247faad5caa4 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -567,6 +567,11 @@ public static function get_element_class_name( $element ) { */ const LATEST_SCHEMA = 2; + /** + * An array of Duotone presets. + */ + static $duotone_presets; + /** * Constructor. * @@ -2266,40 +2271,9 @@ private static function get_block_nodes( $theme_json, $selectors = array() ) { return $nodes; } - private function gutenberg_get_preset_from_declaration( $declaration ) { + private function gutenberg_get_preset_slug_from_declaration( $declaration ) { preg_match('/var\(--wp--preset--duotone--(.*)\)/', $declaration['value'], $matches ); - $preset_slug = $matches[1]; - $supports_theme_json = wp_theme_has_theme_json(); - - $origins = array( 'default', 'theme', 'custom' ); - if ( ! $supports_theme_json ) { - $origins = array( 'default' ); - } - - // Copied from get_svg_filters - $blocks_metadata = static::get_blocks_metadata(); - $setting_nodes = static::get_setting_nodes( $this->theme_json, $blocks_metadata ); - - $filters = ''; - foreach ( $setting_nodes as $metadata ) { - $node = _wp_array_get( $this->theme_json, $metadata['path'], array() ); - if ( empty( $node['color']['duotone'] ) ) { - continue; - } - - $duotone_presets = $node['color']['duotone']; - - foreach ( $origins as $origin ) { - if ( ! isset( $duotone_presets[ $origin ] ) ) { - continue; - } - foreach ( $duotone_presets[ $origin ] as $duotone_preset ) { - if( $duotone_preset['slug'] === $preset_slug ) { - return $duotone_preset; - } - } - } - } + return $matches[1]; } /** @@ -2461,32 +2435,8 @@ function( $pseudo_selector ) use ( $selector ) { $declarations_duotone = array(); foreach ( $declarations as $index => $declaration ) { if ( 'filter' === $declaration['name'] ) { - $filter_preset = $this->gutenberg_get_preset_from_declaration( $declarations[ $index ] ); - $filter_svg = gutenberg_get_duotone_filter_svg( $filter_preset ); - - add_action( - 'wp_footer', - static function () use ( $filter_svg, $selector ) { - echo $filter_svg; - - /* - * Safari renders elements incorrectly on first paint when the - * SVG filter comes after the content that it is filtering, so - * we force a repaint with a WebKit hack which solves the issue. - */ - global $is_safari; - if ( $is_safari ) { - /* - * Simply accessing el.offsetHeight flushes layout and style - * changes in WebKit without having to wait for setTimeout. - */ - printf( - '', - wp_json_encode( $selector ) - ); - } - } - ); + $filter_preset_slug = $this->gutenberg_get_preset_slug_from_declaration( $declarations[ $index ] ); + self::$duotone_presets[] = $filter_preset_slug; $declarations_duotone[] = $declaration; unset( $declarations[ $index ] ); } @@ -2762,7 +2712,9 @@ public function get_svg_filters( $origins ) { continue; } foreach ( $duotone_presets[ $origin ] as $duotone_preset ) { - $filters .= wp_get_duotone_filter_svg( $duotone_preset ); + if ( in_array( $duotone_preset['slug'], self::$duotone_presets ) ) { + $filters .= wp_get_duotone_filter_svg( $duotone_preset ); + } } } } @@ -3511,4 +3463,5 @@ public function set_spacing_sizes() { _wp_array_set( $this->theme_json, array( 'settings', 'spacing', 'spacingSizes', 'default' ), $spacing_sizes ); } + } diff --git a/lib/compat/wordpress-6.2/get-global-styles-and-settings.php b/lib/compat/wordpress-6.2/get-global-styles-and-settings.php index e02a0466a0b98..7019870e87ec6 100644 --- a/lib/compat/wordpress-6.2/get-global-styles-and-settings.php +++ b/lib/compat/wordpress-6.2/get-global-styles-and-settings.php @@ -255,3 +255,45 @@ function _gutenberg_add_non_persistent_theme_json_cache_group() { wp_cache_add_non_persistent_groups( 'theme_json' ); } add_action( 'plugins_loaded', '_gutenberg_add_non_persistent_theme_json_cache_group' ); + + +/** + * Returns a string containing the SVGs to be referenced as filters (duotone). + * + * @since 5.9.1 + * + * @return string + */ +function gutenberg_get_global_styles_svg_filters() { + /* + * Ignore cache when `WP_DEBUG` is enabled, so it doesn't interfere with the theme + * developer's workflow. + * + * @todo Replace `WP_DEBUG` once an "in development mode" check is available in Core. + */ + $can_use_cached = ! WP_DEBUG; + $cache_group = 'theme_json'; + $cache_key = 'wp_get_global_styles_svg_filters'; + if ( $can_use_cached ) { + $cached = wp_cache_get( $cache_key, $cache_group ); + if ( $cached ) { + return $cached; + } + } + + $supports_theme_json = wp_theme_has_theme_json(); + + $origins = array( 'default', 'theme', 'custom' ); + if ( ! $supports_theme_json ) { + $origins = array( 'default' ); + } + + $tree = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data(); + $svgs = $tree->get_svg_filters( $origins ); + + if ( $can_use_cached ) { + wp_cache_set( $cache_key, $svgs, $cache_group ); + } + + return $svgs; +} \ No newline at end of file diff --git a/lib/compat/wordpress-6.2/script-loader.php b/lib/compat/wordpress-6.2/script-loader.php index bf3c526d15d1c..0dd00fdd2e9a6 100644 --- a/lib/compat/wordpress-6.2/script-loader.php +++ b/lib/compat/wordpress-6.2/script-loader.php @@ -193,5 +193,36 @@ function gutenberg_enqueue_global_styles_custom_css() { add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_global_styles_custom_css' ); + +/** + * Renders the SVG filters supplied by theme.json. + * + * Note that this doesn't render the per-block user-defined + * filters which are handled by wp_render_duotone_support, + * but it should be rendered before the filtered content + * in the body to satisfy Safari's rendering quirks. + * + * @since 5.9.1 + */ +function gutenberg_global_styles_render_svg_filters() { + /* + * When calling via the in_admin_header action, we only want to render the + * SVGs on block editor pages. + */ + if ( + is_admin() && + ! get_current_screen()->is_block_editor() + ) { + return; + } + + $filters = gutenberg_get_global_styles_svg_filters(); + if ( ! empty( $filters ) ) { + echo $filters; + } +} + remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' ); -remove_action( 'in_admin_header', 'wp_global_styles_render_svg_filters' ); \ No newline at end of file +remove_action( 'in_admin_header', 'wp_global_styles_render_svg_filters' ); +add_action( 'wp_body_open', 'gutenberg_global_styles_render_svg_filters' ); +add_action( 'in_admin_header', 'gutenberg_global_styles_render_svg_filters' ); \ No newline at end of file From cb94566569c6b0a9df7c57cc1247066aea8815da Mon Sep 17 00:00:00 2001 From: scruffian Date: Wed, 22 Feb 2023 11:15:36 +0000 Subject: [PATCH 03/11] just compare the CSS variables --- lib/class-wp-theme-json-gutenberg.php | 42 +++++++++++++++++++++++++-- 1 file changed, 39 insertions(+), 3 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index a247faad5caa4..f570bb2ffbb06 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -2272,6 +2272,7 @@ private static function get_block_nodes( $theme_json, $selectors = array() ) { } private function gutenberg_get_preset_slug_from_declaration( $declaration ) { + var_dump( $this->theme_json); preg_match('/var\(--wp--preset--duotone--(.*)\)/', $declaration['value'], $matches ); return $matches[1]; } @@ -2435,8 +2436,7 @@ function( $pseudo_selector ) use ( $selector ) { $declarations_duotone = array(); foreach ( $declarations as $index => $declaration ) { if ( 'filter' === $declaration['name'] ) { - $filter_preset_slug = $this->gutenberg_get_preset_slug_from_declaration( $declarations[ $index ] ); - self::$duotone_presets[] = $filter_preset_slug; + self::$duotone_presets[] = $declarations[ $index ]['value']; $declarations_duotone[] = $declaration; unset( $declarations[ $index ] ); } @@ -2712,7 +2712,11 @@ public function get_svg_filters( $origins ) { continue; } foreach ( $duotone_presets[ $origin ] as $duotone_preset ) { - if ( in_array( $duotone_preset['slug'], self::$duotone_presets ) ) { + // Get the CSS variable for the preset. + $duotone_preset_css_var = $this->get_preset_css_var( array( 'color', 'duotone' ), $duotone_preset['slug'] ); + + // Only output the preset if it's used by a block. + if ( in_array( $duotone_preset_css_var, self::$duotone_presets ) ) { $filters .= wp_get_duotone_filter_svg( $duotone_preset ); } } @@ -2722,6 +2726,38 @@ public function get_svg_filters( $origins ) { return $filters; } + /** + * Returns the CSS variable for a preset. + * + * @since 6.3.0 + * + * @param array $path Path to the preset. + * @param string $slug Slug of the preset. + * @return string CSS variable. + */ + function get_preset_css_var( $path, $slug ) { + $duotone_preset_metadata = $this->get_preset_metadata_from_path( $path ); + return 'var(' . static::replace_slug_in_string( $duotone_preset_metadata['css_vars'], $slug ) .')'; + } + + /** + * Returns the metadata for a preset. + * + * @since 6.3.0 + * + * @param array $path Path to the preset. + * @return array Preset metadata. + */ + function get_preset_metadata_from_path( $path ) { + $preset_metadata = array_filter( static::PRESETS_METADATA, function( $preset ) use ( &$path ) { + if ( $preset['path'] === $path ) { + return $preset; + } + } ); + + return reset($preset_metadata); + } + /** * Determines whether a presets should be overridden or not. * From c8e659ac55f5fb2c174e685f2b67f9ed4f2bdc47 Mon Sep 17 00:00:00 2001 From: scruffian Date: Wed, 22 Feb 2023 11:16:20 +0000 Subject: [PATCH 04/11] remove unused code --- lib/class-wp-theme-json-gutenberg.php | 6 ------ 1 file changed, 6 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index f570bb2ffbb06..19402751dcb5b 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -2271,12 +2271,6 @@ private static function get_block_nodes( $theme_json, $selectors = array() ) { return $nodes; } - private function gutenberg_get_preset_slug_from_declaration( $declaration ) { - var_dump( $this->theme_json); - preg_match('/var\(--wp--preset--duotone--(.*)\)/', $declaration['value'], $matches ); - return $matches[1]; - } - /** * Gets the CSS rules for a particular block from theme.json. * From f6b610a04834f6c6edca236e0653952206134bd5 Mon Sep 17 00:00:00 2001 From: scruffian Date: Wed, 22 Feb 2023 11:17:29 +0000 Subject: [PATCH 05/11] remove unconnected change --- lib/class-wp-theme-json-gutenberg.php | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 19402751dcb5b..782cea316413f 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -3493,5 +3493,4 @@ public function set_spacing_sizes() { _wp_array_set( $this->theme_json, array( 'settings', 'spacing', 'spacingSizes', 'default' ), $spacing_sizes ); } - } From 7e03c5dcec3353f3b1b793f7b2fd44958f382cc1 Mon Sep 17 00:00:00 2001 From: scruffian Date: Wed, 22 Feb 2023 11:22:12 +0000 Subject: [PATCH 06/11] fix linter --- lib/class-wp-theme-json-gutenberg.php | 19 +++++++++++-------- .../get-global-styles-and-settings.php | 2 +- lib/compat/wordpress-6.2/script-loader.php | 2 +- 3 files changed, 13 insertions(+), 10 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 782cea316413f..b038ae90e05df 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -2431,7 +2431,7 @@ function( $pseudo_selector ) use ( $selector ) { foreach ( $declarations as $index => $declaration ) { if ( 'filter' === $declaration['name'] ) { self::$duotone_presets[] = $declarations[ $index ]['value']; - $declarations_duotone[] = $declaration; + $declarations_duotone[] = $declaration; unset( $declarations[ $index ] ); } } @@ -2710,7 +2710,7 @@ public function get_svg_filters( $origins ) { $duotone_preset_css_var = $this->get_preset_css_var( array( 'color', 'duotone' ), $duotone_preset['slug'] ); // Only output the preset if it's used by a block. - if ( in_array( $duotone_preset_css_var, self::$duotone_presets ) ) { + if ( in_array( $duotone_preset_css_var, self::$duotone_presets, true ) ) { $filters .= wp_get_duotone_filter_svg( $duotone_preset ); } } @@ -2731,7 +2731,7 @@ public function get_svg_filters( $origins ) { */ function get_preset_css_var( $path, $slug ) { $duotone_preset_metadata = $this->get_preset_metadata_from_path( $path ); - return 'var(' . static::replace_slug_in_string( $duotone_preset_metadata['css_vars'], $slug ) .')'; + return 'var(' . static::replace_slug_in_string( $duotone_preset_metadata['css_vars'], $slug ) . ')'; } /** @@ -2743,13 +2743,16 @@ function get_preset_css_var( $path, $slug ) { * @return array Preset metadata. */ function get_preset_metadata_from_path( $path ) { - $preset_metadata = array_filter( static::PRESETS_METADATA, function( $preset ) use ( &$path ) { - if ( $preset['path'] === $path ) { - return $preset; + $preset_metadata = array_filter( + static::PRESETS_METADATA, + function( $preset ) use ( &$path ) { + if ( $preset['path'] === $path ) { + return $preset; + } } - } ); + ); - return reset($preset_metadata); + return reset( $preset_metadata ); } /** diff --git a/lib/compat/wordpress-6.2/get-global-styles-and-settings.php b/lib/compat/wordpress-6.2/get-global-styles-and-settings.php index 7019870e87ec6..7e987dc435ab5 100644 --- a/lib/compat/wordpress-6.2/get-global-styles-and-settings.php +++ b/lib/compat/wordpress-6.2/get-global-styles-and-settings.php @@ -296,4 +296,4 @@ function gutenberg_get_global_styles_svg_filters() { } return $svgs; -} \ No newline at end of file +} diff --git a/lib/compat/wordpress-6.2/script-loader.php b/lib/compat/wordpress-6.2/script-loader.php index 0dd00fdd2e9a6..172191ac59a43 100644 --- a/lib/compat/wordpress-6.2/script-loader.php +++ b/lib/compat/wordpress-6.2/script-loader.php @@ -225,4 +225,4 @@ function gutenberg_global_styles_render_svg_filters() { remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' ); remove_action( 'in_admin_header', 'wp_global_styles_render_svg_filters' ); add_action( 'wp_body_open', 'gutenberg_global_styles_render_svg_filters' ); -add_action( 'in_admin_header', 'gutenberg_global_styles_render_svg_filters' ); \ No newline at end of file +add_action( 'in_admin_header', 'gutenberg_global_styles_render_svg_filters' ); From 117cdf3a6d3a49d0b4b3f5453fe7dfac1904d098 Mon Sep 17 00:00:00 2001 From: scruffian Date: Wed, 22 Feb 2023 11:46:25 +0000 Subject: [PATCH 07/11] Fix linter --- lib/class-wp-theme-json-gutenberg.php | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index b038ae90e05df..29c0c2abdff3e 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -569,6 +569,9 @@ public static function get_element_class_name( $element ) { /** * An array of Duotone presets. + * + * @since 6.3.0 + * @var array */ static $duotone_presets; @@ -2430,7 +2433,7 @@ function( $pseudo_selector ) use ( $selector ) { $declarations_duotone = array(); foreach ( $declarations as $index => $declaration ) { if ( 'filter' === $declaration['name'] ) { - self::$duotone_presets[] = $declarations[ $index ]['value']; + static::$duotone_presets[] = $declarations[ $index ]['value']; $declarations_duotone[] = $declaration; unset( $declarations[ $index ] ); } @@ -2710,7 +2713,7 @@ public function get_svg_filters( $origins ) { $duotone_preset_css_var = $this->get_preset_css_var( array( 'color', 'duotone' ), $duotone_preset['slug'] ); // Only output the preset if it's used by a block. - if ( in_array( $duotone_preset_css_var, self::$duotone_presets, true ) ) { + if ( in_array( $duotone_preset_css_var, static::$duotone_presets, true ) ) { $filters .= wp_get_duotone_filter_svg( $duotone_preset ); } } From 1acc298378d2eecb425a6b9060b735e16a250a15 Mon Sep 17 00:00:00 2001 From: scruffian Date: Wed, 22 Feb 2023 17:52:32 +0000 Subject: [PATCH 08/11] use actions and filters to make the approach more generic --- lib/block-supports/duotone.php | 41 +++++++++++++++++++++++++++ lib/class-wp-theme-json-gutenberg.php | 20 ++++++------- 2 files changed, 49 insertions(+), 12 deletions(-) diff --git a/lib/block-supports/duotone.php b/lib/block-supports/duotone.php index b4a8397d72ece..2ab5f55d7c3a3 100644 --- a/lib/block-supports/duotone.php +++ b/lib/block-supports/duotone.php @@ -519,3 +519,44 @@ static function () use ( $filter_svg, $selector ) { // Remove WordPress core filter to avoid rendering duplicate support elements. remove_filter( 'render_block', 'wp_render_duotone_support', 10, 2 ); add_filter( 'render_block', 'gutenberg_render_duotone_support', 10, 2 ); + +class WP_Duotone { + /** + * An array of Duotone presets. + * + * @since 6.3.0 + * @var array + */ + static $duotone_presets; + + /** + * Registers the duotone preset. + * + * @param array $settings The block editor settings. + * + * @return array The block editor settings. + */ + public static function duotone_declarations( $declarations, $selector ) { + foreach ( $declarations as $index => $declaration ) { + if ( 'filter' === $declaration['name'] ) { + static::$duotone_presets[] = $declarations[ $index ]['value']; + } + } + } + + public static function get_filter_svg( $duotone_preset ) { + $filters = ''; + // Get the CSS variable for the preset. + $duotone_preset_css_var = WP_Theme_JSON_Gutenberg::get_preset_css_var( array( 'color', 'duotone' ), $duotone_preset['slug'] ); + + // Only output the preset if it's used by a block. + if ( in_array( $duotone_preset_css_var, WP_Duotone::$duotone_presets, true ) ) { + $filters .= wp_get_duotone_filter_svg( $duotone_preset ); + } + + return $filters; + } +} +add_action( 'theme_json_register_declarations', array( 'WP_Duotone', 'duotone_declarations' ), 10, 2 ); + +add_filter( 'theme_json_get_filter_svg', array( 'WP_Duotone', 'get_filter_svg' ), 10, 2 ); \ No newline at end of file diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 29c0c2abdff3e..8600f14ed0b1c 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -2426,6 +2426,9 @@ function( $pseudo_selector ) use ( $selector ) { $block_rules = ''; + // TODO + do_action( 'theme_json_register_declarations', $declarations, $selector ); + /* * 1. Separate the declarations that use the general selector * from the ones using the duotone selector. @@ -2433,9 +2436,8 @@ function( $pseudo_selector ) use ( $selector ) { $declarations_duotone = array(); foreach ( $declarations as $index => $declaration ) { if ( 'filter' === $declaration['name'] ) { - static::$duotone_presets[] = $declarations[ $index ]['value']; - $declarations_duotone[] = $declaration; unset( $declarations[ $index ] ); + $declarations_duotone[] = $declaration; } } @@ -2709,13 +2711,7 @@ public function get_svg_filters( $origins ) { continue; } foreach ( $duotone_presets[ $origin ] as $duotone_preset ) { - // Get the CSS variable for the preset. - $duotone_preset_css_var = $this->get_preset_css_var( array( 'color', 'duotone' ), $duotone_preset['slug'] ); - - // Only output the preset if it's used by a block. - if ( in_array( $duotone_preset_css_var, static::$duotone_presets, true ) ) { - $filters .= wp_get_duotone_filter_svg( $duotone_preset ); - } + $filters .= apply_filters( 'theme_json_get_filter_svg', $duotone_preset ); } } } @@ -2732,8 +2728,8 @@ public function get_svg_filters( $origins ) { * @param string $slug Slug of the preset. * @return string CSS variable. */ - function get_preset_css_var( $path, $slug ) { - $duotone_preset_metadata = $this->get_preset_metadata_from_path( $path ); + public static function get_preset_css_var( $path, $slug ) { + $duotone_preset_metadata = static::get_preset_metadata_from_path( $path ); return 'var(' . static::replace_slug_in_string( $duotone_preset_metadata['css_vars'], $slug ) . ')'; } @@ -2745,7 +2741,7 @@ function get_preset_css_var( $path, $slug ) { * @param array $path Path to the preset. * @return array Preset metadata. */ - function get_preset_metadata_from_path( $path ) { + static function get_preset_metadata_from_path( $path ) { $preset_metadata = array_filter( static::PRESETS_METADATA, function( $preset ) use ( &$path ) { From 3b06685d1dfd53c097a16b7fd1184f0b1afbdbaf Mon Sep 17 00:00:00 2001 From: scruffian Date: Wed, 22 Feb 2023 17:59:29 +0000 Subject: [PATCH 09/11] remove unused code --- lib/class-wp-theme-json-gutenberg.php | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 8600f14ed0b1c..7d6b1843bfdd7 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -567,14 +567,6 @@ public static function get_element_class_name( $element ) { */ const LATEST_SCHEMA = 2; - /** - * An array of Duotone presets. - * - * @since 6.3.0 - * @var array - */ - static $duotone_presets; - /** * Constructor. * @@ -2437,7 +2429,7 @@ function( $pseudo_selector ) use ( $selector ) { foreach ( $declarations as $index => $declaration ) { if ( 'filter' === $declaration['name'] ) { unset( $declarations[ $index ] ); - $declarations_duotone[] = $declaration; + $declarations_duotone[] = $declaration; } } From 762395260a3c2371fd14c50b877ab1c1b334432e Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Wed, 22 Feb 2023 14:21:18 -0600 Subject: [PATCH 10/11] Default static $duotone_preset to empty array The in_array check on WP_Duotone::$duotone_presets causes a fatal error if there are no filter declarations present in the theme json. --- lib/block-supports/duotone.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/block-supports/duotone.php b/lib/block-supports/duotone.php index 2ab5f55d7c3a3..037424f651661 100644 --- a/lib/block-supports/duotone.php +++ b/lib/block-supports/duotone.php @@ -527,7 +527,7 @@ class WP_Duotone { * @since 6.3.0 * @var array */ - static $duotone_presets; + static $duotone_presets = array(); /** * Registers the duotone preset. From 74ae720bbdb78a2bba07e92bf9dc52e27e48345f Mon Sep 17 00:00:00 2001 From: scruffian Date: Wed, 22 Feb 2023 22:57:19 +0000 Subject: [PATCH 11/11] move the place where we output the css for the preset --- lib/block-supports/duotone.php | 7 +++++-- lib/class-wp-theme-json-gutenberg.php | 5 ++--- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/lib/block-supports/duotone.php b/lib/block-supports/duotone.php index 037424f651661..71fba2ce24a67 100644 --- a/lib/block-supports/duotone.php +++ b/lib/block-supports/duotone.php @@ -548,9 +548,12 @@ public static function get_filter_svg( $duotone_preset ) { $filters = ''; // Get the CSS variable for the preset. $duotone_preset_css_var = WP_Theme_JSON_Gutenberg::get_preset_css_var( array( 'color', 'duotone' ), $duotone_preset['slug'] ); - + $duotone_preset_css_var_with_wrapper = 'var(' . $duotone_preset_css_var . ')'; // Only output the preset if it's used by a block. - if ( in_array( $duotone_preset_css_var, WP_Duotone::$duotone_presets, true ) ) { + if ( in_array( $duotone_preset_css_var_with_wrapper, WP_Duotone::$duotone_presets, true ) ) { + // Output the CSS for the preset. + // I think we should do this differently, but I'm not sure how. + $filters .= ''; $filters .= wp_get_duotone_filter_svg( $duotone_preset ); } diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 7d6b1843bfdd7..eb8ad262fdc15 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -152,7 +152,7 @@ class WP_Theme_JSON_Gutenberg { 'path' => array( 'color', 'duotone' ), 'prevent_override' => array( 'color', 'defaultDuotone' ), 'use_default_names' => false, - 'value_func' => 'gutenberg_get_duotone_filter_property', + 'value_func' => null, // Don't output CSS Custom Properties for duotone. 'css_vars' => '--wp--preset--duotone--$slug', 'classes' => array(), 'properties' => array( 'filter' ), @@ -1463,7 +1463,6 @@ protected function get_css_variables( $nodes, $origins ) { foreach ( $theme_vars_declarations as $theme_vars_declaration ) { $declarations[] = $theme_vars_declaration; } - $stylesheet .= static::to_ruleset( $selector, $declarations ); } @@ -2722,7 +2721,7 @@ public function get_svg_filters( $origins ) { */ public static function get_preset_css_var( $path, $slug ) { $duotone_preset_metadata = static::get_preset_metadata_from_path( $path ); - return 'var(' . static::replace_slug_in_string( $duotone_preset_metadata['css_vars'], $slug ) . ')'; + return static::replace_slug_in_string( $duotone_preset_metadata['css_vars'], $slug ); } /**