diff --git a/lib/block-supports/duotone.php b/lib/block-supports/duotone.php index 28bb579efa8fb..a9b2679bbee70 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. @@ -317,29 +350,27 @@ 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 ) { - if ( ! isset( $preset['slug'] ) ) { - return ''; - } - - return 'wp-duotone-' . $preset['slug']; + _deprecated_function( __FUNCTION__, '6.3.0' ); + return WP_Duotone_Gutenberg::get_filter_id_from_preset( $preset ); } /** * 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 ); } /** @@ -358,56 +389,25 @@ 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 ); } /** * 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 ) { _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' => '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 ); diff --git a/lib/class-wp-duotone-gutenberg.php b/lib/class-wp-duotone-gutenberg.php index 62532ac9a6d03..5b7927a7afa21 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 . ';'; } @@ -715,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. * @@ -775,7 +816,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 +831,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 ); @@ -860,6 +901,20 @@ public static function migrate_experimental_duotone_support_flag( $settings, $me return $settings; } + /** + * Returns the prefixed id for the duotone filter for use as a CSS id. + * + * @param array $preset Duotone preset value as seen in theme.json. + * @return string Duotone filter CSS id. + */ + 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. * @@ -867,8 +922,23 @@ 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 = self::get_filter_id_from_preset( $preset ); 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 = self::get_filter_id_from_preset( $preset ); + + return 'url(#' . $filter_id . ')'; + } }