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. Built from https://develop.svn.wordpress.org/trunk@56101 git-svn-id: http://core.svn.wordpress.org/trunk@55613 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
isabel_brison
parent
97f1622d07
commit
3de83926d6
|
|
@ -32,566 +32,32 @@
|
||||||
* @since 5.8.0
|
* @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.
|
// Register the block support.
|
||||||
WP_Block_Supports::get_instance()->register(
|
WP_Block_Supports::get_instance()->register(
|
||||||
'duotone',
|
'duotone',
|
||||||
array(
|
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 );
|
||||||
|
|
|
||||||
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
|
* @since 6.0.0 Replaced `override` with `prevent_override` and updated the
|
||||||
* `prevent_override` value for `color.duotone` to use `color.defaultDuotone`.
|
* `prevent_override` value for `color.duotone` to use `color.defaultDuotone`.
|
||||||
* @since 6.2.0 Added 'shadow' presets.
|
* @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
|
* @var array
|
||||||
*/
|
*/
|
||||||
const PRESETS_METADATA = array(
|
const PRESETS_METADATA = array(
|
||||||
|
|
@ -143,8 +144,8 @@ class WP_Theme_JSON {
|
||||||
'path' => array( 'color', 'duotone' ),
|
'path' => array( 'color', 'duotone' ),
|
||||||
'prevent_override' => array( 'color', 'defaultDuotone' ),
|
'prevent_override' => array( 'color', 'defaultDuotone' ),
|
||||||
'use_default_names' => false,
|
'use_default_names' => false,
|
||||||
'value_func' => 'wp_get_duotone_filter_property',
|
'value_func' => null, // CSS Custom Properties for duotone are handled by block supports in class-wp-duotone.php.
|
||||||
'css_vars' => '--wp--preset--duotone--$slug',
|
'css_vars' => null,
|
||||||
'classes' => array(),
|
'classes' => array(),
|
||||||
'properties' => array( 'filter' ),
|
'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_enqueue_scripts', 'wp_enqueue_stored_styles' );
|
||||||
add_action( 'wp_footer', 'wp_enqueue_stored_styles', 1 );
|
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_action( 'wp_default_styles', 'wp_default_styles' );
|
||||||
add_filter( 'style_loader_src', 'wp_style_loader_src', 10, 2 );
|
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;
|
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;
|
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.
|
* 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
|
* Checks if the editor scripts and styles for all registered block types
|
||||||
* should be enqueued on the current screen.
|
* should be enqueued on the current screen.
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
*
|
*
|
||||||
* @global string $wp_version
|
* @global string $wp_version
|
||||||
*/
|
*/
|
||||||
$wp_version = '6.3-beta2-56100';
|
$wp_version = '6.3-beta2-56101';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||||
|
|
|
||||||
|
|
@ -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-data.php';
|
||||||
require ABSPATH . WPINC . '/class-wp-theme-json.php';
|
require ABSPATH . WPINC . '/class-wp-theme-json.php';
|
||||||
require ABSPATH . WPINC . '/class-wp-theme-json-resolver.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 . '/global-styles-and-settings.php';
|
||||||
require ABSPATH . WPINC . '/class-wp-block-template.php';
|
require ABSPATH . WPINC . '/class-wp-block-template.php';
|
||||||
require ABSPATH . WPINC . '/block-template-utils.php';
|
require ABSPATH . WPINC . '/block-template-utils.php';
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue