diff --git a/src/wp-includes/block-supports/duotone.php b/src/wp-includes/block-supports/duotone.php
index 0911636c43c19..95428c9c013c4 100644
--- a/src/wp-includes/block-supports/duotone.php
+++ b/src/wp-includes/block-supports/duotone.php
@@ -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;
-
- /*
- * 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.
- '',
- wp_json_encode( $selector )
- );
+ 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 ) {
+ /*
+ * Simply accessing el.offsetHeight flushes layout and style
+ * changes in WebKit without having to wait for setTimeout.
+ */
+ printf(
+ '',
+ wp_json_encode( $selector )
+ );
+ }
}
- }
- );
+ );
+ }
// Like the layout hook, this assumes the hook only applies to blocks with a single wrapper.
return preg_replace(