Skip to content

Commit

Permalink
Update theme.json classes for WordPress 5.9.
Browse files Browse the repository at this point in the history 
This commit ports to core the changes to the classes that deal with theme.json code.

See #54336.
Props oandregal, spacedmonkey, noisysocks, hellofromtonya, youknowriad.
Built from https://develop.svn.wordpress.org/trunk@52049


git-svn-id: http://core.svn.wordpress.org/trunk@51641 1a063a9b-81f0-0310-95a4-ce76da25c4cd
  • Loading branch information
@jorgefilipecosta
jorgefilipecosta committed Nov 8, 2021
1 parent 25b9998 commit 065c639
Show file tree
Hide file tree
Showing 12 changed files with 1,287 additions and 334 deletions.
18 changes: 9 additions & 9 deletions wp-includes/block-editor.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -303,15 +303,15 @@ function get_block_editor_settings( array $custom_settings, $block_editor_contex
$custom_settings
);

$theme_json = WP_Theme_JSON_Resolver::get_merged_data( $editor_settings );
$theme_json = WP_Theme_JSON_Resolver::get_merged_data();

if ( WP_Theme_JSON_Resolver::theme_has_support() ) {
$editor_settings['styles'][] = array(
'css' => $theme_json->get_stylesheet( 'block_styles' ),
'css' => $theme_json->get_stylesheet( array( 'styles', 'presets' ) ),
'__unstableType' => 'globalStyles',
);
$editor_settings['styles'][] = array(
'css' => $theme_json->get_stylesheet( 'css_variables' ),
'css' => $theme_json->get_stylesheet( array( 'variables' ) ),
'__experimentalNoWrapper' => true,
'__unstableType' => 'globalStyles',
);
Expand Down Expand Up @@ -358,17 +358,17 @@ function get_block_editor_settings( array $custom_settings, $block_editor_contex
$editor_settings['disableCustomFontSizes'] = ! $editor_settings['__experimentalFeatures']['typography']['customFontSize'];
unset( $editor_settings['__experimentalFeatures']['typography']['customFontSize'] );
}
if ( isset( $editor_settings['__experimentalFeatures']['typography']['customLineHeight'] ) ) {
$editor_settings['enableCustomLineHeight'] = $editor_settings['__experimentalFeatures']['typography']['customLineHeight'];
unset( $editor_settings['__experimentalFeatures']['typography']['customLineHeight'] );
if ( isset( $editor_settings['__experimentalFeatures']['typography']['lineHeight'] ) ) {
$editor_settings['enableCustomLineHeight'] = $editor_settings['__experimentalFeatures']['typography']['lineHeight'];
unset( $editor_settings['__experimentalFeatures']['typography']['lineHeight'] );
}
if ( isset( $editor_settings['__experimentalFeatures']['spacing']['units'] ) ) {
$editor_settings['enableCustomUnits'] = $editor_settings['__experimentalFeatures']['spacing']['units'];
unset( $editor_settings['__experimentalFeatures']['spacing']['units'] );
}
if ( isset( $editor_settings['__experimentalFeatures']['spacing']['customPadding'] ) ) {
$editor_settings['enableCustomSpacing'] = $editor_settings['__experimentalFeatures']['spacing']['customPadding'];
unset( $editor_settings['__experimentalFeatures']['spacing']['customPadding'] );
if ( isset( $editor_settings['__experimentalFeatures']['spacing']['padding'] ) ) {
$editor_settings['enableCustomSpacing'] = $editor_settings['__experimentalFeatures']['spacing']['padding'];
unset( $editor_settings['__experimentalFeatures']['spacing']['padding'] );
}

/**
Expand Down
178 changes: 169 additions & 9 deletions wp-includes/block-supports/duotone.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,28 @@ function wp_tinycolor_bound01( $n, $max ) {
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;
}

/**
* Round and convert values of an RGB object.
*
Expand Down Expand Up @@ -170,8 +192,7 @@ function wp_tinycolor_hsl_to_rgb( $hsl_color ) {

/**
* Parses hex, hsl, and rgb CSS strings using the same regex as TinyColor v1.4.2
* used in the JavaScript. Only colors output from react-color are implemented
* and the alpha value is ignored as it is not used in duotone.
* used in the JavaScript. Only colors output from react-color are implemented.
*
* Direct port of TinyColor's function, lightly simplified to maintain
* consistency with TinyColor.
Expand All @@ -180,6 +201,7 @@ function wp_tinycolor_hsl_to_rgb( $hsl_color ) {
* @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.
Expand All @@ -199,35 +221,47 @@ function wp_tinycolor_string_to_rgb( $color_str ) {

$rgb_regexp = '/^rgb' . $permissive_match3 . '$/';
if ( preg_match( $rgb_regexp, $color_str, $match ) ) {
return wp_tinycolor_rgb_to_rgb(
$rgb = wp_tinycolor_rgb_to_rgb(
array(
'r' => $match[1],
'g' => $match[2],
'b' => $match[3],
)
);

$rgb['a'] = 1;

return $rgb;
}

$rgba_regexp = '/^rgba' . $permissive_match4 . '$/';
if ( preg_match( $rgba_regexp, $color_str, $match ) ) {
return wp_tinycolor_rgb_to_rgb(
$rgb = wp_tinycolor_rgb_to_rgb(
array(
'r' => $match[1],
'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 ) ) {
return wp_tinycolor_hsl_to_rgb(
$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 . '$/';
Expand All @@ -239,50 +273,87 @@ function wp_tinycolor_string_to_rgb( $color_str ) {
'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 ) ) {
return wp_tinycolor_rgb_to_rgb(
$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 ) ) {
return wp_tinycolor_rgb_to_rgb(
$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 ) ) {
return wp_tinycolor_rgb_to_rgb(
$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 ) ) {
return wp_tinycolor_rgb_to_rgb(
$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,
);
}
}

Expand Down Expand Up @@ -313,6 +384,95 @@ function wp_register_duotone_support( $block_type ) {
}
}
}
/**
* Renders the duotone filter SVG and returns the CSS filter property to
* reference the rendered SVG.
*
* @since 5.9.0
*
* @param array $preset Duotone preset value as seen in theme.json.
* @return string Duotone CSS filter property.
*/
function wp_render_duotone_filter_preset( $preset ) {
$duotone_id = $preset['slug'];
$duotone_colors = $preset['colors'];
$filter_id = 'wp-duotone-' . $duotone_id;
$duotone_values = array(
'r' => array(),
'g' => array(),
'b' => array(),
'a' => array(),
);
foreach ( $duotone_colors as $color_str ) {
$color = wp_tinycolor_string_to_rgb( $color_str );

$duotone_values['r'][] = $color['r'] / 255;
$duotone_values['g'][] = $color['g'] / 255;
$duotone_values['b'][] = $color['b'] / 255;
$duotone_values['a'][] = $color['a'];
}

ob_start();

?>

<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 0 0"
width="0"
height="0"
focusable="false"
role="none"
style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;"
>
<defs>
<filter id="<?php echo esc_attr( $filter_id ); ?>">
<feColorMatrix
color-interpolation-filters="sRGB"
type="matrix"
values="
.299 .587 .114 0 0
.299 .587 .114 0 0
.299 .587 .114 0 0
.299 .587 .114 0 0
"
/>
<feComponentTransfer color-interpolation-filters="sRGB" >
<feFuncR type="table" tableValues="<?php echo esc_attr( implode( ' ', $duotone_values['r'] ) ); ?>" />
<feFuncG type="table" tableValues="<?php echo esc_attr( implode( ' ', $duotone_values['g'] ) ); ?>" />
<feFuncB type="table" tableValues="<?php echo esc_attr( implode( ' ', $duotone_values['b'] ) ); ?>" />
<feFuncA type="table" tableValues="<?php echo esc_attr( implode( ' ', $duotone_values['a'] ) ); ?>" />
</feComponentTransfer>
<feComposite in2="SourceGraphic" operator="in" />
</filter>
</defs>
</svg>

<?php

$svg = ob_get_clean();

if ( ! defined( 'SCRIPT_DEBUG' ) || ! SCRIPT_DEBUG ) {
// Clean up the whitespace.
$svg = preg_replace( "/[\r\n\t ]+/", ' ', $svg );
$svg = preg_replace( '/> </', '><', $svg );
$svg = trim( $svg );
}

add_action(
/*
* Safari doesn't render SVG filters defined in data URIs,
* and SVG filters won't render in the head of a document,
* so the next best place to put the SVG is in the footer.
*/
is_admin() ? 'admin_footer' : 'wp_footer',
static function () use ( $svg ) {
echo $svg;
}
);

return "url('#" . $filter_id . "')";
}

/**
* Render out the duotone stylesheet and SVG.
Expand Down
Loading

0 comments on commit 065c639

Please sign in to comment.