From 972d4a42e4297f38f0c3d8c5402dd98f9673fe95 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Wed, 5 Apr 2023 21:25:00 -0500 Subject: [PATCH 1/6] Refactor duotone to use the colord port --- lib/class-wp-duotone-gutenberg.php | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/class-wp-duotone-gutenberg.php b/lib/class-wp-duotone-gutenberg.php index 62532ac9a6d03..2a6f134380144 100644 --- a/lib/class-wp-duotone-gutenberg.php +++ b/lib/class-wp-duotone-gutenberg.php @@ -867,7 +867,6 @@ public static function migrate_experimental_duotone_support_flag( $settings, $me * @return string The SVG for the filter definition. */ public static function get_filter_svg_from_preset( $preset ) { - // TODO: This function will be refactored out in a follow-up PR where it will be deprecated. $filter_id = gutenberg_get_duotone_filter_id( $preset ); return self::get_filter_svg( $filter_id, $preset['colors'] ); } From 43d0ca733641a0dc4833dbc6e946352c22cfb61f Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Mon, 10 Apr 2023 16:43:09 -0500 Subject: [PATCH 2/6] Add deprecation TODO --- lib/class-wp-duotone-gutenberg.php | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/class-wp-duotone-gutenberg.php b/lib/class-wp-duotone-gutenberg.php index 2a6f134380144..62532ac9a6d03 100644 --- a/lib/class-wp-duotone-gutenberg.php +++ b/lib/class-wp-duotone-gutenberg.php @@ -867,6 +867,7 @@ public static function migrate_experimental_duotone_support_flag( $settings, $me * @return string The SVG for the filter definition. */ public static function get_filter_svg_from_preset( $preset ) { + // TODO: This function will be refactored out in a follow-up PR where it will be deprecated. $filter_id = gutenberg_get_duotone_filter_id( $preset ); return self::get_filter_svg( $filter_id, $preset['colors'] ); } From e25dec18efdd91204e40b8cc5352c7866ba26149 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Wed, 5 Apr 2023 21:40:12 -0500 Subject: [PATCH 3/6] Deprecate gutenberg_get_duotone_filter_id and gutenberg_get_duotone_filter_property --- lib/block-supports/duotone.php | 15 +++++----- lib/class-wp-duotone-gutenberg.php | 46 ++++++++++++++++++++++++++---- 2 files changed, 49 insertions(+), 12 deletions(-) diff --git a/lib/block-supports/duotone.php b/lib/block-supports/duotone.php index 28bb579efa8fb..dab5ab3cc5065 100644 --- a/lib/block-supports/duotone.php +++ b/lib/block-supports/duotone.php @@ -317,29 +317,30 @@ function gutenberg_tinycolor_string_to_rgb( $color_str ) { /** * Returns the prefixed id for the duotone filter for use as a CSS id. * + * @deprecated 6.3.0 + * * @param array $preset Duotone preset value as seen in theme.json. * @return string Duotone filter CSS id. */ function gutenberg_get_duotone_filter_id( $preset ) { + _deprecated_function( __FUNCTION__, '6.3.0' ); if ( ! isset( $preset['slug'] ) ) { return ''; } - - return 'wp-duotone-' . $preset['slug']; + return WP_Duotone_Gutenberg::get_filter_id( $preset['slug'] ); } /** * Returns the CSS filter property url to reference the rendered SVG. * + * @deprecated 6.3.0 + * * @param array $preset Duotone preset value as seen in theme.json. * @return string Duotone CSS filter property url value. */ function gutenberg_get_duotone_filter_property( $preset ) { - if ( isset( $preset['colors'] ) && is_string( $preset['colors'] ) ) { - return $preset['colors']; - } - $filter_id = gutenberg_get_duotone_filter_id( $preset ); - return "url('#" . $filter_id . "')"; + _deprecated_function( __FUNCTION__, '6.3.0' ); + return WP_Duotone_Gutenberg::get_filter_css_property_value_from_preset( $preset ); } /** diff --git a/lib/class-wp-duotone-gutenberg.php b/lib/class-wp-duotone-gutenberg.php index 62532ac9a6d03..577524b6701e0 100644 --- a/lib/class-wp-duotone-gutenberg.php +++ b/lib/class-wp-duotone-gutenberg.php @@ -99,6 +99,11 @@ class WP_Duotone_Gutenberg { */ const CSS_VAR_PREFIX = '--wp--preset--duotone--'; + /** + * Prefix used for generating and referencing duotone filter IDs. + */ + const FILTER_ID_PREFIX = 'wp-duotone-'; + /** * Direct port of colord's clamp function. Using min/max instead of * nested ternaries. @@ -501,6 +506,16 @@ private static function get_css_custom_property_name( $slug ) { return self::CSS_VAR_PREFIX . $slug; } + /** + * Get the ID of the duotone filter. + * + * @param string $slug The slug of the duotone preset. + * @return string The ID of the duotone filter. + */ + private static function get_filter_id( $slug ) { + return self::FILTER_ID_PREFIX . $slug; + } + /** * Gets the SVG for the duotone filter definition. * @@ -593,7 +608,7 @@ private static function get_css_var( $slug ) { * @return string The CSS declaration. */ private static function get_css_custom_property_declaration( $filter_data ) { - $declaration_value = gutenberg_get_duotone_filter_property( $filter_data ); + $declaration_value = self::get_filter_css_property_value_from_preset( $filter_data ); $duotone_preset_css_property_name = self::get_css_custom_property_name( $filter_data['slug'] ); return $duotone_preset_css_property_name . ': ' . $declaration_value . ';'; } @@ -775,7 +790,7 @@ public static function render_duotone_support( $block_content, $block ) { 'colors' => $duotone_attr, ); // Build a customized CSS filter property for unique slug. - $declaration_value = gutenberg_get_duotone_filter_property( $filter_data ); + $declaration_value = self::get_filter_css_property_value_from_preset( $filter_data ); self::$output[ $slug ] = $filter_data; } @@ -790,7 +805,7 @@ public static function render_duotone_support( $block_content, $block ) { // - 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 ) ); + $filter_id = self::get_filter_id_from_preset( array( 'slug' => $slug ) ); // Build the CSS selectors to which the filter will be applied. $selectors = explode( ',', $duotone_selector ); @@ -867,8 +882,29 @@ public static function migrate_experimental_duotone_support_flag( $settings, $me * @return string The SVG for the filter definition. */ public static function get_filter_svg_from_preset( $preset ) { - // TODO: This function will be refactored out in a follow-up PR where it will be deprecated. - $filter_id = gutenberg_get_duotone_filter_id( $preset ); + $filter_id = ''; + if ( isset( $preset['slug'] ) ) { + $filter_id = self::get_filter_id( $preset['slug'] ); + } return self::get_filter_svg( $filter_id, $preset['colors'] ); } + + /** + * Gets the CSS filter property value from a preset. + * + * @param array $preset The duotone preset. + * @return string The CSS filter property value. + */ + public static function get_filter_css_property_value_from_preset( $preset ) { + if ( isset( $preset['colors'] ) && is_string( $preset['colors'] ) ) { + return $preset['colors']; + } + + $filter_id = ''; + if ( isset( $preset['slug'] ) ) { + $filter_id = self::get_filter_id( $preset['slug'] ); + } + + return 'url(#' . $filter_id . ')'; + } } From 16a63c102d112dc9617c6825b32f2829e0fab063 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Wed, 5 Apr 2023 21:55:55 -0500 Subject: [PATCH 4/6] Refactor gutenberg_register_duotone_support into the class --- lib/block-supports/duotone.php | 24 +++++------------------- lib/class-wp-duotone-gutenberg.php | 26 ++++++++++++++++++++++++++ 2 files changed, 31 insertions(+), 19 deletions(-) diff --git a/lib/block-supports/duotone.php b/lib/block-supports/duotone.php index dab5ab3cc5065..2a579ce0ec325 100644 --- a/lib/block-supports/duotone.php +++ b/lib/block-supports/duotone.php @@ -359,27 +359,13 @@ function gutenberg_get_duotone_filter_svg( $preset ) { /** * Registers the style and colors block attributes for block types that support it. * + * @deprecated 6.3.0 Use WP_Duotone_Gutenberg::register_duotone_support() instead. + * * @param WP_Block_Type $block_type Block Type. */ function gutenberg_register_duotone_support( $block_type ) { - $has_duotone_support = false; - if ( property_exists( $block_type, 'supports' ) ) { - // Previous `color.__experimentalDuotone` support flag is migrated - // to `filter.duotone` via `block_type_metadata_settings` filter. - $has_duotone_support = _wp_array_get( $block_type->supports, array( 'filter', 'duotone' ), null ); - } - - if ( $has_duotone_support ) { - if ( ! $block_type->attributes ) { - $block_type->attributes = array(); - } - - if ( ! array_key_exists( 'style', $block_type->attributes ) ) { - $block_type->attributes['style'] = array( - 'type' => 'object', - ); - } - } + _deprecated_function( __FUNCTION__, '6.3.0', 'WP_Duotone_Gutenberg::register_duotone_support' ); + return WP_Duotone_Gutenberg::register_duotone_support( $block_type ); } /** @@ -399,7 +385,7 @@ function gutenberg_render_duotone_support( $block_content, $block ) { WP_Block_Supports::get_instance()->register( 'duotone', array( - 'register_attribute' => 'gutenberg_register_duotone_support', + 'register_attribute' => array( 'WP_Duotone_Gutenberg', 'register_duotone_support' ), ) ); diff --git a/lib/class-wp-duotone-gutenberg.php b/lib/class-wp-duotone-gutenberg.php index 577524b6701e0..d08776a65f74e 100644 --- a/lib/class-wp-duotone-gutenberg.php +++ b/lib/class-wp-duotone-gutenberg.php @@ -730,6 +730,32 @@ private static function get_selector( $block_name ) { } } + /** + * Registers the style and colors block attributes for block types that support it. + * + * @param WP_Block_Type $block_type Block Type. + */ + public static function register_duotone_support( $block_type ) { + $has_duotone_support = false; + if ( property_exists( $block_type, 'supports' ) ) { + // Previous `color.__experimentalDuotone` support flag is migrated + // to `filter.duotone` via `block_type_metadata_settings` filter. + $has_duotone_support = _wp_array_get( $block_type->supports, array( 'filter', 'duotone' ), null ); + } + + if ( $has_duotone_support ) { + if ( ! $block_type->attributes ) { + $block_type->attributes = array(); + } + + if ( ! array_key_exists( 'style', $block_type->attributes ) ) { + $block_type->attributes['style'] = array( + 'type' => 'object', + ); + } + } + } + /** * Render out the duotone CSS styles and SVG. * From d7f1d3116d29fc1082a82102ff68d05ac45da6ce Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Thu, 6 Apr 2023 11:07:06 -0500 Subject: [PATCH 5/6] Move deprecated functions to the bottom of the file --- lib/block-supports/duotone.php | 51 ++++++++++++++++++++++------------ 1 file changed, 33 insertions(+), 18 deletions(-) diff --git a/lib/block-supports/duotone.php b/lib/block-supports/duotone.php index 2a579ce0ec325..b15392f30f730 100644 --- a/lib/block-supports/duotone.php +++ b/lib/block-supports/duotone.php @@ -5,6 +5,39 @@ * @package gutenberg */ +// Register duotone block supports. +WP_Block_Supports::get_instance()->register( + 'duotone', + array( + 'register_attribute' => array( 'WP_Duotone_Gutenberg', 'register_duotone_support' ), + ) +); + +// Set up metadata prior to rendering any blocks. +add_action( 'wp_loaded', array( 'WP_Duotone_Gutenberg', 'set_global_styles_presets' ), 10 ); +add_action( 'wp_loaded', array( 'WP_Duotone_Gutenberg', 'set_global_style_block_names' ), 10 ); + +// Remove WordPress core filter to avoid rendering duplicate support elements. +remove_filter( 'render_block', 'wp_render_duotone_support', 10, 2 ); +add_filter( 'render_block', array( 'WP_Duotone_Gutenberg', 'render_duotone_support' ), 10, 2 ); + +// Enqueue styles. +// Global styles (global-styles-inline-css) after the other global styles (gutenberg_enqueue_global_styles). +add_action( 'wp_enqueue_scripts', array( 'WP_Duotone_Gutenberg', 'output_global_styles' ), 11 ); + +// Add SVG filters to the footer. Also, for classic themes, output block styles (core-block-supports-inline-css). +add_action( 'wp_footer', array( 'WP_Duotone_Gutenberg', 'output_footer_assets' ), 10 ); + +// Add styles and SVGs for use in the editor via the EditorStyles component. +add_filter( 'block_editor_settings_all', array( 'WP_Duotone_Gutenberg', 'add_editor_settings' ), 10 ); + +// Migrate the old experimental duotone support flag. +add_filter( 'block_type_metadata_settings', array( 'WP_Duotone_Gutenberg', 'migrate_experimental_duotone_support_flag' ), 10, 2 ); + +/* + * Deprecated functions below. All new functions should be added in class-wp-duotone-gutenberg.php. + */ + /** * Direct port of tinycolor's bound01 function, lightly simplified to maintain * consistency with tinycolor. @@ -380,21 +413,3 @@ function gutenberg_render_duotone_support( $block_content, $block ) { _deprecated_function( __FUNCTION__, '6.3.0', 'WP_Duotone_Gutenberg::render_duotone_support' ); return WP_Duotone_Gutenberg::render_duotone_support( $block_content, $block ); } - -// Register the block support. -WP_Block_Supports::get_instance()->register( - 'duotone', - array( - 'register_attribute' => array( 'WP_Duotone_Gutenberg', 'register_duotone_support' ), - ) -); - -add_action( 'wp_loaded', array( 'WP_Duotone_Gutenberg', 'set_global_styles_presets' ), 10 ); -add_action( 'wp_loaded', array( 'WP_Duotone_Gutenberg', 'set_global_style_block_names' ), 10 ); -// Remove WordPress core filter to avoid rendering duplicate support elements. -remove_filter( 'render_block', 'wp_render_duotone_support', 10, 2 ); -add_filter( 'render_block', array( 'WP_Duotone_Gutenberg', 'render_duotone_support' ), 10, 2 ); -add_action( 'wp_enqueue_scripts', array( 'WP_Duotone_Gutenberg', 'output_global_styles' ), 11 ); -add_action( 'wp_footer', array( 'WP_Duotone_Gutenberg', 'output_footer_assets' ), 10 ); -add_filter( 'block_editor_settings_all', array( 'WP_Duotone_Gutenberg', 'add_editor_settings' ), 10 ); -add_filter( 'block_type_metadata_settings', array( 'WP_Duotone_Gutenberg', 'migrate_experimental_duotone_support_flag' ), 10, 2 ); From 6adec60a2430117e24a51bd7d574b1771e964178 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Mon, 10 Apr 2023 17:48:35 -0500 Subject: [PATCH 6/6] Move gutenberg_render_duotone_support @deprecated annotation up --- lib/block-supports/duotone.php | 8 +++----- lib/class-wp-duotone-gutenberg.php | 24 ++++++++++++++++-------- 2 files changed, 19 insertions(+), 13 deletions(-) diff --git a/lib/block-supports/duotone.php b/lib/block-supports/duotone.php index b15392f30f730..a9b2679bbee70 100644 --- a/lib/block-supports/duotone.php +++ b/lib/block-supports/duotone.php @@ -357,10 +357,7 @@ function gutenberg_tinycolor_string_to_rgb( $color_str ) { */ function gutenberg_get_duotone_filter_id( $preset ) { _deprecated_function( __FUNCTION__, '6.3.0' ); - if ( ! isset( $preset['slug'] ) ) { - return ''; - } - return WP_Duotone_Gutenberg::get_filter_id( $preset['slug'] ); + return WP_Duotone_Gutenberg::get_filter_id_from_preset( $preset ); } /** @@ -404,9 +401,10 @@ function gutenberg_register_duotone_support( $block_type ) { /** * Render out the duotone stylesheet and SVG. * + * @deprecated 6.3.0 Use WP_Duotone_Gutenberg::render_duotone_support() instead. + * * @param string $block_content Rendered block content. * @param array $block Block object. - * @deprecated 6.3.0 Use WP_Duotone_Gutenberg::render_duotone_support() instead. * @return string Filtered block content. */ function gutenberg_render_duotone_support( $block_content, $block ) { diff --git a/lib/class-wp-duotone-gutenberg.php b/lib/class-wp-duotone-gutenberg.php index d08776a65f74e..5b7927a7afa21 100644 --- a/lib/class-wp-duotone-gutenberg.php +++ b/lib/class-wp-duotone-gutenberg.php @@ -902,16 +902,27 @@ public static function migrate_experimental_duotone_support_flag( $settings, $me } /** - * Gets the SVG for the duotone filter definition from a preset. + * Returns the prefixed id for the duotone filter for use as a CSS id. * - * @param array $preset The duotone preset. - * @return string The SVG for the filter definition. + * @param array $preset Duotone preset value as seen in theme.json. + * @return string Duotone filter CSS id. */ - public static function get_filter_svg_from_preset( $preset ) { + public static function get_filter_id_from_preset( $preset ) { $filter_id = ''; if ( isset( $preset['slug'] ) ) { $filter_id = self::get_filter_id( $preset['slug'] ); } + return $filter_id; + } + + /** + * Gets the SVG for the duotone filter definition from a preset. + * + * @param array $preset The duotone preset. + * @return string The SVG for the filter definition. + */ + public static function get_filter_svg_from_preset( $preset ) { + $filter_id = self::get_filter_id_from_preset( $preset ); return self::get_filter_svg( $filter_id, $preset['colors'] ); } @@ -926,10 +937,7 @@ public static function get_filter_css_property_value_from_preset( $preset ) { return $preset['colors']; } - $filter_id = ''; - if ( isset( $preset['slug'] ) ) { - $filter_id = self::get_filter_id( $preset['slug'] ); - } + $filter_id = self::get_filter_id_from_preset( $preset ); return 'url(#' . $filter_id . ')'; }