mirror of
https://github.com/gosticks/wordpress-develop.git
synced 2026-06-28 14:20:15 +00:00
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. git-svn-id: https://develop.svn.wordpress.org/trunk@56101 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Isabel Brison
@@ -32,566 +32,32 @@
|
||||
* @since 5.8.0
|
||||
*/
|
||||
|
||||
/**
|
||||
* 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 );
|
||||
|
||||
1274
src/wp-includes/class-wp-duotone.php
Normal file
1274
src/wp-includes/class-wp-duotone.php
Normal file
File diff suppressed because it is too large
Load Diff
@@ -114,6 +114,7 @@ class WP_Theme_JSON {
|
||||
* @since 6.0.0 Replaced `override` with `prevent_override` and updated the
|
||||
* `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
|
||||
*/
|
||||
const PRESETS_METADATA = array(
|
||||
@@ -143,8 +144,8 @@ class WP_Theme_JSON {
|
||||
'path' => array( 'color', 'duotone' ),
|
||||
'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' ),
|
||||
),
|
||||
|
||||
@@ -606,10 +606,6 @@ add_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles_custom_css' );
|
||||
add_action( 'wp_enqueue_scripts', 'wp_enqueue_stored_styles' );
|
||||
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 );
|
||||
|
||||
|
||||
@@ -4804,3 +4804,501 @@ function wp_img_tag_add_loading_attr( $image, $context ) {
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -288,45 +288,6 @@ function wp_get_global_styles_custom_css() {
|
||||
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;
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds global style rules to the inline style for each block.
|
||||
*
|
||||
|
||||
@@ -2479,34 +2479,6 @@ function wp_enqueue_global_styles_custom_css() {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 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.
|
||||
|
||||
@@ -175,6 +175,7 @@ require ABSPATH . WPINC . '/class-wp-theme-json-schema.php';
|
||||
require ABSPATH . WPINC . '/class-wp-theme-json-data.php';
|
||||
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';
|
||||
require ABSPATH . WPINC . '/block-template-utils.php';
|
||||
|
||||
124
tests/phpunit/tests/block-supports/duotone.php
Normal file
124
tests/phpunit/tests/block-supports/duotone.php
Normal file
@@ -0,0 +1,124 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* Test the block WP_Duotone class.
|
||||
*
|
||||
* @package WordPress
|
||||
*/
|
||||
|
||||
class Tests_Block_Supports_DuoTones extends WP_UnitTestCase {
|
||||
/**
|
||||
* Cleans up CSS added to block-supports from duotone styles. We neeed to do this
|
||||
* in order to avoid impacting other tests.
|
||||
*/
|
||||
public static function wpTearDownAfterClass() {
|
||||
WP_Style_Engine_CSS_Rules_Store::remove_all_stores();
|
||||
}
|
||||
|
||||
/**
|
||||
* Tests whether the duotone preset class is added to the block.
|
||||
*
|
||||
* @ticket 58555
|
||||
*
|
||||
* @covers ::render_duotone_support
|
||||
*/
|
||||
public function test_render_duotone_support_preset() {
|
||||
$block = array(
|
||||
'blockName' => 'core/image',
|
||||
'attrs' => array( 'style' => array( 'color' => array( 'duotone' => 'var:preset|duotone|blue-orange' ) ) ),
|
||||
);
|
||||
$block_content = '<figure class="wp-block-image size-full"><img src="/my-image.jpg" /></figure>';
|
||||
$expected = '<figure class="wp-block-image size-full wp-duotone-blue-orange"><img src="/my-image.jpg" /></figure>';
|
||||
$this->assertSame( $expected, WP_Duotone::render_duotone_support( $block_content, $block ) );
|
||||
}
|
||||
|
||||
/**
|
||||
* Tests whether the duotone unset class is added to the block.
|
||||
*
|
||||
* @ticket 58555
|
||||
*
|
||||
* @covers ::render_duotone_support
|
||||
*/
|
||||
public function test_render_duotone_support_css() {
|
||||
$block = array(
|
||||
'blockName' => 'core/image',
|
||||
'attrs' => array( 'style' => array( 'color' => array( 'duotone' => 'unset' ) ) ),
|
||||
);
|
||||
$block_content = '<figure class="wp-block-image size-full"><img src="/my-image.jpg" /></figure>';
|
||||
$expected = '/<figure class="wp-block-image size-full wp-duotone-unset-\d+"><img src="\\/my-image.jpg" \\/><\\/figure>/';
|
||||
$this->assertMatchesRegularExpression( $expected, WP_Duotone::render_duotone_support( $block_content, $block ) );
|
||||
}
|
||||
|
||||
/**
|
||||
* Tests whether the duotone custom class is added to the block.
|
||||
*
|
||||
* @covers ::render_duotone_support
|
||||
*/
|
||||
public function test_render_duotone_support_custom() {
|
||||
$block = array(
|
||||
'blockName' => 'core/image',
|
||||
'attrs' => array( 'style' => array( 'color' => array( 'duotone' => array( '#FFFFFF', '#000000' ) ) ) ),
|
||||
);
|
||||
$block_content = '<figure class="wp-block-image size-full"><img src="/my-image.jpg" /></figure>';
|
||||
$expected = '/<figure class="wp-block-image size-full wp-duotone-ffffff-000000-\d+"><img src="\\/my-image.jpg" \\/><\\/figure>/';
|
||||
$this->assertMatchesRegularExpression( $expected, WP_Duotone::render_duotone_support( $block_content, $block ) );
|
||||
}
|
||||
|
||||
/**
|
||||
* Tests whether the slug is extracted from the attribute.
|
||||
*
|
||||
* @dataProvider data_get_slug_from_attribute
|
||||
* @covers ::get_slug_from_attribute
|
||||
*/
|
||||
public function test_get_slug_from_attribute( $data_attr, $expected ) {
|
||||
|
||||
$reflection = new ReflectionMethod( 'WP_Duotone', 'get_slug_from_attribute' );
|
||||
$reflection->setAccessible( true );
|
||||
|
||||
$this->assertSame( $expected, $reflection->invoke( null, $data_attr ) );
|
||||
}
|
||||
|
||||
/**
|
||||
* Data provider.
|
||||
*
|
||||
* @return array[].
|
||||
*/
|
||||
public function data_get_slug_from_attribute() {
|
||||
return array(
|
||||
'pipe-slug' => array( 'var:preset|duotone|blue-orange', 'blue-orange' ),
|
||||
'css-var' => array( 'var(--wp--preset--duotone--blue-orange)', 'blue-orange' ),
|
||||
'css-var-invalid-slug-chars' => array( 'var(--wp--preset--duotone--.)', '.' ),
|
||||
'css-var-missing-end-parenthesis' => array( 'var(--wp--preset--duotone--blue-orange', '' ),
|
||||
'invalid' => array( 'not a valid attribute', '' ),
|
||||
'css-var-no-value' => array( 'var(--wp--preset--duotone--)', '' ),
|
||||
'pipe-slug-no-value' => array( 'var:preset|duotone|', '' ),
|
||||
'css-var-spaces' => array( 'var(--wp--preset--duotone-- ', '' ),
|
||||
'pipe-slug-spaces' => array( 'var:preset|duotone| ', '' ),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @dataProvider data_is_preset
|
||||
*/
|
||||
public function test_is_preset( $data_attr, $expected ) {
|
||||
$reflection = new ReflectionMethod( 'WP_Duotone', 'is_preset' );
|
||||
$reflection->setAccessible( true );
|
||||
|
||||
$this->assertSame( $expected, $reflection->invoke( null, $data_attr ) );
|
||||
}
|
||||
|
||||
/**
|
||||
* Data provider.
|
||||
*
|
||||
* @return array[].
|
||||
*/
|
||||
public function data_is_preset() {
|
||||
return array(
|
||||
'pipe-slug' => array( 'var:preset|duotone|blue-orange', true ),
|
||||
'css-var' => array( 'var(--wp--preset--duotone--blue-orange)', true ),
|
||||
'css-var-invalid-slug-chars' => array( 'var(--wp--preset--duotone--.)', false ),
|
||||
'css-var-missing-end-parenthesis' => array( 'var(--wp--preset--duotone--blue-orange', false ),
|
||||
'invalid' => array( 'not a valid attribute', false ),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,62 +0,0 @@
|
||||
<?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' );
|
||||
}
|
||||
}
|
||||
|
||||
@@ -636,7 +636,7 @@ class Tests_Theme_wpThemeJson extends WP_UnitTestCase {
|
||||
)
|
||||
);
|
||||
|
||||
$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;}';
|
||||
$all = $variables . $styles . $presets;
|
||||
|
||||
Reference in New Issue
Block a user