Changeset 56101

Timestamp:

06/29/2023 06:19:41 AM (10 months 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;}';