Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Deprecate remaining global duotone functions #49702

Merged
merged 6 commits into from
Apr 18, 2023
Merged

Deprecate remaining global duotone functions #49702

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
972d4a4
Refactor duotone to use the colord port
Apr 6, 2023
43d0ca7
Add deprecation TODO
Apr 10, 2023
e25dec1
Deprecate gutenberg_get_duotone_filter_id and gutenberg_get_duotone_f…
Apr 6, 2023
16a63c1
Refactor gutenberg_register_duotone_support into the class
Apr 6, 2023
d7f1d31
Move deprecated functions to the bottom of the file
Apr 6, 2023
6adec60
Move gutenberg_render_duotone_support @deprecated annotation up
Apr 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 47 additions & 47 deletions lib/block-supports/duotone.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,39 @@
* @package gutenberg
*/

// Register duotone block supports.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This block looks like it was just moved from below. Is there a reason for that?

Copy link
Contributor Author

@ajlende ajlende Apr 18, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's so you don't have to scroll through 400 lines of deprecated code to see the first line of code that actually does something.

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
Open in desktop
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 );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we have a deprecated call in here?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like we do that here https://github.com/WordPress/gutenberg/pull/49705/files#diff-c6cf688aa7b50316afa7fc57327b6ac81c1ac831226447c53ffc88c32fc23750R1009

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 . ')';
}
}