Changeset 56101

Timestamp:

06/29/2023 06:19:41 AM (3 years ago)

Author:

isabel_brison

Message:

Editor: update duotone support.

Updates duotone support after stabilisation of selectors API and adds a few small code quality and UI improvements.

Props onemaggie, peterwilsoncc, ajlende, audrasjb, mikeschroder, ramonopoly.
Fixes #58555.

Location:

trunk

Files:

• src/wp-includes/block-supports/duotone.php (modified) (1 diff)
• src/wp-includes/class-wp-duotone.php (added)
• src/wp-includes/class-wp-theme-json.php (modified) (2 diffs)
• src/wp-includes/default-filters.php (modified) (1 diff)
• src/wp-includes/deprecated.php (modified) (1 diff)
• src/wp-includes/global-styles-and-settings.php (modified) (1 diff)
• src/wp-includes/script-loader.php (modified) (1 diff)
• src/wp-settings.php (modified) (1 diff)
• tests/phpunit/tests/block-supports/duotone.php (added)
• tests/phpunit/tests/theme/wpGetGlobalStylesSvgFilters.php (modified) (1 diff)
• tests/phpunit/tests/theme/wpThemeJson.php (modified) (1 diff)

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

@@ -33 +33 @@
  */
 
-/**
- * Takes input from [0, n] and returns it as [0, 1].
- *
- * Direct port of TinyColor's function, lightly simplified to maintain
- * consistency with TinyColor.
- *
- * @see https://github.com/bgrins/TinyColor
- *
- * @since 5.8.0
- * @access private
- *
- * @param mixed $n   Number of unknown type.
- * @param int   $max Upper value of the range to bound to.
- * @return float Value in the range [0, 1].
- */
-function wp_tinycolor_bound01( $n, $max ) {
-        if ( 'string' === gettype( $n ) && str_contains( $n, '.' ) && 1 === (float) $n ) {
-                $n = '100%';
-        }
-
-        $n = min( $max, max( 0, (float) $n ) );
-
-        // Automatically convert percentage into number.
-        if ( 'string' === gettype( $n ) && str_contains( $n, '%' ) ) {
-                $n = (int) ( $n * $max ) / 100;
-        }
-
-        // Handle floating point rounding errors.
-        if ( ( abs( $n - $max ) < 0.000001 ) ) {
-                return 1.0;
-        }
-
-        // 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;
-}
-
-/**
- * Rounds and converts values of an RGB object.
- *
- * Direct port of TinyColor's function, lightly simplified to maintain
- * consistency with TinyColor.
- *
- * @see https://github.com/bgrins/TinyColor
- *
- * @since 5.8.0
- * @access private
- *
- * @param array $rgb_color RGB object.
- * @return array Rounded and converted RGB object.
- */
-function wp_tinycolor_rgb_to_rgb( $rgb_color ) {
-        return array(
-                'r' => wp_tinycolor_bound01( $rgb_color['r'], 255 ) * 255,
-                'g' => wp_tinycolor_bound01( $rgb_color['g'], 255 ) * 255,
-                'b' => wp_tinycolor_bound01( $rgb_color['b'], 255 ) * 255,
-        );
-}
-
-/**
- * Helper function for hsl to rgb conversion.
- *
- * Direct port of TinyColor's function, lightly simplified to maintain
- * consistency with TinyColor.
- *
- * @see https://github.com/bgrins/TinyColor
- *
- * @since 5.8.0
- * @access private
- *
- * @param float $p first component.
- * @param float $q second component.
- * @param float $t third component.
- * @return float R, G, or B component.
- */
-function wp_tinycolor_hue_to_rgb( $p, $q, $t ) {
-        if ( $t < 0 ) {
-                ++$t;
-        }
-        if ( $t > 1 ) {
-                --$t;
-        }
-        if ( $t < 1 / 6 ) {
-                return $p + ( $q - $p ) * 6 * $t;
-        }
-        if ( $t < 1 / 2 ) {
-                return $q;
-        }
-        if ( $t < 2 / 3 ) {
-                return $p + ( $q - $p ) * ( 2 / 3 - $t ) * 6;
-        }
-        return $p;
-}
-
-/**
- * Converts an HSL object to an RGB object with converted and rounded values.
- *
- * Direct port of TinyColor's function, lightly simplified to maintain
- * consistency with TinyColor.
- *
- * @see https://github.com/bgrins/TinyColor
- *
- * @since 5.8.0
- * @access private
- *
- * @param array $hsl_color HSL object.
- * @return array Rounded and converted RGB object.
- */
-function wp_tinycolor_hsl_to_rgb( $hsl_color ) {
-        $h = wp_tinycolor_bound01( $hsl_color['h'], 360 );
-        $s = wp_tinycolor_bound01( $hsl_color['s'], 100 );
-        $l = wp_tinycolor_bound01( $hsl_color['l'], 100 );
-
-        if ( 0 === $s ) {
-                // Achromatic.
-                $r = $l;
-                $g = $l;
-                $b = $l;
-        } else {
-                $q = $l < 0.5 ? $l * ( 1 + $s ) : $l + $s - $l * $s;
-                $p = 2 * $l - $q;
-                $r = wp_tinycolor_hue_to_rgb( $p, $q, $h + 1 / 3 );
-                $g = wp_tinycolor_hue_to_rgb( $p, $q, $h );
-                $b = wp_tinycolor_hue_to_rgb( $p, $q, $h - 1 / 3 );
-        }
-
-        return array(
-                'r' => $r * 255,
-                'g' => $g * 255,
-                'b' => $b * 255,
-        );
-}
-
-/**
- * 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.
- *
- * Direct port of TinyColor's function, lightly simplified to maintain
- * consistency with TinyColor.
- *
- * @see https://github.com/bgrins/TinyColor
- * @see https://github.com/casesandberg/react-color/
- *
- * @since 5.8.0
- * @since 5.9.0 Added alpha processing.
- * @access private
- *
- * @param string $color_str CSS color string.
- * @return array RGB object.
- */
-function wp_tinycolor_string_to_rgb( $color_str ) {
-        $color_str = strtolower( trim( $color_str ) );
-
-        $css_integer = '[-\\+]?\\d+%?';
-        $css_number  = '[-\\+]?\\d*\\.\\d+%?';
-
-        $css_unit = '(?:' . $css_number . ')|(?:' . $css_integer . ')';
-
-        $permissive_match3 = '[\\s|\\(]+(' . $css_unit . ')[,|\\s]+(' . $css_unit . ')[,|\\s]+(' . $css_unit . ')\\s*\\)?';
-        $permissive_match4 = '[\\s|\\(]+(' . $css_unit . ')[,|\\s]+(' . $css_unit . ')[,|\\s]+(' . $css_unit . ')[,|\\s]+(' . $css_unit . ')\\s*\\)?';
-
-        $rgb_regexp = '/^rgb' . $permissive_match3 . '$/';
-        if ( preg_match( $rgb_regexp, $color_str, $match ) ) {
-                $rgb = wp_tinycolor_rgb_to_rgb(
-                        array(
-                                'r' => $match[1],
-                                'g' => $match[2],
-                                'b' => $match[3],
-                        )
-                );
-
-                $rgb['a'] = 1;
-
-                return $rgb;
-        }
-
-        $rgba_regexp = '/^rgba' . $permissive_match4 . '$/';
-        if ( preg_match( $rgba_regexp, $color_str, $match ) ) {
-                $rgb = wp_tinycolor_rgb_to_rgb(
-                        array(
-                                'r' => $match[1],
-                                'g' => $match[2],
-                                'b' => $match[3],
-                        )
-                );
-
-                $rgb['a'] = _wp_tinycolor_bound_alpha( $match[4] );
-
-                return $rgb;
-        }
-
-        $hsl_regexp = '/^hsl' . $permissive_match3 . '$/';
-        if ( preg_match( $hsl_regexp, $color_str, $match ) ) {
-                $rgb = wp_tinycolor_hsl_to_rgb(
-                        array(
-                                'h' => $match[1],
-                                's' => $match[2],
-                                'l' => $match[3],
-                        )
-                );
-
-                $rgb['a'] = 1;
-
-                return $rgb;
-        }
-
-        $hsla_regexp = '/^hsla' . $permissive_match4 . '$/';
-        if ( preg_match( $hsla_regexp, $color_str, $match ) ) {
-                $rgb = wp_tinycolor_hsl_to_rgb(
-                        array(
-                                'h' => $match[1],
-                                's' => $match[2],
-                                'l' => $match[3],
-                        )
-                );
-
-                $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 ) ) {
-                $rgb = wp_tinycolor_rgb_to_rgb(
-                        array(
-                                'r' => base_convert( $match[1], 16, 10 ),
-                                'g' => base_convert( $match[2], 16, 10 ),
-                                'b' => base_convert( $match[3], 16, 10 ),
-                        )
-                );
-
-                $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 ) ) {
-                $rgb = wp_tinycolor_rgb_to_rgb(
-                        array(
-                                'r' => base_convert( $match[1], 16, 10 ),
-                                'g' => base_convert( $match[2], 16, 10 ),
-                                'b' => base_convert( $match[3], 16, 10 ),
-                        )
-                );
-
-                $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 ) ) {
-                $rgb = wp_tinycolor_rgb_to_rgb(
-                        array(
-                                'r' => base_convert( $match[1] . $match[1], 16, 10 ),
-                                'g' => base_convert( $match[2] . $match[2], 16, 10 ),
-                                'b' => base_convert( $match[3] . $match[3], 16, 10 ),
-                        )
-                );
-
-                $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 ) ) {
-                $rgb = wp_tinycolor_rgb_to_rgb(
-                        array(
-                                'r' => base_convert( $match[1] . $match[1], 16, 10 ),
-                                'g' => base_convert( $match[2] . $match[2], 16, 10 ),
-                                '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,
-                );
-        }
-}
-
-/**
- * Returns the prefixed id for the duotone filter for use as a CSS id.
- *
- * @since 5.9.1
- * @access private
- *
- * @param array $preset Duotone preset value as seen in theme.json.
- * @return string Duotone filter CSS id.
- */
-function wp_get_duotone_filter_id( $preset ) {
-        if ( ! isset( $preset['slug'] ) ) {
-                return '';
-        }
-
-        return 'wp-duotone-' . $preset['slug'];
-}
-
-/**
- * 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 . "')";
-}
-
-/**
- * Returns the duotone filter SVG string for the preset.
- *
- * @since 5.9.1
- * @access private
- *
- * @param array $preset Duotone preset value as seen in theme.json.
- * @return string Duotone SVG filter.
- */
-function wp_get_duotone_filter_svg( $preset ) {
-        $filter_id = wp_get_duotone_filter_id( $preset );
-
-        $duotone_values = array(
-                'r' => array(),
-                'g' => array(),
-                'b' => array(),
-                'a' => array(),
-        );
-
-        if ( ! isset( $preset['colors'] ) || ! is_array( $preset['colors'] ) ) {
-                $preset['colors'] = array();
-        }
-
-        foreach ( $preset['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 ( ! SCRIPT_DEBUG ) {
-                // Clean up the whitespace.
-                $svg = preg_replace( "/[\r\n\t ]+/", ' ', $svg );
-                $svg = str_replace( '> <', '><', $svg );
-                $svg = trim( $svg );
-        }
-
-        return $svg;
-}
-
-/**
- * Registers the style and colors block attributes for block types that support it.
- *
- * @since 5.8.0
- * @access private
- *
- * @param WP_Block_Type $block_type Block Type.
- */
-function wp_register_duotone_support( $block_type ) {
-        $has_duotone_support = false;
-        if ( property_exists( $block_type, 'supports' ) ) {
-                $has_duotone_support = _wp_array_get( $block_type->supports, array( 'color', '__experimentalDuotone' ), false );
-        }
-
-        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',
-                        );
-                }
-        }
-}
-
-/**
- * Renders 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.
- * @param array  $block         Block object.
- * @return string Filtered block content.
- */
-function wp_render_duotone_support( $block_content, $block ) {
-        $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
-
-        $duotone_support = false;
-        if ( $block_type && property_exists( $block_type, 'supports' ) ) {
-                $duotone_support = _wp_array_get( $block_type->supports, array( 'color', '__experimentalDuotone' ), false );
-        }
-
-        $has_duotone_attribute = isset( $block['attrs']['style']['color']['duotone'] );
-
-        if (
-                ! $duotone_support ||
-                ! $has_duotone_attribute
-        ) {
-                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( $filter_key . '-' ) ),
-                'colors' => $colors,
-        );
-        $filter_property = wp_get_duotone_filter_property( $filter_preset );
-        $filter_id       = wp_get_duotone_filter_id( $filter_preset );
-
-        $scope     = '.' . $filter_id;
-        $selectors = explode( ',', $duotone_support );
-        $scoped    = array();
-        foreach ( $selectors as $sel ) {
-                $scoped[] = $scope . ' ' . trim( $sel );
-        }
-        $selector = implode( ', ', $scoped );
-
-        // !important is needed because these styles render before global styles,
-        // and they should be overriding the duotone filters set by global styles.
-        $filter_style = SCRIPT_DEBUG
-                ? $selector . " {\n\tfilter: " . $filter_property . " !important;\n}\n"
-                : $selector . '{filter:' . $filter_property . ' !important;}';
-
-        wp_register_style( $filter_id, false );
-        wp_add_inline_style( $filter_id, $filter_style );
-        wp_enqueue_style( $filter_id );
-
-        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.
-        return preg_replace(
-                '/' . preg_quote( 'class="', '/' ) . '/',
-                'class="' . $filter_id . ' ',
-                $block_content,
-                1
-        );
-}
-
 // Register the block support.
 WP_Block_Supports::get_instance()->register(
         'duotone',
         array(
-                'register_attribute' => 'wp_register_duotone_support',
+                'register_attribute' => array( 'WP_Duotone', 'register_duotone_support' ),
         )
 );
-add_filter( 'render_block', 'wp_render_duotone_support', 10, 2 );
+
+// Set up metadata prior to rendering any blocks.
+add_action( 'wp_loaded', array( 'WP_Duotone', 'set_global_styles_presets' ), 10 );
+add_action( 'wp_loaded', array( 'WP_Duotone', 'set_global_style_block_names' ), 10 );
+
+// Add classnames to blocks using duotone support.
+add_filter( 'render_block', array( 'WP_Duotone', 'render_duotone_support' ), 10, 2 );
+
+// Enqueue styles.
+// Block styles (core-block-supports-inline-css) before the style engine (wp_enqueue_stored_styles).
+// Global styles (global-styles-inline-css) after the other global styles (wp_enqueue_global_styles).
+add_action( 'wp_enqueue_scripts', array( 'WP_Duotone', 'output_block_styles' ), 9 );
+add_action( 'wp_enqueue_scripts', array( 'WP_Duotone', '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', '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', 'add_editor_settings' ), 10 );
+
+// Migrate the old experimental duotone support flag.
+add_filter( 'block_type_metadata_settings', array( 'WP_Duotone', 'migrate_experimental_duotone_support_flag' ), 10, 2 );

trunk/src/wp-includes/class-wp-theme-json.php

@@ -115 +115 @@
          *              `prevent_override` value for `color.duotone` to use `color.defaultDuotone`.
          * @since 6.2.0 Added 'shadow' presets.
+         * @since 6.3.0 Replaced value_func for duotone with `null`. Custom properties are handled by class-wp-duotone.php.
          * @var array
          */
@@ -144 +145 @@
                         'prevent_override'  => array( 'color', 'defaultDuotone' ),
                         'use_default_names' => false,
-                        'value_func'        => 'wp_get_duotone_filter_property',
-                        'css_vars'          => '--wp--preset--duotone--$slug',
+                        'value_func'        => null, // CSS Custom Properties for duotone are handled by block supports in class-wp-duotone.php.
+                        'css_vars'          => null,
                         'classes'           => array(),
                         'properties'        => array( 'filter' ),

trunk/src/wp-includes/default-filters.php

@@ -607 +607 @@
 add_action( 'wp_footer', 'wp_enqueue_stored_styles', 1 );
 
-// SVG filters like duotone have to be loaded at the beginning of the body in both admin and the front-end.
-add_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' );
-add_action( 'in_admin_header', 'wp_global_styles_render_svg_filters' );
-
 add_action( 'wp_default_styles', 'wp_default_styles' );
 add_filter( 'style_loader_src', 'wp_style_loader_src', 10, 2 );

trunk/src/wp-includes/deprecated.php

@@ -4805 +4805 @@
         return $image;
 }
+
+/**
+ * Takes input from [0, n] and returns it as [0, 1].
+ *
+ * Direct port of TinyColor's function, lightly simplified to maintain
+ * consistency with TinyColor.
+ *
+ * @link https://github.com/bgrins/TinyColor
+ *
+ * @since 5.8.0
+ * @deprecated 6.3.0
+ *
+ * @access private
+ *
+ * @param mixed $n   Number of unknown type.
+ * @param int   $max Upper value of the range to bound to.
+ * @return float Value in the range [0, 1].
+ */
+function wp_tinycolor_bound01( $n, $max ) {
+        _deprecated_function( __FUNCTION__, '6.3.0' );
+        if ( 'string' === gettype( $n ) && str_contains( $n, '.' ) && 1 === (float) $n ) {
+                $n = '100%';
+        }
+
+        $n = min( $max, max( 0, (float) $n ) );
+
+        // Automatically convert percentage into number.
+        if ( 'string' === gettype( $n ) && str_contains( $n, '%' ) ) {
+                $n = (int) ( $n * $max ) / 100;
+        }
+
+        // Handle floating point rounding errors.
+        if ( ( abs( $n - $max ) < 0.000001 ) ) {
+                return 1.0;
+        }
+
+        // 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.
+ *
+ * @link https://github.com/bgrins/TinyColor
+ *
+ * @since 5.9.0
+ * @deprecated 6.3.0
+ *
+ * @access private
+ *
+ * @param mixed $n Number of unknown type.
+ * @return float Value in the range [0,1].
+ */
+function _wp_tinycolor_bound_alpha( $n ) {
+        _deprecated_function( __FUNCTION__, '6.3.0' );
+
+        if ( is_numeric( $n ) ) {
+                $n = (float) $n;
+                if ( $n >= 0 && $n <= 1 ) {
+                        return $n;
+                }
+        }
+        return 1;
+}
+
+/**
+ * Rounds and converts values of an RGB object.
+ *
+ * Direct port of TinyColor's function, lightly simplified to maintain
+ * consistency with TinyColor.
+ *
+ * @link https://github.com/bgrins/TinyColor
+ *
+ * @since 5.8.0
+ * @deprecated 6.3.0
+ *
+ * @access private
+ *
+ * @param array $rgb_color RGB object.
+ * @return array Rounded and converted RGB object.
+ */
+function wp_tinycolor_rgb_to_rgb( $rgb_color ) {
+        _deprecated_function( __FUNCTION__, '6.3.0' );
+
+        return array(
+                'r' => wp_tinycolor_bound01( $rgb_color['r'], 255 ) * 255,
+                'g' => wp_tinycolor_bound01( $rgb_color['g'], 255 ) * 255,
+                'b' => wp_tinycolor_bound01( $rgb_color['b'], 255 ) * 255,
+        );
+}
+
+/**
+ * Helper function for hsl to rgb conversion.
+ *
+ * Direct port of TinyColor's function, lightly simplified to maintain
+ * consistency with TinyColor.
+ *
+ * @link https://github.com/bgrins/TinyColor
+ *
+ * @since 5.8.0
+ * @deprecated 6.3.0
+ *
+ * @access private
+ *
+ * @param float $p first component.
+ * @param float $q second component.
+ * @param float $t third component.
+ * @return float R, G, or B component.
+ */
+function wp_tinycolor_hue_to_rgb( $p, $q, $t ) {
+        _deprecated_function( __FUNCTION__, '6.3.0' );
+
+        if ( $t < 0 ) {
+                ++$t;
+        }
+        if ( $t > 1 ) {
+                --$t;
+        }
+        if ( $t < 1 / 6 ) {
+                return $p + ( $q - $p ) * 6 * $t;
+        }
+        if ( $t < 1 / 2 ) {
+                return $q;
+        }
+        if ( $t < 2 / 3 ) {
+                return $p + ( $q - $p ) * ( 2 / 3 - $t ) * 6;
+        }
+        return $p;
+}
+
+/**
+ * Converts an HSL object to an RGB object with converted and rounded values.
+ *
+ * Direct port of TinyColor's function, lightly simplified to maintain
+ * consistency with TinyColor.
+ *
+ * @link https://github.com/bgrins/TinyColor
+ *
+ * @since 5.8.0
+ * @deprecated 6.3.0
+ *
+ * @access private
+ *
+ * @param array $hsl_color HSL object.
+ * @return array Rounded and converted RGB object.
+ */
+function wp_tinycolor_hsl_to_rgb( $hsl_color ) {
+        _deprecated_function( __FUNCTION__, '6.3.0' );
+
+        $h = wp_tinycolor_bound01( $hsl_color['h'], 360 );
+        $s = wp_tinycolor_bound01( $hsl_color['s'], 100 );
+        $l = wp_tinycolor_bound01( $hsl_color['l'], 100 );
+
+        if ( 0 === $s ) {
+                // Achromatic.
+                $r = $l;
+                $g = $l;
+                $b = $l;
+        } else {
+                $q = $l < 0.5 ? $l * ( 1 + $s ) : $l + $s - $l * $s;
+                $p = 2 * $l - $q;
+                $r = wp_tinycolor_hue_to_rgb( $p, $q, $h + 1 / 3 );
+                $g = wp_tinycolor_hue_to_rgb( $p, $q, $h );
+                $b = wp_tinycolor_hue_to_rgb( $p, $q, $h - 1 / 3 );
+        }
+
+        return array(
+                'r' => $r * 255,
+                'g' => $g * 255,
+                'b' => $b * 255,
+        );
+}
+
+/**
+ * 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.
+ *
+ * Direct port of TinyColor's function, lightly simplified to maintain
+ * consistency with TinyColor.
+ *
+ * @link https://github.com/bgrins/TinyColor
+ * @link https://github.com/casesandberg/react-color/
+ *
+ * @since 5.8.0
+ * @since 5.9.0 Added alpha processing.
+ * @deprecated 6.3.0
+ *
+ * @access private
+ *
+ * @param string $color_str CSS color string.
+ * @return array RGB object.
+ */
+function wp_tinycolor_string_to_rgb( $color_str ) {
+        _deprecated_function( __FUNCTION__, '6.3.0' );
+
+        $color_str = strtolower( trim( $color_str ) );
+
+        $css_integer = '[-\\+]?\\d+%?';
+        $css_number  = '[-\\+]?\\d*\\.\\d+%?';
+
+        $css_unit = '(?:' . $css_number . ')|(?:' . $css_integer . ')';
+
+        $permissive_match3 = '[\\s|\\(]+(' . $css_unit . ')[,|\\s]+(' . $css_unit . ')[,|\\s]+(' . $css_unit . ')\\s*\\)?';
+        $permissive_match4 = '[\\s|\\(]+(' . $css_unit . ')[,|\\s]+(' . $css_unit . ')[,|\\s]+(' . $css_unit . ')[,|\\s]+(' . $css_unit . ')\\s*\\)?';
+
+        $rgb_regexp = '/^rgb' . $permissive_match3 . '$/';
+        if ( preg_match( $rgb_regexp, $color_str, $match ) ) {
+                $rgb = wp_tinycolor_rgb_to_rgb(
+                        array(
+                                'r' => $match[1],
+                                'g' => $match[2],
+                                'b' => $match[3],
+                        )
+                );
+
+                $rgb['a'] = 1;
+
+                return $rgb;
+        }
+
+        $rgba_regexp = '/^rgba' . $permissive_match4 . '$/';
+        if ( preg_match( $rgba_regexp, $color_str, $match ) ) {
+                $rgb = wp_tinycolor_rgb_to_rgb(
+                        array(
+                                'r' => $match[1],
+                                'g' => $match[2],
+                                'b' => $match[3],
+                        )
+                );
+
+                $rgb['a'] = _wp_tinycolor_bound_alpha( $match[4] );
+
+                return $rgb;
+        }
+
+        $hsl_regexp = '/^hsl' . $permissive_match3 . '$/';
+        if ( preg_match( $hsl_regexp, $color_str, $match ) ) {
+                $rgb = wp_tinycolor_hsl_to_rgb(
+                        array(
+                                'h' => $match[1],
+                                's' => $match[2],
+                                'l' => $match[3],
+                        )
+                );
+
+                $rgb['a'] = 1;
+
+                return $rgb;
+        }
+
+        $hsla_regexp = '/^hsla' . $permissive_match4 . '$/';
+        if ( preg_match( $hsla_regexp, $color_str, $match ) ) {
+                $rgb = wp_tinycolor_hsl_to_rgb(
+                        array(
+                                'h' => $match[1],
+                                's' => $match[2],
+                                'l' => $match[3],
+                        )
+                );
+
+                $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 ) ) {
+                $rgb = wp_tinycolor_rgb_to_rgb(
+                        array(
+                                'r' => base_convert( $match[1], 16, 10 ),
+                                'g' => base_convert( $match[2], 16, 10 ),
+                                'b' => base_convert( $match[3], 16, 10 ),
+                        )
+                );
+
+                $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 ) ) {
+                $rgb = wp_tinycolor_rgb_to_rgb(
+                        array(
+                                'r' => base_convert( $match[1], 16, 10 ),
+                                'g' => base_convert( $match[2], 16, 10 ),
+                                'b' => base_convert( $match[3], 16, 10 ),
+                        )
+                );
+
+                $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 ) ) {
+                $rgb = wp_tinycolor_rgb_to_rgb(
+                        array(
+                                'r' => base_convert( $match[1] . $match[1], 16, 10 ),
+                                'g' => base_convert( $match[2] . $match[2], 16, 10 ),
+                                'b' => base_convert( $match[3] . $match[3], 16, 10 ),
+                        )
+                );
+
+                $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 ) ) {
+                $rgb = wp_tinycolor_rgb_to_rgb(
+                        array(
+                                'r' => base_convert( $match[1] . $match[1], 16, 10 ),
+                                'g' => base_convert( $match[2] . $match[2], 16, 10 ),
+                                '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,
+                );
+        }
+}
+
+/**
+ * Returns the prefixed id for the duotone filter for use as a CSS id.
+ *
+ * @since 5.9.1
+ * @deprecated 6.3.0
+ *
+ * @access private
+ *
+ * @param array $preset Duotone preset value as seen in theme.json.
+ * @return string Duotone filter CSS id.
+ */
+function wp_get_duotone_filter_id( $preset ) {
+        _deprecated_function( __FUNCTION__, '6.3.0' );
+        return WP_Duotone::get_filter_id_from_preset( $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.
+ * @deprecated 6.3.0
+ *
+ * @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 ) {
+        _deprecated_function( __FUNCTION__, '6.3.0' );
+        return WP_Duotone::get_filter_css_property_value_from_preset( $preset );
+}
+
+/**
+ * Returns the duotone filter SVG string for the preset.
+ *
+ * @since 5.9.1
+ * @deprecated 6.3.0
+ *
+ * @access private
+ *
+ * @param array $preset Duotone preset value as seen in theme.json.
+ * @return string Duotone SVG filter.
+ */
+function wp_get_duotone_filter_svg( $preset ) {
+        _deprecated_function( __FUNCTION__, '6.3.0' );
+        return WP_Duotone::get_filter_svg_from_preset( $preset );
+}
+
+/**
+ * Registers the style and colors block attributes for block types that support it.
+ *
+ * @since 5.8.0
+ * @deprecated 6.3.0 Use WP_Duotone::register_duotone_support() instead.
+ *
+ * @access private
+ *
+ * @param WP_Block_Type $block_type Block Type.
+ */
+function wp_register_duotone_support( $block_type ) {
+        _deprecated_function( __FUNCTION__, '6.3.0', 'WP_Duotone::register_duotone_support' );
+        return WP_Duotone::register_duotone_support( $block_type );
+}
+
+/**
+ * Renders out the duotone stylesheet and SVG.
+ *
+ * @since 5.8.0
+ * @since 6.1.0 Allow unset for preset colors.
+ * @deprecated 6.3.0 Use WP_Duotone::render_duotone_support() instead.
+ * 
+ * @access private
+ *
+ * @param string $block_content Rendered block content.
+ * @param array  $block         Block object.
+ * @return string Filtered block content.
+ */
+function wp_render_duotone_support( $block_content, $block ) {
+        _deprecated_function( __FUNCTION__, '6.3.0', 'WP_Duotone::render_duotone_support' );
+        return WP_Duotone::render_duotone_support( $block_content, $block );
+}
+
+/**
+ * Returns a string containing the SVGs to be referenced as filters (duotone).
+ *
+ * @since 5.9.1
+ * @deprecated 6.3.0 SVG generation is handled on a per-block basis in block supports.
+ *
+ * @return string
+ */
+function wp_get_global_styles_svg_filters() {
+        _deprecated_function( __FUNCTION__, '6.3.0' );
+
+        /*
+         * Ignore cache when the development mode is set to 'theme', so it doesn't interfere with the theme
+         * developer's workflow.
+         */
+        $can_use_cached = wp_get_development_mode() !== 'theme';
+        $cache_group    = 'theme_json';
+        $cache_key      = 'wp_get_global_styles_svg_filters';
+        if ( $can_use_cached ) {
+                $cached = wp_cache_get( $cache_key, $cache_group );
+                if ( $cached ) {
+                        return $cached;
+                }
+        }
+
+        $supports_theme_json = wp_theme_has_theme_json();
+
+        $origins = array( 'default', 'theme', 'custom' );
+        if ( ! $supports_theme_json ) {
+                $origins = array( 'default' );
+        }
+
+        $tree = WP_Theme_JSON_Resolver::get_merged_data();
+        $svgs = $tree->get_svg_filters( $origins );
+
+        if ( $can_use_cached ) {
+                wp_cache_set( $cache_key, $svgs, $cache_group );
+        }
+
+        return $svgs;
+}
+
+/**
+ * Renders the SVG filters supplied by theme.json.
+ *
+ * Note that this doesn't render the per-block user-defined
+ * filters which are handled by wp_render_duotone_support,
+ * but it should be rendered before the filtered content
+ * in the body to satisfy Safari's rendering quirks.
+ *
+ * @since 5.9.1
+ * @deprecated 6.3.0 SVG generation is handled on a per-block basis in block supports.
+ */
+function wp_global_styles_render_svg_filters() {
+        _deprecated_function( __FUNCTION__, '6.3.0' );
+
+        /*
+         * When calling via the in_admin_header action, we only want to render the
+         * SVGs on block editor pages.
+         */
+        if (
+                is_admin() &&
+                ! get_current_screen()->is_block_editor()
+        ) {
+                return;
+        }
+
+        $filters = wp_get_global_styles_svg_filters();
+        if ( ! empty( $filters ) ) {
+                echo $filters;
+        }
+}

trunk/src/wp-includes/global-styles-and-settings.php

@@ -287 +287 @@
 
         return $stylesheet;
-}
-
-/**
- * Returns a string containing the SVGs to be referenced as filters (duotone).
- *
- * @since 5.9.1
- *
- * @return string
- */
-function wp_get_global_styles_svg_filters() {
-        /*
-         * Ignore cache when the development mode is set to 'theme', so it doesn't interfere with the theme
-         * developer's workflow.
-         */
-        $can_use_cached = wp_get_development_mode() !== 'theme';
-        $cache_group    = 'theme_json';
-        $cache_key      = 'wp_get_global_styles_svg_filters';
-        if ( $can_use_cached ) {
-                $cached = wp_cache_get( $cache_key, $cache_group );
-                if ( $cached ) {
-                        return $cached;
-                }
-        }
-
-        $supports_theme_json = wp_theme_has_theme_json();
-
-        $origins = array( 'default', 'theme', 'custom' );
-        if ( ! $supports_theme_json ) {
-                $origins = array( 'default' );
-        }
-
-        $tree = WP_Theme_JSON_Resolver::get_merged_data();
-        $svgs = $tree->get_svg_filters( $origins );
-
-        if ( $can_use_cached ) {
-                wp_cache_set( $cache_key, $svgs, $cache_group );
-        }
-
-        return $svgs;
 }
 

trunk/src/wp-includes/script-loader.php

@@ -2481 +2481 @@
 
 /**
- * Renders the SVG filters supplied by theme.json.
- *
- * Note that this doesn't render the per-block user-defined
- * filters which are handled by wp_render_duotone_support,
- * but it should be rendered before the filtered content
- * in the body to satisfy Safari's rendering quirks.
- *
- * @since 5.9.1
- */
-function wp_global_styles_render_svg_filters() {
-        /*
-         * When calling via the in_admin_header action, we only want to render the
-         * SVGs on block editor pages.
-         */
-        if (
-                is_admin() &&
-                ! get_current_screen()->is_block_editor()
-        ) {
-                return;
-        }
-
-        $filters = wp_get_global_styles_svg_filters();
-        if ( ! empty( $filters ) ) {
-                echo $filters;
-        }
-}
-
-/**
  * Checks if the editor scripts and styles for all registered block types
  * should be enqueued on the current screen.

trunk/src/wp-settings.php

@@ -176 +176 @@
 require ABSPATH . WPINC . '/class-wp-theme-json.php';
 require ABSPATH . WPINC . '/class-wp-theme-json-resolver.php';
+require ABSPATH . WPINC . '/class-wp-duotone.php';
 require ABSPATH . WPINC . '/global-styles-and-settings.php';
 require ABSPATH . WPINC . '/class-wp-block-template.php';

trunk/tests/phpunit/tests/theme/wpGetGlobalStylesSvgFilters.php

@@ -1 @@
-<?php
-/**
- * Tests wp_get_global_styles_svg_filters().
- *
- * @group themes
- */
-class Tests_Theme_wpGetGlobalStylesSvgFilters extends WP_UnitTestCase {
-        public function set_up() {
-                parent::set_up();
-                // Clear caches.
-                wp_clean_themes_cache();
-        }
-
-        public function tear_down() {
-                wp_clean_themes_cache();
-
-                parent::tear_down();
-        }
-
-        /**
-         * Tests that switching themes recalculates the svgs.
-         *
-         * @covers ::wp_get_global_styles_svg_filters
-         *
-         * @ticket 57568
-         */
-        public function test_switching_themes_should_recalculate_svg() {
-                $svg_for_default_theme = wp_get_global_styles_svg_filters();
-                switch_theme( 'block-theme' );
-                $svg_for_block_theme = wp_get_global_styles_svg_filters();
-                switch_theme( WP_DEFAULT_THEME );
-
-                $this->assertStringContainsString( '<svg', $svg_for_default_theme, 'Default theme should contain SVG' );
-                $this->assertStringContainsString( '<svg', $svg_for_default_theme, 'Block theme should contain SVG' );
-                $this->assertNotSame( $svg_for_default_theme, $svg_for_block_theme, 'Cache value should have changed' );
-        }
-
-        /**
-         * Tests that the function relies on the development mode for whether to use caching.
-         *
-         * @ticket 57487
-         *
-         * @covers ::wp_get_global_styles_svg_filters
-         */
-        public function test_caching_is_used_when_developing_theme() {
-                global $_wp_tests_development_mode;
-
-                switch_theme( 'block-theme' );
-
-                // Store SVG in cache.
-                $svg = '<svg></svg>';
-                wp_cache_set( 'wp_get_global_styles_svg_filters', $svg, 'theme_json' );
-
-                // By default, caching should be used, so the above value will be returned.
-                $_wp_tests_development_mode = '';
-                $this->assertSame( $svg, wp_get_global_styles_svg_filters(), 'Caching was not used despite development mode disabled' );
-
-                // When the development mode is set to 'theme', caching should not be used.
-                $_wp_tests_development_mode = 'theme';
-                $this->assertNotSame( $svg, wp_get_global_styles_svg_filters(), 'Caching was used despite theme development mode' );
-        }
-}

trunk/tests/phpunit/tests/theme/wpThemeJson.php

@@ -637 +637 @@
                 );
 
-                $variables = "body{--wp--preset--color--grey: grey;--wp--preset--gradient--custom-gradient: linear-gradient(135deg,rgba(0,0,0) 0%,rgb(0,0,0) 100%);--wp--preset--duotone--custom-duotone: url('#wp-duotone-custom-duotone');--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}";
+                $variables = 'body{--wp--preset--color--grey: grey;--wp--preset--gradient--custom-gradient: linear-gradient(135deg,rgba(0,0,0) 0%,rgb(0,0,0) 100%);--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}';
                 $styles    = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}body{color: var(--wp--preset--color--grey);}a:where(:not(.wp-element-button)){background-color: #333;color: #111;}.wp-element-button, .wp-block-button__link{box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.66);}.wp-block-group{background: var(--wp--preset--gradient--custom-gradient);border-radius: 10px;padding: 24px;}.wp-block-group a:where(:not(.wp-element-button)){color: #111;}.wp-block-heading{color: #123456;}.wp-block-heading a:where(:not(.wp-element-button)){background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a:where(:not(.wp-element-button)){background-color: #777;color: #555;}.wp-block-post-excerpt{column-count: 2;}.wp-block-image{margin-bottom: 30px;}.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder{border-top-left-radius: 10px;border-bottom-right-radius: 1em;}.wp-block-image img, .wp-block-image .components-placeholder{filter: var(--wp--preset--duotone--custom-duotone);}';
                 $presets   = '.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-custom-gradient-gradient-background{background: var(--wp--preset--gradient--custom-gradient) !important;}.has-small-font-family{font-family: var(--wp--preset--font-family--small) !important;}.has-big-font-family{font-family: var(--wp--preset--font-family--big) !important;}';