rebase on oct-10-2023

This commit is contained in:
Rachit Bhargava
2023-10-10 17:23:21 -04:00
parent d37566ffb6
commit d096058d7d
4789 changed files with 254611 additions and 307223 deletions

View File

@@ -32,566 +32,28 @@
* @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 ) && false !== strpos( $n, '.' ) && 1 === (float) $n ) {
$n = '100%';
}
$n = min( $max, max( 0, (float) $n ) );
// Automatically convert percentage into number.
if ( 'string' === gettype( $n ) && false !== strpos( $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 );
// Add classnames to blocks using duotone support.
add_filter( 'render_block', array( 'WP_Duotone', 'render_duotone_support' ), 10, 3 );
// 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 );

View File

@@ -46,13 +46,18 @@ function wp_render_elements_support( $block_content, $block ) {
$link_color = _wp_array_get( $block['attrs'], array( 'style', 'elements', 'link', 'color', 'text' ), null );
}
$hover_link_color = null;
if ( ! empty( $block['attrs'] ) ) {
$hover_link_color = _wp_array_get( $block['attrs'], array( 'style', 'elements', 'link', ':hover', 'color', 'text' ), null );
}
/*
* For now we only care about link color.
* For now we only care about link colors.
* This code in the future when we have a public API
* should take advantage of WP_Theme_JSON::compute_style_properties
* and work for any element and style.
*/
if ( null === $link_color ) {
if ( null === $link_color && null === $hover_link_color ) {
return $block_content;
}
@@ -104,6 +109,16 @@ function wp_render_elements_support_styles( $pre_render, $block ) {
)
);
if ( isset( $link_block_styles[':hover'] ) ) {
wp_style_engine_get_styles(
$link_block_styles[':hover'],
array(
'selector' => ".$class_name a:hover",
'context' => 'block-supports',
)
);
}
return null;
}

View File

@@ -6,16 +6,203 @@
* @since 5.8.0
*/
/**
* Returns layout definitions, keyed by layout type.
*
* Provides a common definition of slugs, classnames, base styles, and spacing styles for each layout type.
* When making changes or additions to layout definitions, the corresponding JavaScript definitions should
* also be updated.
*
* @since 6.3.0
* @access private
*
* @return array[] Layout definitions.
*/
function wp_get_layout_definitions() {
$layout_definitions = array(
'default' => array(
'name' => 'default',
'slug' => 'flow',
'className' => 'is-layout-flow',
'baseStyles' => array(
array(
'selector' => ' > .alignleft',
'rules' => array(
'float' => 'left',
'margin-inline-start' => '0',
'margin-inline-end' => '2em',
),
),
array(
'selector' => ' > .alignright',
'rules' => array(
'float' => 'right',
'margin-inline-start' => '2em',
'margin-inline-end' => '0',
),
),
array(
'selector' => ' > .aligncenter',
'rules' => array(
'margin-left' => 'auto !important',
'margin-right' => 'auto !important',
),
),
),
'spacingStyles' => array(
array(
'selector' => ' > :first-child:first-child',
'rules' => array(
'margin-block-start' => '0',
),
),
array(
'selector' => ' > :last-child:last-child',
'rules' => array(
'margin-block-end' => '0',
),
),
array(
'selector' => ' > *',
'rules' => array(
'margin-block-start' => null,
'margin-block-end' => '0',
),
),
),
),
'constrained' => array(
'name' => 'constrained',
'slug' => 'constrained',
'className' => 'is-layout-constrained',
'baseStyles' => array(
array(
'selector' => ' > .alignleft',
'rules' => array(
'float' => 'left',
'margin-inline-start' => '0',
'margin-inline-end' => '2em',
),
),
array(
'selector' => ' > .alignright',
'rules' => array(
'float' => 'right',
'margin-inline-start' => '2em',
'margin-inline-end' => '0',
),
),
array(
'selector' => ' > .aligncenter',
'rules' => array(
'margin-left' => 'auto !important',
'margin-right' => 'auto !important',
),
),
array(
'selector' => ' > :where(:not(.alignleft):not(.alignright):not(.alignfull))',
'rules' => array(
'max-width' => 'var(--wp--style--global--content-size)',
'margin-left' => 'auto !important',
'margin-right' => 'auto !important',
),
),
array(
'selector' => ' > .alignwide',
'rules' => array(
'max-width' => 'var(--wp--style--global--wide-size)',
),
),
),
'spacingStyles' => array(
array(
'selector' => ' > :first-child:first-child',
'rules' => array(
'margin-block-start' => '0',
),
),
array(
'selector' => ' > :last-child:last-child',
'rules' => array(
'margin-block-end' => '0',
),
),
array(
'selector' => ' > *',
'rules' => array(
'margin-block-start' => null,
'margin-block-end' => '0',
),
),
),
),
'flex' => array(
'name' => 'flex',
'slug' => 'flex',
'className' => 'is-layout-flex',
'displayMode' => 'flex',
'baseStyles' => array(
array(
'selector' => '',
'rules' => array(
'flex-wrap' => 'wrap',
'align-items' => 'center',
),
),
array(
'selector' => ' > *',
'rules' => array(
'margin' => '0',
),
),
),
'spacingStyles' => array(
array(
'selector' => '',
'rules' => array(
'gap' => null,
),
),
),
),
'grid' => array(
'name' => 'grid',
'slug' => 'grid',
'className' => 'is-layout-grid',
'displayMode' => 'grid',
'baseStyles' => array(
array(
'selector' => ' > *',
'rules' => array(
'margin' => '0',
),
),
),
'spacingStyles' => array(
array(
'selector' => '',
'rules' => array(
'gap' => null,
),
),
),
),
);
return $layout_definitions;
}
/**
* Registers the layout block attribute for block types that support it.
*
* @since 5.8.0
* @since 6.3.0 Check for layout support via the `layout` key with fallback to `__experimentalLayout`.
* @access private
*
* @param WP_Block_Type $block_type Block Type.
*/
function wp_register_layout_support( $block_type ) {
$support_layout = block_has_support( $block_type, array( '__experimentalLayout' ), false );
$support_layout = block_has_support( $block_type, array( 'layout' ), false ) || block_has_support( $block_type, array( '__experimentalLayout' ), false );
if ( $support_layout ) {
if ( ! $block_type->attributes ) {
$block_type->attributes = array();
@@ -34,6 +221,7 @@ function wp_register_layout_support( $block_type ) {
*
* @since 5.9.0
* @since 6.1.0 Added `$block_spacing` param, use style engine to enqueue styles.
* @since 6.3.0 Added grid layout type.
* @access private
*
* @param string $selector CSS selector.
@@ -287,6 +475,44 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false
);
}
}
} elseif ( 'grid' === $layout_type ) {
if ( ! empty( $layout['columnCount'] ) ) {
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'grid-template-columns' => 'repeat(' . $layout['columnCount'] . ', minmax(0, 1fr))' ),
);
} else {
$minimum_column_width = ! empty( $layout['minimumColumnWidth'] ) ? $layout['minimumColumnWidth'] : '12rem';
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'grid-template-columns' => 'repeat(auto-fill, minmax(min(' . $minimum_column_width . ', 100%), 1fr))' ),
);
}
if ( $has_block_gap_support && isset( $gap_value ) ) {
$combined_gap_value = '';
$gap_sides = is_array( $gap_value ) ? array( 'top', 'left' ) : array( 'top' );
foreach ( $gap_sides as $gap_side ) {
$process_value = is_string( $gap_value ) ? $gap_value : _wp_array_get( $gap_value, array( $gap_side ), $fallback_gap_value );
// Get spacing CSS variable from preset value if provided.
if ( is_string( $process_value ) && str_contains( $process_value, 'var:preset|spacing|' ) ) {
$index_to_splice = strrpos( $process_value, '|' ) + 1;
$slug = _wp_to_kebab_case( substr( $process_value, $index_to_splice ) );
$process_value = "var(--wp--preset--spacing--$slug)";
}
$combined_gap_value .= "$process_value ";
}
$gap_value = trim( $combined_gap_value );
if ( null !== $gap_value && ! $should_skip_gap_serialization ) {
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'gap' => $gap_value ),
);
}
}
}
if ( ! empty( $layout_styles ) ) {
@@ -312,6 +538,8 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false
* Renders the layout config to the block wrapper.
*
* @since 5.8.0
* @since 6.3.0 Adds compound class to layout wrapper for global spacing styles.
* @since 6.3.0 Check for layout support via the `layout` key with fallback to `__experimentalLayout`.
* @access private
*
* @param string $block_content Rendered block content.
@@ -319,8 +547,8 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false
* @return string Filtered block content.
*/
function wp_render_layout_support_flag( $block_content, $block ) {
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
$support_layout = block_has_support( $block_type, array( '__experimentalLayout' ), false );
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
$support_layout = block_has_support( $block_type, array( 'layout' ), false ) || block_has_support( $block_type, array( '__experimentalLayout' ), false );
$has_child_layout = isset( $block['attrs']['style']['layout']['selfStretch'] );
if ( ! $support_layout && ! $has_child_layout ) {
@@ -369,21 +597,12 @@ function wp_render_layout_support_flag( $block_content, $block ) {
return (string) $content;
}
$global_settings = wp_get_global_settings();
$block_gap = _wp_array_get( $global_settings, array( 'spacing', 'blockGap' ), null );
$has_block_gap_support = isset( $block_gap );
$global_layout_settings = _wp_array_get( $global_settings, array( 'layout' ), null );
$root_padding_aware_alignments = _wp_array_get( $global_settings, array( 'useRootPaddingAwareAlignments' ), false );
$default_block_layout = _wp_array_get( $block_type->supports, array( '__experimentalLayout', 'default' ), array() );
$used_layout = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : $default_block_layout;
if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] && ! $global_layout_settings ) {
return $block_content;
}
$global_settings = wp_get_global_settings();
$fallback_layout = ! empty( _wp_array_get( $block_type->supports, array( 'layout', 'default' ), array() ) ) ? _wp_array_get( $block_type->supports, array( 'layout', 'default' ), array() ) : _wp_array_get( $block_type->supports, array( '__experimentalLayout', 'default' ), array() );
$used_layout = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : $fallback_layout;
$class_names = array();
$layout_definitions = _wp_array_get( $global_layout_settings, array( 'definitions' ), array() );
$layout_definitions = wp_get_layout_definitions();
$container_class = wp_unique_id( 'wp-container-' );
$layout_classname = '';
@@ -392,6 +611,8 @@ function wp_render_layout_support_flag( $block_content, $block ) {
$used_layout['type'] = 'constrained';
}
$root_padding_aware_alignments = _wp_array_get( $global_settings, array( 'useRootPaddingAwareAlignments' ), false );
if (
$root_padding_aware_alignments &&
isset( $used_layout['type'] ) &&
@@ -458,6 +679,9 @@ function wp_render_layout_support_flag( $block_content, $block ) {
*/
$should_skip_gap_serialization = wp_should_skip_block_supports_serialization( $block_type, 'spacing', 'blockGap' );
$block_gap = _wp_array_get( $global_settings, array( 'spacing', 'blockGap' ), null );
$has_block_gap_support = isset( $block_gap );
$style = wp_get_layout_style(
".$container_class.$container_class",
$used_layout,
@@ -474,6 +698,10 @@ function wp_render_layout_support_flag( $block_content, $block ) {
}
}
// Add combined layout and block classname for global styles to hook onto.
$block_name = explode( '/', $block['blockName'] );
$class_names[] = 'wp-block-' . end( $block_name ) . '-' . $layout_classname;
$content_with_outer_classnames = '';
if ( ! empty( $outer_class_names ) ) {

View File

@@ -66,6 +66,7 @@ function _wp_add_block_level_presets_class( $block_content, $block ) {
* @internal
*
* @since 6.2.0
* @since 6.3.0 Updated preset styles to use Selectors API.
* @access private
*
* @param string|null $pre_render The pre-rendered content. Default null.
@@ -95,11 +96,16 @@ function _wp_add_block_level_preset_styles( $pre_render, $block ) {
$registry = WP_Block_Type_Registry::get_instance();
$blocks = $registry->get_all_registered();
foreach ( $blocks as $block_type ) {
if (
isset( $block_type->supports['__experimentalSelector'] ) &&
is_string( $block_type->supports['__experimentalSelector'] )
) {
$variables_root_selector .= ',' . $block_type->supports['__experimentalSelector'];
/*
* We only want to append selectors for blocks using custom selectors
* i.e. not `wp-block-<name>`.
*/
$has_custom_selector =
( isset( $block_type->supports['__experimentalSelector'] ) && is_string( $block_type->supports['__experimentalSelector'] ) ) ||
( isset( $block_type->selectors['root'] ) && is_string( $block_type->selectors['root'] ) );
if ( $has_custom_selector ) {
$variables_root_selector .= ',' . wp_get_block_css_selector( $block_type );
}
}
$variables_root_selector = WP_Theme_JSON::scope_selector( $class_name, $variables_root_selector );

View File

@@ -0,0 +1,82 @@
<?php
/**
* Shadow block support flag.
*
* @package WordPress
* @since 6.3.0
*/
/**
* Registers the style and shadow block attributes for block types that support it.
*
* @since 6.3.0
* @access private
*
* @param WP_Block_Type $block_type Block Type.
*/
function wp_register_shadow_support( $block_type ) {
$has_shadow_support = block_has_support( $block_type, array( 'shadow' ), false );
if ( ! $has_shadow_support ) {
return;
}
if ( ! $block_type->attributes ) {
$block_type->attributes = array();
}
if ( array_key_exists( 'style', $block_type->attributes ) ) {
$block_type->attributes['style'] = array(
'type' => 'object',
);
}
if ( array_key_exists( 'shadow', $block_type->attributes ) ) {
$block_type->attributes['shadow'] = array(
'type' => 'string',
);
}
}
/**
* Add CSS classes and inline styles for shadow features to the incoming attributes array.
* This will be applied to the block markup in the front-end.
*
* @since 6.3.0
* @access private
*
* @param WP_Block_Type $block_type Block type.
* @param array $block_attributes Block attributes.
* @return array Shadow CSS classes and inline styles.
*/
function wp_apply_shadow_support( $block_type, $block_attributes ) {
$has_shadow_support = block_has_support( $block_type, array( 'shadow' ), false );
if ( ! $has_shadow_support ) {
return array();
}
$shadow_block_styles = array();
$preset_shadow = array_key_exists( 'shadow', $block_attributes ) ? "var:preset|shadow|{$block_attributes['shadow']}" : null;
$custom_shadow = isset( $block_attributes['style']['shadow'] ) ? $block_attributes['style']['shadow'] : null;
$shadow_block_styles['shadow'] = $preset_shadow ? $preset_shadow : $custom_shadow;
$attributes = array();
$styles = wp_style_engine_get_styles( $shadow_block_styles );
if ( ! empty( $styles['css'] ) ) {
$attributes['style'] = $styles['css'];
}
return $attributes;
}
// Register the block support.
WP_Block_Supports::get_instance()->register(
'shadow',
array(
'register_attribute' => 'wp_register_shadow_support',
'apply' => 'wp_apply_shadow_support',
)
);

View File

@@ -10,6 +10,7 @@
* Registers the style and typography block attributes for block types that support it.
*
* @since 5.6.0
* @since 6.3.0 Added support for text-columns.
* @access private
*
* @param WP_Block_Type $block_type Block Type.
@@ -30,6 +31,7 @@ function wp_register_typography_support( $block_type ) {
$has_font_weight_support = _wp_array_get( $typography_supports, array( '__experimentalFontWeight' ), false );
$has_letter_spacing_support = _wp_array_get( $typography_supports, array( '__experimentalLetterSpacing' ), false );
$has_line_height_support = _wp_array_get( $typography_supports, array( 'lineHeight' ), false );
$has_text_columns_support = _wp_array_get( $typography_supports, array( 'textColumns' ), false );
$has_text_decoration_support = _wp_array_get( $typography_supports, array( '__experimentalTextDecoration' ), false );
$has_text_transform_support = _wp_array_get( $typography_supports, array( '__experimentalTextTransform' ), false );
@@ -39,6 +41,7 @@ function wp_register_typography_support( $block_type ) {
|| $has_font_weight_support
|| $has_letter_spacing_support
|| $has_line_height_support
|| $has_text_columns_support
|| $has_text_decoration_support
|| $has_text_transform_support;
@@ -72,6 +75,7 @@ function wp_register_typography_support( $block_type ) {
*
* @since 5.6.0
* @since 6.1.0 Used the style engine to generate CSS and classnames.
* @since 6.3.0 Added support for text-columns.
* @access private
*
* @param WP_Block_Type $block_type Block type.
@@ -98,6 +102,7 @@ function wp_apply_typography_support( $block_type, $block_attributes ) {
$has_font_weight_support = _wp_array_get( $typography_supports, array( '__experimentalFontWeight' ), false );
$has_letter_spacing_support = _wp_array_get( $typography_supports, array( '__experimentalLetterSpacing' ), false );
$has_line_height_support = _wp_array_get( $typography_supports, array( 'lineHeight' ), false );
$has_text_columns_support = _wp_array_get( $typography_supports, array( 'textColumns' ), false );
$has_text_decoration_support = _wp_array_get( $typography_supports, array( '__experimentalTextDecoration' ), false );
$has_text_transform_support = _wp_array_get( $typography_supports, array( '__experimentalTextTransform' ), false );
@@ -107,6 +112,7 @@ function wp_apply_typography_support( $block_type, $block_attributes ) {
$should_skip_font_style = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontStyle' );
$should_skip_font_weight = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontWeight' );
$should_skip_line_height = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'lineHeight' );
$should_skip_text_columns = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textColumns' );
$should_skip_text_decoration = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textDecoration' );
$should_skip_text_transform = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textTransform' );
$should_skip_letter_spacing = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'letterSpacing' );
@@ -162,6 +168,10 @@ function wp_apply_typography_support( $block_type, $block_attributes ) {
$typography_block_styles['lineHeight'] = _wp_array_get( $block_attributes, array( 'style', 'typography', 'lineHeight' ) );
}
if ( $has_text_columns_support && ! $should_skip_text_columns && isset( $block_attributes['style']['typography']['textColumns'] ) ) {
$typography_block_styles['textColumns'] = _wp_array_get( $block_attributes, array( 'style', 'typography', 'textColumns' ), null );
}
if (
$has_text_decoration_support &&
! $should_skip_text_decoration &&
@@ -368,6 +378,7 @@ function wp_get_typography_value_and_unit( $raw_value, $options = array() ) {
* width and min/max font sizes.
*
* @since 6.1.0
* @since 6.3.0 Checks for unsupported min/max viewport values that cause invalid clamp values.
* @access private
*
* @param array $args {
@@ -433,6 +444,11 @@ function wp_get_computed_fluid_typography_value( $args = array() ) {
)
);
// Protects against unsupported units in min and max viewport widths.
if ( ! $minimum_viewport_width || ! $maximum_viewport_width ) {
return null;
}
/*
* Build CSS rule.
* Borrowed from https://websemantics.uk/tools/responsive-font-calculator/.
@@ -454,6 +470,7 @@ function wp_get_computed_fluid_typography_value( $args = array() ) {
* @since 6.1.0
* @since 6.1.1 Adjusted rules for min and max font sizes.
* @since 6.2.0 Added 'settings.typography.fluid.minFontSize' support.
* @since 6.3.0 Using layout.wideSize as max viewport width, and logarithmic scale factor to calculate minimum font scale.
*
* @param array $preset {
* Required. fontSizes preset value as seen in theme.json.
@@ -480,7 +497,10 @@ function wp_get_typography_font_size_value( $preset, $should_use_fluid_typograph
}
// Checks if fluid font sizes are activated.
$typography_settings = wp_get_global_settings( array( 'typography' ) );
$global_settings = wp_get_global_settings();
$typography_settings = isset( $global_settings['typography'] ) ? $global_settings['typography'] : array();
$layout_settings = isset( $global_settings['layout'] ) ? $global_settings['layout'] : array();
if (
isset( $typography_settings['fluid'] ) &&
( true === $typography_settings['fluid'] || is_array( $typography_settings['fluid'] ) )
@@ -497,12 +517,14 @@ function wp_get_typography_font_size_value( $preset, $should_use_fluid_typograph
: array();
// Defaults.
$default_maximum_viewport_width = '1600px';
$default_minimum_viewport_width = '768px';
$default_minimum_font_size_factor = 0.75;
$default_scale_factor = 1;
$has_min_font_size = isset( $fluid_settings['minFontSize'] ) && ! empty( wp_get_typography_value_and_unit( $fluid_settings['minFontSize'] ) );
$default_minimum_font_size_limit = $has_min_font_size ? $fluid_settings['minFontSize'] : '14px';
$default_maximum_viewport_width = isset( $layout_settings['wideSize'] ) ? $layout_settings['wideSize'] : '1600px';
$default_minimum_viewport_width = '320px';
$default_minimum_font_size_factor_max = 0.75;
$default_minimum_font_size_factor_min = 0.25;
$default_scale_factor = 1;
$has_min_font_size = isset( $fluid_settings['minFontSize'] ) &&
! empty( wp_get_typography_value_and_unit( $fluid_settings['minFontSize'] ) );
$default_minimum_font_size_limit = $has_min_font_size ? $fluid_settings['minFontSize'] : '14px';
// Font sizes.
$fluid_font_size_settings = isset( $preset['fluid'] ) ? $preset['fluid'] : null;
@@ -557,10 +579,16 @@ function wp_get_typography_font_size_value( $preset, $should_use_fluid_typograph
* the given font size multiplied by the min font size scale factor.
*/
if ( ! $minimum_font_size_raw ) {
$calculated_minimum_font_size = round(
$preferred_size['value'] * $default_minimum_font_size_factor,
3
);
$preferred_font_size_in_px = 'px' === $preferred_size['unit'] ? $preferred_size['value'] : $preferred_size['value'] * 16;
/*
* The scale factor is a multiplier that affects how quickly the curve will move towards the minimum,
* that is, how quickly the size factor reaches 0 given increasing font size values.
* For a - b * log2(), lower values of b will make the curve move towards the minimum faster.
* The scale factor is constrained between min and max values.
*/
$minimum_font_size_factor = min( max( 1 - 0.075 * log( $preferred_font_size_in_px, 2 ), $default_minimum_font_size_factor_min ), $default_minimum_font_size_factor_max );
$calculated_minimum_font_size = round( $preferred_size['value'] * $minimum_font_size_factor, 3 );
// Only use calculated min font size if it's > $minimum_font_size_limit value.
if ( ! empty( $minimum_font_size_limit ) && $calculated_minimum_font_size <= $minimum_font_size_limit['value'] ) {