Changeset 54101

Timestamp:

09/08/2022 02:32:07 PM (2 years ago)

Author:

SergeyBiryukov

Message:

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

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

This commit backports the original PRs from Gutenberg repository:

• ​#39564: Add ability to unset duotone in themes with default duotone set
• ​#42020: Remove: Unrequired regex search on duotone supports

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

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

File:

• trunk/src/wp-includes/block-supports/duotone.php (modified) (6 diffs)

trunk/src/wp-includes/block-supports/duotone.php

@@ -374 +374 @@
  *
  * @since 5.9.0
+ * @since 6.1.0 Allow unset for preset colors.
  * @access private
  *
@@ -380 +381 @@
  */
 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 . "')";
@@ -459 +463 @@
         // Clean up the whitespace.
         $svg = preg_replace( "/[\r\n\t ]+/", ' ', $svg );
-        $svg = preg_replace( '/> </', '><', $svg );
+        $svg = str_replace( '> <', '><', $svg );
         $svg = trim( $svg );
     }
@@ -497 +501 @@
  *
  * @since 5.8.0
+ * @since 6.1.0 Allow unset for preset colors.
  * @access private
  *
@@ -520 +525 @@
     }
 
+    $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;
@@ -546 +552 @@
     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.
-                    '<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 )
-                );
+    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(
+                        '<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.