Changeset 52049 for trunk/src/wp-includes/block-supports/duotone.php

Timestamp:

11/08/2021 07:18:39 PM (3 years ago)

Author:

jorgefilipecosta

Message:

Update theme.json classes for WordPress 5.9.

This commit ports to core the changes to the classes that deal with theme.json code.

See #54336.
Props oandregal, spacedmonkey, noisysocks, hellofromtonya, youknowriad.

File:

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

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

@@ -68 +68 @@
     // Convert into [0, 1] range if it isn't already.
     return ( $n % $max ) / (float) $max;
+}
+
+/**
+ * Direct port of tinycolor's boundAlpha function to maintain consistency with
+ * how tinycolor works.
+ *
+ * @see https://github.com/bgrins/TinyColor
+ *
+ * @since 5.9.0
+ * @access private
+ *
+ * @param  mixed $n   Number of unknown type.
+ * @return float      Value in the range [0,1].
+ */
+function _wp_tinycolor_bound_alpha( $n ) {
+    if ( is_numeric( $n ) ) {
+        $n = (float) $n;
+        if ( $n >= 0 && $n <= 1 ) {
+            return $n;
+        }
+    }
+    return 1;
 }
 
@@ -171 +193 @@
 /**
  * Parses hex, hsl, and rgb CSS strings using the same regex as TinyColor v1.4.2
- * used in the JavaScript. Only colors output from react-color are implemented
- * and the alpha value is ignored as it is not used in duotone.
+ * used in the JavaScript. Only colors output from react-color are implemented.
  *
  * Direct port of TinyColor's function, lightly simplified to maintain
@@ -181 +202 @@
  *
  * @since 5.8.0
+ * @since 5.9.0 Added alpha processing.
  * @access private
  *
@@ -200 +222 @@
     $rgb_regexp = '/^rgb' . $permissive_match3 . '$/';
     if ( preg_match( $rgb_regexp, $color_str, $match ) ) {
-        return wp_tinycolor_rgb_to_rgb(
+        $rgb = wp_tinycolor_rgb_to_rgb(
             array(
                 'r' => $match[1],
@@ -207 +229 @@
             )
         );
+
+        $rgb['a'] = 1;
+
+        return $rgb;
     }
 
     $rgba_regexp = '/^rgba' . $permissive_match4 . '$/';
     if ( preg_match( $rgba_regexp, $color_str, $match ) ) {
-        return wp_tinycolor_rgb_to_rgb(
+        $rgb = wp_tinycolor_rgb_to_rgb(
             array(
                 'r' => $match[1],
@@ -218 +244 @@
             )
         );
+
+        $rgb['a'] = _wp_tinycolor_bound_alpha( $match[4] );
+
+        return $rgb;
     }
 
     $hsl_regexp = '/^hsl' . $permissive_match3 . '$/';
     if ( preg_match( $hsl_regexp, $color_str, $match ) ) {
-        return wp_tinycolor_hsl_to_rgb(
+        $rgb = wp_tinycolor_hsl_to_rgb(
             array(
                 'h' => $match[1],
@@ -229 +259 @@
             )
         );
+
+        $rgb['a'] = 1;
+
+        return $rgb;
     }
 
@@ -240 +274 @@
             )
         );
+
+        $rgb['a'] = _wp_tinycolor_bound_alpha( $match[4] );
+
+        return $rgb;
     }
 
     $hex8_regexp = '/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/';
     if ( preg_match( $hex8_regexp, $color_str, $match ) ) {
-        return wp_tinycolor_rgb_to_rgb(
+        $rgb = wp_tinycolor_rgb_to_rgb(
             array(
                 'r' => base_convert( $match[1], 16, 10 ),
@@ -251 +289 @@
             )
         );
+
+        $rgb['a'] = _wp_tinycolor_bound_alpha(
+            base_convert( $match[4], 16, 10 ) / 255
+        );
+
+        return $rgb;
     }
 
     $hex6_regexp = '/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/';
     if ( preg_match( $hex6_regexp, $color_str, $match ) ) {
-        return wp_tinycolor_rgb_to_rgb(
+        $rgb = wp_tinycolor_rgb_to_rgb(
             array(
                 'r' => base_convert( $match[1], 16, 10 ),
@@ -262 +306 @@
             )
         );
+
+        $rgb['a'] = 1;
+
+        return $rgb;
     }
 
     $hex4_regexp = '/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/';
     if ( preg_match( $hex4_regexp, $color_str, $match ) ) {
-        return wp_tinycolor_rgb_to_rgb(
+        $rgb = wp_tinycolor_rgb_to_rgb(
             array(
                 'r' => base_convert( $match[1] . $match[1], 16, 10 ),
@@ -273 +321 @@
             )
         );
+
+        $rgb['a'] = _wp_tinycolor_bound_alpha(
+            base_convert( $match[4] . $match[4], 16, 10 ) / 255
+        );
+
+        return $rgb;
     }
 
     $hex3_regexp = '/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/';
     if ( preg_match( $hex3_regexp, $color_str, $match ) ) {
-        return wp_tinycolor_rgb_to_rgb(
+        $rgb = wp_tinycolor_rgb_to_rgb(
             array(
                 'r' => base_convert( $match[1] . $match[1], 16, 10 ),
@@ -283 +337 @@
                 'b' => base_convert( $match[3] . $match[3], 16, 10 ),
             )
+        );
+
+        $rgb['a'] = 1;
+
+        return $rgb;
+    }
+
+    /*
+     * The JS color picker considers the string "transparent" to be a hex value,
+     * so we need to handle it here as a special case.
+     */
+    if ( 'transparent' === $color_str ) {
+        return array(
+            'r' => 0,
+            'g' => 0,
+            'b' => 0,
+            'a' => 0,
         );
     }
@@ -313 +384 @@
         }
     }
+}
+/**
+ * Renders the duotone filter SVG and returns the CSS filter property to
+ * reference the rendered SVG.
+ *
+ * @since 5.9.0
+ *
+ * @param array $preset Duotone preset value as seen in theme.json.
+ * @return string Duotone CSS filter property.
+ */
+function wp_render_duotone_filter_preset( $preset ) {
+    $duotone_id     = $preset['slug'];
+    $duotone_colors = $preset['colors'];
+    $filter_id      = 'wp-duotone-' . $duotone_id;
+    $duotone_values = array(
+        'r' => array(),
+        'g' => array(),
+        'b' => array(),
+        'a' => array(),
+    );
+    foreach ( $duotone_colors as $color_str ) {
+        $color = wp_tinycolor_string_to_rgb( $color_str );
+
+        $duotone_values['r'][] = $color['r'] / 255;
+        $duotone_values['g'][] = $color['g'] / 255;
+        $duotone_values['b'][] = $color['b'] / 255;
+        $duotone_values['a'][] = $color['a'];
+    }
+
+    ob_start();
+
+    ?>
+
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 0 0"
+        width="0"
+        height="0"
+        focusable="false"
+        role="none"
+        style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;"
+    >
+        <defs>
+            <filter id="<?php echo esc_attr( $filter_id ); ?>">
+                <feColorMatrix
+                    color-interpolation-filters="sRGB"
+                    type="matrix"
+                    values="
+                        .299 .587 .114 0 0
+                        .299 .587 .114 0 0
+                        .299 .587 .114 0 0
+                        .299 .587 .114 0 0
+                    "
+                />
+                <feComponentTransfer color-interpolation-filters="sRGB" >
+                    <feFuncR type="table" tableValues="<?php echo esc_attr( implode( ' ', $duotone_values['r'] ) ); ?>" />
+                    <feFuncG type="table" tableValues="<?php echo esc_attr( implode( ' ', $duotone_values['g'] ) ); ?>" />
+                    <feFuncB type="table" tableValues="<?php echo esc_attr( implode( ' ', $duotone_values['b'] ) ); ?>" />
+                    <feFuncA type="table" tableValues="<?php echo esc_attr( implode( ' ', $duotone_values['a'] ) ); ?>" />
+                </feComponentTransfer>
+                <feComposite in2="SourceGraphic" operator="in" />
+            </filter>
+        </defs>
+    </svg>
+
+    <?php
+
+    $svg = ob_get_clean();
+
+    if ( ! defined( 'SCRIPT_DEBUG' ) || ! SCRIPT_DEBUG ) {
+        // Clean up the whitespace.
+        $svg = preg_replace( "/[\r\n\t ]+/", ' ', $svg );
+        $svg = preg_replace( '/> </', '><', $svg );
+        $svg = trim( $svg );
+    }
+
+    add_action(
+        /*
+         * Safari doesn't render SVG filters defined in data URIs,
+         * and SVG filters won't render in the head of a document,
+         * so the next best place to put the SVG is in the footer.
+         */
+        is_admin() ? 'admin_footer' : 'wp_footer',
+        static function () use ( $svg ) {
+            echo $svg;
+        }
+    );
+
+    return "url('#" . $filter_id . "')";
 }