Skip to content

Commit

Permalink
Deprecate remaining global duotone functions (#49702)
Browse files Browse the repository at this point in the history 
* Refactor duotone to use the colord port

* Add deprecation TODO

* Deprecate gutenberg_get_duotone_filter_id and gutenberg_get_duotone_filter_property

* Refactor gutenberg_register_duotone_support into the class

* Move deprecated functions to the bottom of the file

* Move gutenberg_render_duotone_support @deprecated annotation up
  • Loading branch information
Alex Lende committed Apr 18, 2023
1 parent 8be5532 commit 361f257
Show file tree
Hide file tree
Showing 2 changed files with 122 additions and 52 deletions.
94 changes: 47 additions & 47 deletions lib/block-supports/duotone.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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 );
}

/**
Expand All @@ -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 );
80 changes: 75 additions & 5 deletions lib/class-wp-duotone-gutenberg.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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.
*
Expand Down Expand Up @@ -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 . ';';
}
Expand Down Expand Up @@ -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.
*
Expand Down Expand Up @@ -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;
}
Expand All @@ -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 );
Expand Down Expand Up @@ -860,15 +901,44 @@ 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.
*
* @param array $preset The duotone preset.
* @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 . ')';
}
}

0 comments on commit 361f257

Please sign in to comment.