vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-06-28 14:20:15 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Editor: Update duotone block supports to allow unset for preset colors.

Browse Source 
This add the ability to unset duotone in themes with default duotone set.

This commit backports the original PRs from Gutenberg repository:
* [https://github.com/WordPress/gutenberg/pull/39564 #39564: Add ability to unset duotone in themes with default duotone set]
* [https://github.com/WordPress/gutenberg/pull/42020 #42020: Remove: Unrequired regex search on duotone supports]

Follow-up to [50929], [52757].

Props ajlende, jorgefilipecosta, Joen, cbravobernal.
See #56467.

git-svn-id: https://develop.svn.wordpress.org/trunk@54101 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Sergey Biryukov
2022-09-08 14:32:07 +00:00
parent cb6f447d52
commit e9206b07e8
1 changed files with 34 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/wp-includes/block-supports/duotone.php
View File

@@ -373,12 +373,16 @@ function wp_get_duotone_filter_id( $preset ) {
* Returns the CSS filter property url to reference the rendered SVG.
*
* @since 5.9.0
* @since 6.1.0 Allow unset for preset colors.
* @access private
*
* @param array $preset Duotone preset value as seen in theme.json.
* @return string Duotone CSS filter property url value.
*/
function wp_get_duotone_filter_property( $preset ) {
if ( isset( $preset['colors'] ) && 'unset' === $preset['colors'] ) {
return 'none';
}
$filter_id = wp_get_duotone_filter_id( $preset );
return "url('#" . $filter_id . "')";
}
@@ -458,7 +462,7 @@ function wp_get_duotone_filter_svg( $preset ) {
if ( ! defined( 'SCRIPT_DEBUG' ) || ! SCRIPT_DEBUG ) {
// Clean up the whitespace.
$svg = preg_replace( "/[\r\n\t ]+/", ' ', $svg );
$svg = preg_replace( '/> </', '><', $svg );
$svg = str_replace( '> <', '><', $svg );
$svg = trim( $svg );
}
@@ -496,6 +500,7 @@ function wp_register_duotone_support( $block_type ) {
* Render out the duotone stylesheet and SVG.
*
* @since 5.8.0
* @since 6.1.0 Allow unset for preset colors.
* @access private
*
* @param string $block_content Rendered block content.
@@ -519,13 +524,14 @@ function wp_render_duotone_support( $block_content, $block ) {
return $block_content;
}
$colors = $block['attrs']['style']['color']['duotone'];
$filter_key = is_array( $colors ) ? implode( '-', $colors ) : $colors;
$filter_preset = array(
'slug' => wp_unique_id( sanitize_key( implode( '-', $block['attrs']['style']['color']['duotone'] ) . '-' ) ),
'colors' => $block['attrs']['style']['color']['duotone'],
'slug' => wp_unique_id( sanitize_key( $filter_key . '-' ) ),
'colors' => $colors,
);
$filter_property = wp_get_duotone_filter_property( $filter_preset );
$filter_id = wp_get_duotone_filter_id( $filter_preset );
$filter_svg = wp_get_duotone_filter_svg( $filter_preset );
$scope = '.' . $filter_id;
$selectors = explode( ',', $duotone_support );
@@ -545,27 +551,32 @@ function wp_render_duotone_support( $block_content, $block ) {
wp_add_inline_style( $filter_id, $filter_style );
wp_enqueue_style( $filter_id );
add_action(
'wp_footer',
static function () use ( $filter_svg, $selector ) {
echo $filter_svg;
if ( 'unset' !== $colors ) {
$filter_svg = wp_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 ) {
printf(
// Simply accessing el.offsetHeight flushes layout and style
// changes in WebKit without having to wait for setTimeout.
'<script>( function() { var el = document.querySelector( %s ); var display = el.style.display; el.style.display = "none"; el.offsetHeight; el.style.display = display; } )();</script>',
wp_json_encode( $selector )
);
/*
* 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(
'<script>( function() { var el = document.querySelector( %s ); var display = el.style.display; el.style.display = "none"; el.offsetHeight; el.style.display = display; } )();</script>',
wp_json_encode( $selector )
);
}
}
}
);
);
}
// Like the layout hook, this assumes the hook only applies to blocks with a single wrapper.
return preg_replace(