This commit is contained in:
2024-05-20 15:37:46 +03:00
commit 00b7dbd0b7
10404 changed files with 3285853 additions and 0 deletions

View File

@ -0,0 +1,65 @@
<?php
/**
* Align block support flag.
*
* @package WordPress
* @since 5.6.0
*/
/**
* Registers the align block attribute for block types that support it.
*
* @since 5.6.0
* @access private
*
* @param WP_Block_Type $block_type Block Type.
*/
function wp_register_alignment_support( $block_type ) {
$has_align_support = block_has_support( $block_type, 'align', false );
if ( $has_align_support ) {
if ( ! $block_type->attributes ) {
$block_type->attributes = array();
}
if ( ! array_key_exists( 'align', $block_type->attributes ) ) {
$block_type->attributes['align'] = array(
'type' => 'string',
'enum' => array( 'left', 'center', 'right', 'wide', 'full', '' ),
);
}
}
}
/**
* Adds CSS classes for block alignment to the incoming attributes array.
* This will be applied to the block markup in the front-end.
*
* @since 5.6.0
* @access private
*
* @param WP_Block_Type $block_type Block Type.
* @param array $block_attributes Block attributes.
* @return array Block alignment CSS classes and inline styles.
*/
function wp_apply_alignment_support( $block_type, $block_attributes ) {
$attributes = array();
$has_align_support = block_has_support( $block_type, 'align', false );
if ( $has_align_support ) {
$has_block_alignment = array_key_exists( 'align', $block_attributes );
if ( $has_block_alignment ) {
$attributes['class'] = sprintf( 'align%s', $block_attributes['align'] );
}
}
return $attributes;
}
// Register the block support.
WP_Block_Supports::get_instance()->register(
'align',
array(
'register_attribute' => 'wp_register_alignment_support',
'apply' => 'wp_apply_alignment_support',
)
);

View File

@ -0,0 +1,138 @@
<?php
/**
* Background block support flag.
*
* @package WordPress
* @since 6.4.0
*/
/**
* Registers the style block attribute for block types that support it.
*
* @since 6.4.0
* @access private
*
* @param WP_Block_Type $block_type Block Type.
*/
function wp_register_background_support( $block_type ) {
// Setup attributes and styles within that if needed.
if ( ! $block_type->attributes ) {
$block_type->attributes = array();
}
// Check for existing style attribute definition e.g. from block.json.
if ( array_key_exists( 'style', $block_type->attributes ) ) {
return;
}
$has_background_support = block_has_support( $block_type, array( 'background' ), false );
if ( $has_background_support ) {
$block_type->attributes['style'] = array(
'type' => 'object',
);
}
}
/**
* Renders the background styles to the block wrapper.
* This block support uses the `render_block` hook to ensure that
* it is also applied to non-server-rendered blocks.
*
* @since 6.4.0
* @since 6.5.0 Added support for `backgroundPosition` and `backgroundRepeat` output.
* @access private
*
* @param string $block_content Rendered block content.
* @param array $block Block object.
* @return string Filtered block content.
*/
function wp_render_background_support( $block_content, $block ) {
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
$block_attributes = ( isset( $block['attrs'] ) && is_array( $block['attrs'] ) ) ? $block['attrs'] : array();
$has_background_image_support = block_has_support( $block_type, array( 'background', 'backgroundImage' ), false );
if (
! $has_background_image_support ||
wp_should_skip_block_supports_serialization( $block_type, 'background', 'backgroundImage' )
) {
return $block_content;
}
$background_image_source = isset( $block_attributes['style']['background']['backgroundImage']['source'] )
? $block_attributes['style']['background']['backgroundImage']['source']
: null;
$background_image_url = isset( $block_attributes['style']['background']['backgroundImage']['url'] )
? $block_attributes['style']['background']['backgroundImage']['url']
: null;
if ( ! $background_image_source && ! $background_image_url ) {
return $block_content;
}
$background_size = isset( $block_attributes['style']['background']['backgroundSize'] )
? $block_attributes['style']['background']['backgroundSize']
: 'cover';
$background_position = isset( $block_attributes['style']['background']['backgroundPosition'] )
? $block_attributes['style']['background']['backgroundPosition']
: null;
$background_repeat = isset( $block_attributes['style']['background']['backgroundRepeat'] )
? $block_attributes['style']['background']['backgroundRepeat']
: null;
$background_block_styles = array();
if (
'file' === $background_image_source &&
$background_image_url
) {
// Set file based background URL.
$background_block_styles['backgroundImage']['url'] = $background_image_url;
// Only output the background size and repeat when an image url is set.
$background_block_styles['backgroundSize'] = $background_size;
$background_block_styles['backgroundRepeat'] = $background_repeat;
$background_block_styles['backgroundPosition'] = $background_position;
// If the background size is set to `contain` and no position is set, set the position to `center`.
if ( 'contain' === $background_size && ! isset( $background_position ) ) {
$background_block_styles['backgroundPosition'] = 'center';
}
}
$styles = wp_style_engine_get_styles( array( 'background' => $background_block_styles ) );
if ( ! empty( $styles['css'] ) ) {
// Inject background styles to the first element, presuming it's the wrapper, if it exists.
$tags = new WP_HTML_Tag_Processor( $block_content );
if ( $tags->next_tag() ) {
$existing_style = $tags->get_attribute( 'style' );
$updated_style = '';
if ( ! empty( $existing_style ) ) {
$updated_style = $existing_style;
if ( ! str_ends_with( $existing_style, ';' ) ) {
$updated_style .= ';';
}
}
$updated_style .= $styles['css'];
$tags->set_attribute( 'style', $updated_style );
$tags->add_class( 'has-background' );
}
return $tags->get_updated_html();
}
return $block_content;
}
// Register the block support.
WP_Block_Supports::get_instance()->register(
'background',
array(
'register_attribute' => 'wp_register_background_support',
)
);
add_filter( 'render_block', 'wp_render_background_support', 10, 2 );

View File

@ -0,0 +1,176 @@
<?php
/**
* Border block support flag.
*
* @package WordPress
* @since 5.8.0
*/
/**
* Registers the style attribute used by the border feature if needed for block
* types that support borders.
*
* @since 5.8.0
* @since 6.1.0 Improved conditional blocks optimization.
* @access private
*
* @param WP_Block_Type $block_type Block Type.
*/
function wp_register_border_support( $block_type ) {
// Setup attributes and styles within that if needed.
if ( ! $block_type->attributes ) {
$block_type->attributes = array();
}
if ( block_has_support( $block_type, '__experimentalBorder' ) && ! array_key_exists( 'style', $block_type->attributes ) ) {
$block_type->attributes['style'] = array(
'type' => 'object',
);
}
if ( wp_has_border_feature_support( $block_type, 'color' ) && ! array_key_exists( 'borderColor', $block_type->attributes ) ) {
$block_type->attributes['borderColor'] = array(
'type' => 'string',
);
}
}
/**
* Adds CSS classes and inline styles for border styles to the incoming
* attributes array. This will be applied to the block markup in the front-end.
*
* @since 5.8.0
* @since 6.1.0 Implemented the style engine to generate CSS and classnames.
* @access private
*
* @param WP_Block_Type $block_type Block type.
* @param array $block_attributes Block attributes.
* @return array Border CSS classes and inline styles.
*/
function wp_apply_border_support( $block_type, $block_attributes ) {
if ( wp_should_skip_block_supports_serialization( $block_type, 'border' ) ) {
return array();
}
$border_block_styles = array();
$has_border_color_support = wp_has_border_feature_support( $block_type, 'color' );
$has_border_width_support = wp_has_border_feature_support( $block_type, 'width' );
// Border radius.
if (
wp_has_border_feature_support( $block_type, 'radius' ) &&
isset( $block_attributes['style']['border']['radius'] ) &&
! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'radius' )
) {
$border_radius = $block_attributes['style']['border']['radius'];
if ( is_numeric( $border_radius ) ) {
$border_radius .= 'px';
}
$border_block_styles['radius'] = $border_radius;
}
// Border style.
if (
wp_has_border_feature_support( $block_type, 'style' ) &&
isset( $block_attributes['style']['border']['style'] ) &&
! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'style' )
) {
$border_block_styles['style'] = $block_attributes['style']['border']['style'];
}
// Border width.
if (
$has_border_width_support &&
isset( $block_attributes['style']['border']['width'] ) &&
! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'width' )
) {
$border_width = $block_attributes['style']['border']['width'];
// This check handles original unitless implementation.
if ( is_numeric( $border_width ) ) {
$border_width .= 'px';
}
$border_block_styles['width'] = $border_width;
}
// Border color.
if (
$has_border_color_support &&
! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'color' )
) {
$preset_border_color = array_key_exists( 'borderColor', $block_attributes ) ? "var:preset|color|{$block_attributes['borderColor']}" : null;
$custom_border_color = isset( $block_attributes['style']['border']['color'] ) ? $block_attributes['style']['border']['color'] : null;
$border_block_styles['color'] = $preset_border_color ? $preset_border_color : $custom_border_color;
}
// Generates styles for individual border sides.
if ( $has_border_color_support || $has_border_width_support ) {
foreach ( array( 'top', 'right', 'bottom', 'left' ) as $side ) {
$border = isset( $block_attributes['style']['border'][ $side ] ) ? $block_attributes['style']['border'][ $side ] : null;
$border_side_values = array(
'width' => isset( $border['width'] ) && ! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'width' ) ? $border['width'] : null,
'color' => isset( $border['color'] ) && ! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'color' ) ? $border['color'] : null,
'style' => isset( $border['style'] ) && ! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'style' ) ? $border['style'] : null,
);
$border_block_styles[ $side ] = $border_side_values;
}
}
// Collect classes and styles.
$attributes = array();
$styles = wp_style_engine_get_styles( array( 'border' => $border_block_styles ) );
if ( ! empty( $styles['classnames'] ) ) {
$attributes['class'] = $styles['classnames'];
}
if ( ! empty( $styles['css'] ) ) {
$attributes['style'] = $styles['css'];
}
return $attributes;
}
/**
* Checks whether the current block type supports the border feature requested.
*
* If the `__experimentalBorder` support flag is a boolean `true` all border
* support features are available. Otherwise, the specific feature's support
* flag nested under `experimentalBorder` must be enabled for the feature
* to be opted into.
*
* @since 5.8.0
* @access private
*
* @param WP_Block_Type $block_type Block type to check for support.
* @param string $feature Name of the feature to check support for.
* @param mixed $default_value Fallback value for feature support, defaults to false.
* @return bool Whether the feature is supported.
*/
function wp_has_border_feature_support( $block_type, $feature, $default_value = false ) {
// Check if all border support features have been opted into via `"__experimentalBorder": true`.
if ( $block_type instanceof WP_Block_Type ) {
$block_type_supports_border = isset( $block_type->supports['__experimentalBorder'] )
? $block_type->supports['__experimentalBorder']
: $default_value;
if ( true === $block_type_supports_border ) {
return true;
}
}
// Check if the specific feature has been opted into individually
// via nested flag under `__experimentalBorder`.
return block_has_support( $block_type, array( '__experimentalBorder', $feature ), $default_value );
}
// Register the block support.
WP_Block_Supports::get_instance()->register(
'border',
array(
'register_attribute' => 'wp_register_border_support',
'apply' => 'wp_apply_border_support',
)
);

View File

@ -0,0 +1,144 @@
<?php
/**
* Colors block support flag.
*
* @package WordPress
* @since 5.6.0
*/
/**
* Registers the style and colors block attributes for block types that support it.
*
* @since 5.6.0
* @since 6.1.0 Improved $color_support assignment optimization.
* @access private
*
* @param WP_Block_Type $block_type Block Type.
*/
function wp_register_colors_support( $block_type ) {
$color_support = false;
if ( $block_type instanceof WP_Block_Type ) {
$color_support = isset( $block_type->supports['color'] ) ? $block_type->supports['color'] : false;
}
$has_text_colors_support = true === $color_support ||
( isset( $color_support['text'] ) && $color_support['text'] ) ||
( is_array( $color_support ) && ! isset( $color_support['text'] ) );
$has_background_colors_support = true === $color_support ||
( isset( $color_support['background'] ) && $color_support['background'] ) ||
( is_array( $color_support ) && ! isset( $color_support['background'] ) );
$has_gradients_support = isset( $color_support['gradients'] ) ? $color_support['gradients'] : false;
$has_link_colors_support = isset( $color_support['link'] ) ? $color_support['link'] : false;
$has_button_colors_support = isset( $color_support['button'] ) ? $color_support['button'] : false;
$has_heading_colors_support = isset( $color_support['heading'] ) ? $color_support['heading'] : false;
$has_color_support = $has_text_colors_support ||
$has_background_colors_support ||
$has_gradients_support ||
$has_link_colors_support ||
$has_button_colors_support ||
$has_heading_colors_support;
if ( ! $block_type->attributes ) {
$block_type->attributes = array();
}
if ( $has_color_support && ! array_key_exists( 'style', $block_type->attributes ) ) {
$block_type->attributes['style'] = array(
'type' => 'object',
);
}
if ( $has_background_colors_support && ! array_key_exists( 'backgroundColor', $block_type->attributes ) ) {
$block_type->attributes['backgroundColor'] = array(
'type' => 'string',
);
}
if ( $has_text_colors_support && ! array_key_exists( 'textColor', $block_type->attributes ) ) {
$block_type->attributes['textColor'] = array(
'type' => 'string',
);
}
if ( $has_gradients_support && ! array_key_exists( 'gradient', $block_type->attributes ) ) {
$block_type->attributes['gradient'] = array(
'type' => 'string',
);
}
}
/**
* Adds CSS classes and inline styles for colors to the incoming attributes array.
* This will be applied to the block markup in the front-end.
*
* @since 5.6.0
* @since 6.1.0 Implemented the style engine to generate CSS and classnames.
* @access private
*
* @param WP_Block_Type $block_type Block type.
* @param array $block_attributes Block attributes.
*
* @return array Colors CSS classes and inline styles.
*/
function wp_apply_colors_support( $block_type, $block_attributes ) {
$color_support = isset( $block_type->supports['color'] ) ? $block_type->supports['color'] : false;
if (
is_array( $color_support ) &&
wp_should_skip_block_supports_serialization( $block_type, 'color' )
) {
return array();
}
$has_text_colors_support = true === $color_support ||
( isset( $color_support['text'] ) && $color_support['text'] ) ||
( is_array( $color_support ) && ! isset( $color_support['text'] ) );
$has_background_colors_support = true === $color_support ||
( isset( $color_support['background'] ) && $color_support['background'] ) ||
( is_array( $color_support ) && ! isset( $color_support['background'] ) );
$has_gradients_support = isset( $color_support['gradients'] ) ? $color_support['gradients'] : false;
$color_block_styles = array();
// Text colors.
if ( $has_text_colors_support && ! wp_should_skip_block_supports_serialization( $block_type, 'color', 'text' ) ) {
$preset_text_color = array_key_exists( 'textColor', $block_attributes ) ? "var:preset|color|{$block_attributes['textColor']}" : null;
$custom_text_color = isset( $block_attributes['style']['color']['text'] ) ? $block_attributes['style']['color']['text'] : null;
$color_block_styles['text'] = $preset_text_color ? $preset_text_color : $custom_text_color;
}
// Background colors.
if ( $has_background_colors_support && ! wp_should_skip_block_supports_serialization( $block_type, 'color', 'background' ) ) {
$preset_background_color = array_key_exists( 'backgroundColor', $block_attributes ) ? "var:preset|color|{$block_attributes['backgroundColor']}" : null;
$custom_background_color = isset( $block_attributes['style']['color']['background'] ) ? $block_attributes['style']['color']['background'] : null;
$color_block_styles['background'] = $preset_background_color ? $preset_background_color : $custom_background_color;
}
// Gradients.
if ( $has_gradients_support && ! wp_should_skip_block_supports_serialization( $block_type, 'color', 'gradients' ) ) {
$preset_gradient_color = array_key_exists( 'gradient', $block_attributes ) ? "var:preset|gradient|{$block_attributes['gradient']}" : null;
$custom_gradient_color = isset( $block_attributes['style']['color']['gradient'] ) ? $block_attributes['style']['color']['gradient'] : null;
$color_block_styles['gradient'] = $preset_gradient_color ? $preset_gradient_color : $custom_gradient_color;
}
$attributes = array();
$styles = wp_style_engine_get_styles( array( 'color' => $color_block_styles ), array( 'convert_vars_to_classnames' => true ) );
if ( ! empty( $styles['classnames'] ) ) {
$attributes['class'] = $styles['classnames'];
}
if ( ! empty( $styles['css'] ) ) {
$attributes['style'] = $styles['css'];
}
return $attributes;
}
// Register the block support.
WP_Block_Supports::get_instance()->register(
'colors',
array(
'register_attribute' => 'wp_register_colors_support',
'apply' => 'wp_apply_colors_support',
)
);

View File

@ -0,0 +1,65 @@
<?php
/**
* Custom classname block support flag.
*
* @package WordPress
* @since 5.6.0
*/
/**
* Registers the custom classname block attribute for block types that support it.
*
* @since 5.6.0
* @access private
*
* @param WP_Block_Type $block_type Block Type.
*/
function wp_register_custom_classname_support( $block_type ) {
$has_custom_classname_support = block_has_support( $block_type, 'customClassName', true );
if ( $has_custom_classname_support ) {
if ( ! $block_type->attributes ) {
$block_type->attributes = array();
}
if ( ! array_key_exists( 'className', $block_type->attributes ) ) {
$block_type->attributes['className'] = array(
'type' => 'string',
);
}
}
}
/**
* Adds the custom classnames to the output.
*
* @since 5.6.0
* @access private
*
* @param WP_Block_Type $block_type Block Type.
* @param array $block_attributes Block attributes.
*
* @return array Block CSS classes and inline styles.
*/
function wp_apply_custom_classname_support( $block_type, $block_attributes ) {
$has_custom_classname_support = block_has_support( $block_type, 'customClassName', true );
$attributes = array();
if ( $has_custom_classname_support ) {
$has_custom_classnames = array_key_exists( 'className', $block_attributes );
if ( $has_custom_classnames ) {
$attributes['class'] = $block_attributes['className'];
}
}
return $attributes;
}
// Register the block support.
WP_Block_Supports::get_instance()->register(
'custom-classname',
array(
'register_attribute' => 'wp_register_custom_classname_support',
'apply' => 'wp_apply_custom_classname_support',
)
);

View File

@ -0,0 +1,173 @@
<?php
/**
* Dimensions block support flag.
*
* This does not include the `spacing` block support even though that visually
* appears under the "Dimensions" panel in the editor. It remains in its
* original `spacing.php` file for compatibility with core.
*
* @package WordPress
* @since 5.9.0
*/
/**
* Registers the style block attribute for block types that support it.
*
* @since 5.9.0
* @access private
*
* @param WP_Block_Type $block_type Block Type.
*/
function wp_register_dimensions_support( $block_type ) {
// Setup attributes and styles within that if needed.
if ( ! $block_type->attributes ) {
$block_type->attributes = array();
}
// Check for existing style attribute definition e.g. from block.json.
if ( array_key_exists( 'style', $block_type->attributes ) ) {
return;
}
$has_dimensions_support = block_has_support( $block_type, 'dimensions', false );
if ( $has_dimensions_support ) {
$block_type->attributes['style'] = array(
'type' => 'object',
);
}
}
/**
* Adds CSS classes for block dimensions to the incoming attributes array.
* This will be applied to the block markup in the front-end.
*
* @since 5.9.0
* @since 6.2.0 Added `minHeight` support.
* @access private
*
* @param WP_Block_Type $block_type Block Type.
* @param array $block_attributes Block attributes.
* @return array Block dimensions CSS classes and inline styles.
*/
function wp_apply_dimensions_support( $block_type, $block_attributes ) {
if ( wp_should_skip_block_supports_serialization( $block_type, 'dimensions' ) ) {
return array();
}
$attributes = array();
// Width support to be added in near future.
$has_min_height_support = block_has_support( $block_type, array( 'dimensions', 'minHeight' ), false );
$block_styles = isset( $block_attributes['style'] ) ? $block_attributes['style'] : null;
if ( ! $block_styles ) {
return $attributes;
}
$skip_min_height = wp_should_skip_block_supports_serialization( $block_type, 'dimensions', 'minHeight' );
$dimensions_block_styles = array();
$dimensions_block_styles['minHeight'] = null;
if ( $has_min_height_support && ! $skip_min_height ) {
$dimensions_block_styles['minHeight'] = isset( $block_styles['dimensions']['minHeight'] )
? $block_styles['dimensions']['minHeight']
: null;
}
$styles = wp_style_engine_get_styles( array( 'dimensions' => $dimensions_block_styles ) );
if ( ! empty( $styles['css'] ) ) {
$attributes['style'] = $styles['css'];
}
return $attributes;
}
/**
* Renders server-side dimensions styles to the block wrapper.
* This block support uses the `render_block` hook to ensure that
* it is also applied to non-server-rendered blocks.
*
* @since 6.5.0
* @access private
*
* @param string $block_content Rendered block content.
* @param array $block Block object.
* @return string Filtered block content.
*/
function wp_render_dimensions_support( $block_content, $block ) {
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
$block_attributes = ( isset( $block['attrs'] ) && is_array( $block['attrs'] ) ) ? $block['attrs'] : array();
$has_aspect_ratio_support = block_has_support( $block_type, array( 'dimensions', 'aspectRatio' ), false );
if (
! $has_aspect_ratio_support ||
wp_should_skip_block_supports_serialization( $block_type, 'dimensions', 'aspectRatio' )
) {
return $block_content;
}
$dimensions_block_styles = array();
$dimensions_block_styles['aspectRatio'] = $block_attributes['style']['dimensions']['aspectRatio'] ?? null;
// To ensure the aspect ratio does not get overridden by `minHeight` unset any existing rule.
if (
isset( $dimensions_block_styles['aspectRatio'] )
) {
$dimensions_block_styles['minHeight'] = 'unset';
} elseif (
isset( $block_attributes['style']['dimensions']['minHeight'] ) ||
isset( $block_attributes['minHeight'] )
) {
$dimensions_block_styles['aspectRatio'] = 'unset';
}
$styles = wp_style_engine_get_styles( array( 'dimensions' => $dimensions_block_styles ) );
if ( ! empty( $styles['css'] ) ) {
// Inject dimensions styles to the first element, presuming it's the wrapper, if it exists.
$tags = new WP_HTML_Tag_Processor( $block_content );
if ( $tags->next_tag() ) {
$existing_style = $tags->get_attribute( 'style' );
$updated_style = '';
if ( ! empty( $existing_style ) ) {
$updated_style = $existing_style;
if ( ! str_ends_with( $existing_style, ';' ) ) {
$updated_style .= ';';
}
}
$updated_style .= $styles['css'];
$tags->set_attribute( 'style', $updated_style );
if ( ! empty( $styles['classnames'] ) ) {
foreach ( explode( ' ', $styles['classnames'] ) as $class_name ) {
if (
str_contains( $class_name, 'aspect-ratio' ) &&
! isset( $block_attributes['style']['dimensions']['aspectRatio'] )
) {
continue;
}
$tags->add_class( $class_name );
}
}
}
return $tags->get_updated_html();
}
return $block_content;
}
add_filter( 'render_block', 'wp_render_dimensions_support', 10, 2 );
// Register the block support.
WP_Block_Supports::get_instance()->register(
'dimensions',
array(
'register_attribute' => 'wp_register_dimensions_support',
'apply' => 'wp_apply_dimensions_support',
)
);

View File

@ -0,0 +1,59 @@
<?php
/**
* Duotone block support flag.
*
* Parts of this source were derived and modified from TinyColor,
* released under the MIT license.
*
* https://github.com/bgrins/TinyColor
*
* Copyright (c), Brian Grinstead, http://briangrinstead.com
*
* Permission is hereby granted, free of charge, to any person obtaining
* a copy of this software and associated documentation files (the
* "Software"), to deal in the Software without restriction, including
* without limitation the rights to use, copy, modify, merge, publish,
* distribute, sublicense, and/or sell copies of the Software, and to
* permit persons to whom the Software is furnished to do so, subject to
* the following conditions:
*
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
* MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
* LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
* WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*
* @package WordPress
* @since 5.8.0
*/
// Register the block support.
WP_Block_Supports::get_instance()->register(
'duotone',
array(
'register_attribute' => array( 'WP_Duotone', 'register_duotone_support' ),
)
);
// 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

@ -0,0 +1,232 @@
<?php
/**
* Elements styles block support.
*
* @package WordPress
* @since 5.8.0
*/
/**
* Gets the elements class names.
*
* @since 6.0.0
* @access private
*
* @param array $block Block object.
* @return string The unique class name.
*/
function wp_get_elements_class_name( $block ) {
return 'wp-elements-' . md5( serialize( $block ) );
}
/**
* Updates the block content with elements class names.
*
* @since 5.8.0
* @since 6.4.0 Added support for button and heading element styling.
* @access private
*
* @param string $block_content Rendered block content.
* @param array $block Block object.
* @return string Filtered block content.
*/
function wp_render_elements_support( $block_content, $block ) {
if ( ! $block_content || ! isset( $block['attrs']['style']['elements'] ) ) {
return $block_content;
}
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
if ( ! $block_type ) {
return $block_content;
}
$element_color_properties = array(
'button' => array(
'skip' => wp_should_skip_block_supports_serialization( $block_type, 'color', 'button' ),
'paths' => array(
array( 'button', 'color', 'text' ),
array( 'button', 'color', 'background' ),
array( 'button', 'color', 'gradient' ),
),
),
'link' => array(
'skip' => wp_should_skip_block_supports_serialization( $block_type, 'color', 'link' ),
'paths' => array(
array( 'link', 'color', 'text' ),
array( 'link', ':hover', 'color', 'text' ),
),
),
'heading' => array(
'skip' => wp_should_skip_block_supports_serialization( $block_type, 'color', 'heading' ),
'paths' => array(
array( 'heading', 'color', 'text' ),
array( 'heading', 'color', 'background' ),
array( 'heading', 'color', 'gradient' ),
array( 'h1', 'color', 'text' ),
array( 'h1', 'color', 'background' ),
array( 'h1', 'color', 'gradient' ),
array( 'h2', 'color', 'text' ),
array( 'h2', 'color', 'background' ),
array( 'h2', 'color', 'gradient' ),
array( 'h3', 'color', 'text' ),
array( 'h3', 'color', 'background' ),
array( 'h3', 'color', 'gradient' ),
array( 'h4', 'color', 'text' ),
array( 'h4', 'color', 'background' ),
array( 'h4', 'color', 'gradient' ),
array( 'h5', 'color', 'text' ),
array( 'h5', 'color', 'background' ),
array( 'h5', 'color', 'gradient' ),
array( 'h6', 'color', 'text' ),
array( 'h6', 'color', 'background' ),
array( 'h6', 'color', 'gradient' ),
),
),
);
$skip_all_element_color_serialization = $element_color_properties['button']['skip'] &&
$element_color_properties['link']['skip'] &&
$element_color_properties['heading']['skip'];
if ( $skip_all_element_color_serialization ) {
return $block_content;
}
$elements_style_attributes = $block['attrs']['style']['elements'];
foreach ( $element_color_properties as $element_config ) {
if ( $element_config['skip'] ) {
continue;
}
foreach ( $element_config['paths'] as $path ) {
if ( null !== _wp_array_get( $elements_style_attributes, $path, null ) ) {
/*
* It only takes a single custom attribute to require that the custom
* class name be added to the block, so once one is found there's no
* need to continue looking for others.
*
* As is done with the layout hook, this code assumes that the block
* contains a single wrapper and that it's the first element in the
* rendered output. That first element, if it exists, gets the class.
*/
$tags = new WP_HTML_Tag_Processor( $block_content );
if ( $tags->next_tag() ) {
$tags->add_class( wp_get_elements_class_name( $block ) );
}
return $tags->get_updated_html();
}
}
}
// If no custom attributes were found then there's nothing to modify.
return $block_content;
}
/**
* Renders the elements stylesheet.
*
* In the case of nested blocks we want the parent element styles to be rendered before their descendants.
* This solves the issue of an element (e.g.: link color) being styled in both the parent and a descendant:
* we want the descendant style to take priority, and this is done by loading it after, in DOM order.
*
* @since 6.0.0
* @since 6.1.0 Implemented the style engine to generate CSS and classnames.
* @access private
*
* @param string|null $pre_render The pre-rendered content. Default null.
* @param array $block The block being rendered.
* @return null
*/
function wp_render_elements_support_styles( $pre_render, $block ) {
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
$element_block_styles = isset( $block['attrs']['style']['elements'] ) ? $block['attrs']['style']['elements'] : null;
if ( ! $element_block_styles ) {
return null;
}
$skip_link_color_serialization = wp_should_skip_block_supports_serialization( $block_type, 'color', 'link' );
$skip_heading_color_serialization = wp_should_skip_block_supports_serialization( $block_type, 'color', 'heading' );
$skip_button_color_serialization = wp_should_skip_block_supports_serialization( $block_type, 'color', 'button' );
$skips_all_element_color_serialization = $skip_link_color_serialization &&
$skip_heading_color_serialization &&
$skip_button_color_serialization;
if ( $skips_all_element_color_serialization ) {
return null;
}
$class_name = wp_get_elements_class_name( $block );
$element_types = array(
'button' => array(
'selector' => ".$class_name .wp-element-button, .$class_name .wp-block-button__link",
'skip' => $skip_button_color_serialization,
),
'link' => array(
'selector' => ".$class_name a:where(:not(.wp-element-button))",
'hover_selector' => ".$class_name a:where(:not(.wp-element-button)):hover",
'skip' => $skip_link_color_serialization,
),
'heading' => array(
'selector' => ".$class_name h1, .$class_name h2, .$class_name h3, .$class_name h4, .$class_name h5, .$class_name h6",
'skip' => $skip_heading_color_serialization,
'elements' => array( 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ),
),
);
foreach ( $element_types as $element_type => $element_config ) {
if ( $element_config['skip'] ) {
continue;
}
$element_style_object = isset( $element_block_styles[ $element_type ] ) ? $element_block_styles[ $element_type ] : null;
// Process primary element type styles.
if ( $element_style_object ) {
wp_style_engine_get_styles(
$element_style_object,
array(
'selector' => $element_config['selector'],
'context' => 'block-supports',
)
);
if ( isset( $element_style_object[':hover'] ) ) {
wp_style_engine_get_styles(
$element_style_object[':hover'],
array(
'selector' => $element_config['hover_selector'],
'context' => 'block-supports',
)
);
}
}
// Process related elements e.g. h1-h6 for headings.
if ( isset( $element_config['elements'] ) ) {
foreach ( $element_config['elements'] as $element ) {
$element_style_object = isset( $element_block_styles[ $element ] )
? $element_block_styles[ $element ]
: null;
if ( $element_style_object ) {
wp_style_engine_get_styles(
$element_style_object,
array(
'selector' => ".$class_name $element",
'context' => 'block-supports',
)
);
}
}
}
}
return null;
}
add_filter( 'render_block', 'wp_render_elements_support', 10, 2 );
add_filter( 'pre_render_block', 'wp_render_elements_support_styles', 10, 2 );

View File

@ -0,0 +1,71 @@
<?php
/**
* Generated classname block support flag.
*
* @package WordPress
* @since 5.6.0
*/
/**
* Gets the generated classname from a given block name.
*
* @since 5.6.0
*
* @access private
*
* @param string $block_name Block Name.
* @return string Generated classname.
*/
function wp_get_block_default_classname( $block_name ) {
// Generated HTML classes for blocks follow the `wp-block-{name}` nomenclature.
// Blocks provided by WordPress drop the prefixes 'core/' or 'core-' (historically used in 'core-embed/').
$classname = 'wp-block-' . preg_replace(
'/^core-/',
'',
str_replace( '/', '-', $block_name )
);
/**
* Filters the default block className for server rendered blocks.
*
* @since 5.6.0
*
* @param string $class_name The current applied classname.
* @param string $block_name The block name.
*/
$classname = apply_filters( 'block_default_classname', $classname, $block_name );
return $classname;
}
/**
* Adds the generated classnames to the output.
*
* @since 5.6.0
*
* @access private
*
* @param WP_Block_Type $block_type Block Type.
* @return array Block CSS classes and inline styles.
*/
function wp_apply_generated_classname_support( $block_type ) {
$attributes = array();
$has_generated_classname_support = block_has_support( $block_type, 'className', true );
if ( $has_generated_classname_support ) {
$block_classname = wp_get_block_default_classname( $block_type->name );
if ( $block_classname ) {
$attributes['class'] = $block_classname;
}
}
return $attributes;
}
// Register the block support.
WP_Block_Supports::get_instance()->register(
'generated-classname',
array(
'apply' => 'wp_apply_generated_classname_support',
)
);

View File

@ -0,0 +1,993 @@
<?php
/**
* Layout block support flag.
*
* @package WordPress
* @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, 'layout', false ) || block_has_support( $block_type, '__experimentalLayout', false );
if ( $support_layout ) {
if ( ! $block_type->attributes ) {
$block_type->attributes = array();
}
if ( ! array_key_exists( 'layout', $block_type->attributes ) ) {
$block_type->attributes['layout'] = array(
'type' => 'object',
);
}
}
}
/**
* Generates the CSS corresponding to the provided layout.
*
* @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.
* @param array $layout Layout object. The one that is passed has already checked
* the existence of default block layout.
* @param bool $has_block_gap_support Optional. Whether the theme has support for the block gap. Default false.
* @param string|string[]|null $gap_value Optional. The block gap value to apply. Default null.
* @param bool $should_skip_gap_serialization Optional. Whether to skip applying the user-defined value set in the editor. Default false.
* @param string $fallback_gap_value Optional. The block gap value to apply. Default '0.5em'.
* @param array|null $block_spacing Optional. Custom spacing set on the block. Default null.
* @return string CSS styles on success. Else, empty string.
*/
function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null, $should_skip_gap_serialization = false, $fallback_gap_value = '0.5em', $block_spacing = null ) {
$layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default';
$layout_styles = array();
if ( 'default' === $layout_type ) {
if ( $has_block_gap_support ) {
if ( is_array( $gap_value ) ) {
$gap_value = isset( $gap_value['top'] ) ? $gap_value['top'] : null;
}
if ( null !== $gap_value && ! $should_skip_gap_serialization ) {
// Get spacing CSS variable from preset value if provided.
if ( is_string( $gap_value ) && str_contains( $gap_value, 'var:preset|spacing|' ) ) {
$index_to_splice = strrpos( $gap_value, '|' ) + 1;
$slug = _wp_to_kebab_case( substr( $gap_value, $index_to_splice ) );
$gap_value = "var(--wp--preset--spacing--$slug)";
}
array_push(
$layout_styles,
array(
'selector' => "$selector > *",
'declarations' => array(
'margin-block-start' => '0',
'margin-block-end' => '0',
),
),
array(
'selector' => "$selector$selector > * + *",
'declarations' => array(
'margin-block-start' => $gap_value,
'margin-block-end' => '0',
),
)
);
}
}
} elseif ( 'constrained' === $layout_type ) {
$content_size = isset( $layout['contentSize'] ) ? $layout['contentSize'] : '';
$wide_size = isset( $layout['wideSize'] ) ? $layout['wideSize'] : '';
$justify_content = isset( $layout['justifyContent'] ) ? $layout['justifyContent'] : 'center';
$all_max_width_value = $content_size ? $content_size : $wide_size;
$wide_max_width_value = $wide_size ? $wide_size : $content_size;
// Make sure there is a single CSS rule, and all tags are stripped for security.
$all_max_width_value = safecss_filter_attr( explode( ';', $all_max_width_value )[0] );
$wide_max_width_value = safecss_filter_attr( explode( ';', $wide_max_width_value )[0] );
$margin_left = 'left' === $justify_content ? '0 !important' : 'auto !important';
$margin_right = 'right' === $justify_content ? '0 !important' : 'auto !important';
if ( $content_size || $wide_size ) {
array_push(
$layout_styles,
array(
'selector' => "$selector > :where(:not(.alignleft):not(.alignright):not(.alignfull))",
'declarations' => array(
'max-width' => $all_max_width_value,
'margin-left' => $margin_left,
'margin-right' => $margin_right,
),
),
array(
'selector' => "$selector > .alignwide",
'declarations' => array( 'max-width' => $wide_max_width_value ),
),
array(
'selector' => "$selector .alignfull",
'declarations' => array( 'max-width' => 'none' ),
)
);
if ( isset( $block_spacing ) ) {
$block_spacing_values = wp_style_engine_get_styles(
array(
'spacing' => $block_spacing,
)
);
/*
* Handle negative margins for alignfull children of blocks with custom padding set.
* They're added separately because padding might only be set on one side.
*/
if ( isset( $block_spacing_values['declarations']['padding-right'] ) ) {
$padding_right = $block_spacing_values['declarations']['padding-right'];
$layout_styles[] = array(
'selector' => "$selector > .alignfull",
'declarations' => array( 'margin-right' => "calc($padding_right * -1)" ),
);
}
if ( isset( $block_spacing_values['declarations']['padding-left'] ) ) {
$padding_left = $block_spacing_values['declarations']['padding-left'];
$layout_styles[] = array(
'selector' => "$selector > .alignfull",
'declarations' => array( 'margin-left' => "calc($padding_left * -1)" ),
);
}
}
}
if ( 'left' === $justify_content ) {
$layout_styles[] = array(
'selector' => "$selector > :where(:not(.alignleft):not(.alignright):not(.alignfull))",
'declarations' => array( 'margin-left' => '0 !important' ),
);
}
if ( 'right' === $justify_content ) {
$layout_styles[] = array(
'selector' => "$selector > :where(:not(.alignleft):not(.alignright):not(.alignfull))",
'declarations' => array( 'margin-right' => '0 !important' ),
);
}
if ( $has_block_gap_support ) {
if ( is_array( $gap_value ) ) {
$gap_value = isset( $gap_value['top'] ) ? $gap_value['top'] : null;
}
if ( null !== $gap_value && ! $should_skip_gap_serialization ) {
// Get spacing CSS variable from preset value if provided.
if ( is_string( $gap_value ) && str_contains( $gap_value, 'var:preset|spacing|' ) ) {
$index_to_splice = strrpos( $gap_value, '|' ) + 1;
$slug = _wp_to_kebab_case( substr( $gap_value, $index_to_splice ) );
$gap_value = "var(--wp--preset--spacing--$slug)";
}
array_push(
$layout_styles,
array(
'selector' => "$selector > *",
'declarations' => array(
'margin-block-start' => '0',
'margin-block-end' => '0',
),
),
array(
'selector' => "$selector$selector > * + *",
'declarations' => array(
'margin-block-start' => $gap_value,
'margin-block-end' => '0',
),
)
);
}
}
} elseif ( 'flex' === $layout_type ) {
$layout_orientation = isset( $layout['orientation'] ) ? $layout['orientation'] : 'horizontal';
$justify_content_options = array(
'left' => 'flex-start',
'right' => 'flex-end',
'center' => 'center',
);
$vertical_alignment_options = array(
'top' => 'flex-start',
'center' => 'center',
'bottom' => 'flex-end',
);
if ( 'horizontal' === $layout_orientation ) {
$justify_content_options += array( 'space-between' => 'space-between' );
$vertical_alignment_options += array( 'stretch' => 'stretch' );
} else {
$justify_content_options += array( 'stretch' => 'stretch' );
$vertical_alignment_options += array( 'space-between' => 'space-between' );
}
if ( ! empty( $layout['flexWrap'] ) && 'nowrap' === $layout['flexWrap'] ) {
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'flex-wrap' => 'nowrap' ),
);
}
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 = $gap_value;
if ( is_array( $gap_value ) ) {
$process_value = isset( $gap_value[ $gap_side ] ) ? $gap_value[ $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 ( 'horizontal' === $layout_orientation ) {
/*
* Add this style only if is not empty for backwards compatibility,
* since we intend to convert blocks that had flex layout implemented
* by custom css.
*/
if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) {
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'justify-content' => $justify_content_options[ $layout['justifyContent'] ] ),
);
}
if ( ! empty( $layout['verticalAlignment'] ) && array_key_exists( $layout['verticalAlignment'], $vertical_alignment_options ) ) {
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'align-items' => $vertical_alignment_options[ $layout['verticalAlignment'] ] ),
);
}
} else {
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'flex-direction' => 'column' ),
);
if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) {
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'align-items' => $justify_content_options[ $layout['justifyContent'] ] ),
);
} else {
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'align-items' => 'flex-start' ),
);
}
if ( ! empty( $layout['verticalAlignment'] ) && array_key_exists( $layout['verticalAlignment'], $vertical_alignment_options ) ) {
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'justify-content' => $vertical_alignment_options[ $layout['verticalAlignment'] ] ),
);
}
}
} 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 = $gap_value;
if ( is_array( $gap_value ) ) {
$process_value = isset( $gap_value[ $gap_side ] ) ? $gap_value[ $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 ) ) {
/*
* Add to the style engine store to enqueue and render layout styles.
* Return compiled layout styles to retain backwards compatibility.
* Since https://github.com/WordPress/gutenberg/pull/42452,
* wp_enqueue_block_support_styles is no longer called in this block supports file.
*/
return wp_style_engine_get_stylesheet_from_css_rules(
$layout_styles,
array(
'context' => 'block-supports',
'prettify' => false,
)
);
}
return '';
}
/**
* 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.
* @param array $block Block object.
* @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'] );
$block_supports_layout = block_has_support( $block_type, 'layout', false ) || block_has_support( $block_type, '__experimentalLayout', false );
$layout_from_parent = isset( $block['attrs']['style']['layout']['selfStretch'] ) ? $block['attrs']['style']['layout']['selfStretch'] : null;
if ( ! $block_supports_layout && ! $layout_from_parent ) {
return $block_content;
}
$outer_class_names = array();
if ( 'fixed' === $layout_from_parent || 'fill' === $layout_from_parent ) {
$container_content_class = wp_unique_id( 'wp-container-content-' );
$child_layout_styles = array();
if ( 'fixed' === $layout_from_parent && isset( $block['attrs']['style']['layout']['flexSize'] ) ) {
$child_layout_styles[] = array(
'selector' => ".$container_content_class",
'declarations' => array(
'flex-basis' => $block['attrs']['style']['layout']['flexSize'],
'box-sizing' => 'border-box',
),
);
} elseif ( 'fill' === $layout_from_parent ) {
$child_layout_styles[] = array(
'selector' => ".$container_content_class",
'declarations' => array(
'flex-grow' => '1',
),
);
}
wp_style_engine_get_stylesheet_from_css_rules(
$child_layout_styles,
array(
'context' => 'block-supports',
'prettify' => false,
)
);
$outer_class_names[] = $container_content_class;
}
// Prep the processor for modifying the block output.
$processor = new WP_HTML_Tag_Processor( $block_content );
// Having no tags implies there are no tags onto which to add class names.
if ( ! $processor->next_tag() ) {
return $block_content;
}
/*
* A block may not support layout but still be affected by a parent block's layout.
*
* In these cases add the appropriate class names and then return early; there's
* no need to investigate on this block whether additional layout constraints apply.
*/
if ( ! $block_supports_layout && ! empty( $outer_class_names ) ) {
foreach ( $outer_class_names as $class_name ) {
$processor->add_class( $class_name );
}
return $processor->get_updated_html();
} elseif ( ! $block_supports_layout ) {
// Ensure layout classnames are not injected if there is no layout support.
return $block_content;
}
$global_settings = wp_get_global_settings();
$fallback_layout = isset( $block_type->supports['layout']['default'] )
? $block_type->supports['layout']['default']
: array();
if ( empty( $fallback_layout ) ) {
$fallback_layout = isset( $block_type->supports['__experimentalLayout']['default'] )
? $block_type->supports['__experimentalLayout']['default']
: array();
}
$used_layout = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : $fallback_layout;
$class_names = array();
$layout_definitions = wp_get_layout_definitions();
/*
* Uses an incremental ID that is independent per prefix to make sure that
* rendering different numbers of blocks doesn't affect the IDs of other
* blocks. Makes the CSS class names stable across paginations
* for features like the enhanced pagination of the Query block.
*/
$container_class = wp_unique_prefixed_id(
'wp-container-' . sanitize_title( $block['blockName'] ) . '-is-layout-'
);
// Set the correct layout type for blocks using legacy content width.
if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] || isset( $used_layout['contentSize'] ) && $used_layout['contentSize'] ) {
$used_layout['type'] = 'constrained';
}
$root_padding_aware_alignments = isset( $global_settings['useRootPaddingAwareAlignments'] )
? $global_settings['useRootPaddingAwareAlignments']
: false;
if (
$root_padding_aware_alignments &&
isset( $used_layout['type'] ) &&
'constrained' === $used_layout['type']
) {
$class_names[] = 'has-global-padding';
}
/*
* The following section was added to reintroduce a small set of layout classnames that were
* removed in the 5.9 release (https://github.com/WordPress/gutenberg/issues/38719). It is
* not intended to provide an extended set of classes to match all block layout attributes
* here.
*/
if ( ! empty( $block['attrs']['layout']['orientation'] ) ) {
$class_names[] = 'is-' . sanitize_title( $block['attrs']['layout']['orientation'] );
}
if ( ! empty( $block['attrs']['layout']['justifyContent'] ) ) {
$class_names[] = 'is-content-justification-' . sanitize_title( $block['attrs']['layout']['justifyContent'] );
}
if ( ! empty( $block['attrs']['layout']['flexWrap'] ) && 'nowrap' === $block['attrs']['layout']['flexWrap'] ) {
$class_names[] = 'is-nowrap';
}
// Get classname for layout type.
if ( isset( $used_layout['type'] ) ) {
$layout_classname = isset( $layout_definitions[ $used_layout['type'] ]['className'] )
? $layout_definitions[ $used_layout['type'] ]['className']
: '';
} else {
$layout_classname = isset( $layout_definitions['default']['className'] )
? $layout_definitions['default']['className']
: '';
}
if ( $layout_classname && is_string( $layout_classname ) ) {
$class_names[] = sanitize_title( $layout_classname );
}
/*
* Only generate Layout styles if the theme has not opted-out.
* Attribute-based Layout classnames are output in all cases.
*/
if ( ! current_theme_supports( 'disable-layout-styles' ) ) {
$gap_value = isset( $block['attrs']['style']['spacing']['blockGap'] )
? $block['attrs']['style']['spacing']['blockGap']
: null;
/*
* Skip if gap value contains unsupported characters.
* Regex for CSS value borrowed from `safecss_filter_attr`, and used here
* to only match against the value, not the CSS attribute.
*/
if ( is_array( $gap_value ) ) {
foreach ( $gap_value as $key => $value ) {
$gap_value[ $key ] = $value && preg_match( '%[\\\(&=}]|/\*%', $value ) ? null : $value;
}
} else {
$gap_value = $gap_value && preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ? null : $gap_value;
}
$fallback_gap_value = isset( $block_type->supports['spacing']['blockGap']['__experimentalDefault'] )
? $block_type->supports['spacing']['blockGap']['__experimentalDefault']
: '0.5em';
$block_spacing = isset( $block['attrs']['style']['spacing'] )
? $block['attrs']['style']['spacing']
: null;
/*
* If a block's block.json skips serialization for spacing or spacing.blockGap,
* don't apply the user-defined value to the styles.
*/
$should_skip_gap_serialization = wp_should_skip_block_supports_serialization( $block_type, 'spacing', 'blockGap' );
$block_gap = isset( $global_settings['spacing']['blockGap'] )
? $global_settings['spacing']['blockGap']
: null;
$has_block_gap_support = isset( $block_gap );
$style = wp_get_layout_style(
".$container_class.$container_class",
$used_layout,
$has_block_gap_support,
$gap_value,
$should_skip_gap_serialization,
$fallback_gap_value,
$block_spacing
);
// Only add container class and enqueue block support styles if unique styles were generated.
if ( ! empty( $style ) ) {
$class_names[] = $container_class;
}
}
// 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;
// Add classes to the outermost HTML tag if necessary.
if ( ! empty( $outer_class_names ) ) {
foreach ( $outer_class_names as $outer_class_name ) {
$processor->add_class( $outer_class_name );
}
}
/**
* Attempts to refer to the inner-block wrapping element by its class attribute.
*
* When examining a block's inner content, if a block has inner blocks, then
* the first content item will likely be a text (HTML) chunk immediately
* preceding the inner blocks. The last HTML tag in that chunk would then be
* an opening tag for an element that wraps the inner blocks.
*
* There's no reliable way to associate this wrapper in $block_content because
* it may have changed during the rendering pipeline (as inner contents is
* provided before rendering) and through previous filters. In many cases,
* however, the `class` attribute will be a good-enough identifier, so this
* code finds the last tag in that chunk and stores the `class` attribute
* so that it can be used later when working through the rendered block output
* to identify the wrapping element and add the remaining class names to it.
*
* It's also possible that no inner block wrapper even exists. If that's the
* case this code could apply the class names to an invalid element.
*
* Example:
*
* $block['innerBlocks'] = array( $list_item );
* $block['innerContent'] = array( '<ul class="list-wrapper is-unordered">', null, '</ul>' );
*
* // After rendering, the initial contents may have been modified by other renderers or filters.
* $block_content = <<<HTML
* <figure>
* <ul class="annotated-list list-wrapper is-unordered">
* <li>Code</li>
* </ul><figcaption>It's a list!</figcaption>
* </figure>
* HTML;
*
* Although it is possible that the original block-wrapper classes are changed in $block_content
* from how they appear in $block['innerContent'], it's likely that the original class attributes
* are still present in the wrapper as they are in this example. Frequently, additional classes
* will also be present; rarely should classes be removed.
*
* @todo Find a better way to match the first inner block. If it's possible to identify where the
* first inner block starts, then it will be possible to find the last tag before it starts
* and then that tag, if an opening tag, can be solidly identified as a wrapping element.
* Can some unique value or class or ID be added to the inner blocks when they process
* so that they can be extracted here safely without guessing? Can the block rendering function
* return information about where the rendered inner blocks start?
*
* @var string|null
*/
$inner_block_wrapper_classes = null;
$first_chunk = isset( $block['innerContent'][0] ) ? $block['innerContent'][0] : null;
if ( is_string( $first_chunk ) && count( $block['innerContent'] ) > 1 ) {
$first_chunk_processor = new WP_HTML_Tag_Processor( $first_chunk );
while ( $first_chunk_processor->next_tag() ) {
$class_attribute = $first_chunk_processor->get_attribute( 'class' );
if ( is_string( $class_attribute ) && ! empty( $class_attribute ) ) {
$inner_block_wrapper_classes = $class_attribute;
}
}
}
/*
* If necessary, advance to what is likely to be an inner block wrapper tag.
*
* This advances until it finds the first tag containing the original class
* attribute from above. If none is found it will scan to the end of the block
* and fail to add any class names.
*
* If there is no block wrapper it won't advance at all, in which case the
* class names will be added to the first and outermost tag of the block.
* For cases where this outermost tag is the only tag surrounding inner
* blocks then the outer wrapper and inner wrapper are the same.
*/
do {
if ( ! $inner_block_wrapper_classes ) {
break;
}
$class_attribute = $processor->get_attribute( 'class' );
if ( is_string( $class_attribute ) && str_contains( $class_attribute, $inner_block_wrapper_classes ) ) {
break;
}
} while ( $processor->next_tag() );
// Add the remaining class names.
foreach ( $class_names as $class_name ) {
$processor->add_class( $class_name );
}
return $processor->get_updated_html();
}
// Register the block support.
WP_Block_Supports::get_instance()->register(
'layout',
array(
'register_attribute' => 'wp_register_layout_support',
)
);
add_filter( 'render_block', 'wp_render_layout_support_flag', 10, 2 );
/**
* For themes without theme.json file, make sure
* to restore the inner div for the group block
* to avoid breaking styles relying on that div.
*
* @since 5.8.0
* @access private
*
* @param string $block_content Rendered block content.
* @param array $block Block object.
* @return string Filtered block content.
*/
function wp_restore_group_inner_container( $block_content, $block ) {
$tag_name = isset( $block['attrs']['tagName'] ) ? $block['attrs']['tagName'] : 'div';
$group_with_inner_container_regex = sprintf(
'/(^\s*<%1$s\b[^>]*wp-block-group(\s|")[^>]*>)(\s*<div\b[^>]*wp-block-group__inner-container(\s|")[^>]*>)((.|\S|\s)*)/U',
preg_quote( $tag_name, '/' )
);
if (
wp_theme_has_theme_json() ||
1 === preg_match( $group_with_inner_container_regex, $block_content ) ||
( isset( $block['attrs']['layout']['type'] ) && 'flex' === $block['attrs']['layout']['type'] )
) {
return $block_content;
}
/*
* This filter runs after the layout classnames have been added to the block, so they
* have to be removed from the outer wrapper and then added to the inner.
*/
$layout_classes = array();
$processor = new WP_HTML_Tag_Processor( $block_content );
if ( $processor->next_tag( array( 'class_name' => 'wp-block-group' ) ) ) {
foreach ( $processor->class_list() as $class_name ) {
if ( str_contains( $class_name, 'is-layout-' ) ) {
$layout_classes[] = $class_name;
$processor->remove_class( $class_name );
}
}
}
$content_without_layout_classes = $processor->get_updated_html();
$replace_regex = sprintf(
'/(^\s*<%1$s\b[^>]*wp-block-group[^>]*>)(.*)(<\/%1$s>\s*$)/ms',
preg_quote( $tag_name, '/' )
);
$updated_content = preg_replace_callback(
$replace_regex,
static function ( $matches ) {
return $matches[1] . '<div class="wp-block-group__inner-container">' . $matches[2] . '</div>' . $matches[3];
},
$content_without_layout_classes
);
// Add layout classes to inner wrapper.
if ( ! empty( $layout_classes ) ) {
$processor = new WP_HTML_Tag_Processor( $updated_content );
if ( $processor->next_tag( array( 'class_name' => 'wp-block-group__inner-container' ) ) ) {
foreach ( $layout_classes as $class_name ) {
$processor->add_class( $class_name );
}
}
$updated_content = $processor->get_updated_html();
}
return $updated_content;
}
add_filter( 'render_block_core/group', 'wp_restore_group_inner_container', 10, 2 );
/**
* For themes without theme.json file, make sure
* to restore the outer div for the aligned image block
* to avoid breaking styles relying on that div.
*
* @since 6.0.0
* @access private
*
* @param string $block_content Rendered block content.
* @param array $block Block object.
* @return string Filtered block content.
*/
function wp_restore_image_outer_container( $block_content, $block ) {
$image_with_align = "
/# 1) everything up to the class attribute contents
(
^\s*
<figure\b
[^>]*
\bclass=
[\"']
)
# 2) the class attribute contents
(
[^\"']*
\bwp-block-image\b
[^\"']*
\b(?:alignleft|alignright|aligncenter)\b
[^\"']*
)
# 3) everything after the class attribute contents
(
[\"']
[^>]*
>
.*
<\/figure>
)/iUx";
if (
wp_theme_has_theme_json() ||
0 === preg_match( $image_with_align, $block_content, $matches )
) {
return $block_content;
}
$wrapper_classnames = array( 'wp-block-image' );
// If the block has a classNames attribute these classnames need to be removed from the content and added back
// to the new wrapper div also.
if ( ! empty( $block['attrs']['className'] ) ) {
$wrapper_classnames = array_merge( $wrapper_classnames, explode( ' ', $block['attrs']['className'] ) );
}
$content_classnames = explode( ' ', $matches[2] );
$filtered_content_classnames = array_diff( $content_classnames, $wrapper_classnames );
return '<div class="' . implode( ' ', $wrapper_classnames ) . '">' . $matches[1] . implode( ' ', $filtered_content_classnames ) . $matches[3] . '</div>';
}
add_filter( 'render_block_core/image', 'wp_restore_image_outer_container', 10, 2 );

View File

@ -0,0 +1,151 @@
<?php
/**
* Position block support flag.
*
* @package WordPress
* @since 6.2.0
*/
/**
* Registers the style block attribute for block types that support it.
*
* @since 6.2.0
* @access private
*
* @param WP_Block_Type $block_type Block Type.
*/
function wp_register_position_support( $block_type ) {
$has_position_support = block_has_support( $block_type, 'position', false );
// Set up attributes and styles within that if needed.
if ( ! $block_type->attributes ) {
$block_type->attributes = array();
}
if ( $has_position_support && ! array_key_exists( 'style', $block_type->attributes ) ) {
$block_type->attributes['style'] = array(
'type' => 'object',
);
}
}
/**
* Renders position styles to the block wrapper.
*
* @since 6.2.0
* @access private
*
* @param string $block_content Rendered block content.
* @param array $block Block object.
* @return string Filtered block content.
*/
function wp_render_position_support( $block_content, $block ) {
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
$has_position_support = block_has_support( $block_type, 'position', false );
if (
! $has_position_support ||
empty( $block['attrs']['style']['position'] )
) {
return $block_content;
}
$global_settings = wp_get_global_settings();
$theme_has_sticky_support = isset( $global_settings['position']['sticky'] ) ? $global_settings['position']['sticky'] : false;
$theme_has_fixed_support = isset( $global_settings['position']['fixed'] ) ? $global_settings['position']['fixed'] : false;
// Only allow output for position types that the theme supports.
$allowed_position_types = array();
if ( true === $theme_has_sticky_support ) {
$allowed_position_types[] = 'sticky';
}
if ( true === $theme_has_fixed_support ) {
$allowed_position_types[] = 'fixed';
}
$style_attribute = isset( $block['attrs']['style'] ) ? $block['attrs']['style'] : null;
$class_name = wp_unique_id( 'wp-container-' );
$selector = ".$class_name";
$position_styles = array();
$position_type = isset( $style_attribute['position']['type'] ) ? $style_attribute['position']['type'] : '';
$wrapper_classes = array();
if (
in_array( $position_type, $allowed_position_types, true )
) {
$wrapper_classes[] = $class_name;
$wrapper_classes[] = 'is-position-' . $position_type;
$sides = array( 'top', 'right', 'bottom', 'left' );
foreach ( $sides as $side ) {
$side_value = isset( $style_attribute['position'][ $side ] ) ? $style_attribute['position'][ $side ] : null;
if ( null !== $side_value ) {
/*
* For fixed or sticky top positions,
* ensure the value includes an offset for the logged in admin bar.
*/
if (
'top' === $side &&
( 'fixed' === $position_type || 'sticky' === $position_type )
) {
// Ensure 0 values can be used in `calc()` calculations.
if ( '0' === $side_value || 0 === $side_value ) {
$side_value = '0px';
}
// Ensure current side value also factors in the height of the logged in admin bar.
$side_value = "calc($side_value + var(--wp-admin--admin-bar--position-offset, 0px))";
}
$position_styles[] =
array(
'selector' => $selector,
'declarations' => array(
$side => $side_value,
),
);
}
}
$position_styles[] =
array(
'selector' => $selector,
'declarations' => array(
'position' => $position_type,
'z-index' => '10',
),
);
}
if ( ! empty( $position_styles ) ) {
/*
* Add to the style engine store to enqueue and render position styles.
*/
wp_style_engine_get_stylesheet_from_css_rules(
$position_styles,
array(
'context' => 'block-supports',
'prettify' => false,
)
);
// Inject class name to block container markup.
$content = new WP_HTML_Tag_Processor( $block_content );
$content->next_tag();
foreach ( $wrapper_classes as $class ) {
$content->add_class( $class );
}
return (string) $content;
}
return $block_content;
}
// Register the block support.
WP_Block_Supports::get_instance()->register(
'position',
array(
'register_attribute' => 'wp_register_position_support',
)
);
add_filter( 'render_block', 'wp_render_position_support', 10, 2 );

View File

@ -0,0 +1,152 @@
<?php
/**
* Block level presets support.
*
* @package WordPress
* @since 6.2.0
*/
/**
* Get the class name used on block level presets.
*
* @internal
*
* @since 6.2.0
* @access private
*
* @param array $block Block object.
* @return string The unique class name.
*/
function _wp_get_presets_class_name( $block ) {
return 'wp-settings-' . md5( serialize( $block ) );
}
/**
* Update the block content with block level presets class name.
*
* @internal
*
* @since 6.2.0
* @access private
*
* @param string $block_content Rendered block content.
* @param array $block Block object.
* @return string Filtered block content.
*/
function _wp_add_block_level_presets_class( $block_content, $block ) {
if ( ! $block_content ) {
return $block_content;
}
// return early if the block doesn't have support for settings.
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
if ( ! block_has_support( $block_type, '__experimentalSettings', false ) ) {
return $block_content;
}
// return early if no settings are found on the block attributes.
$block_settings = isset( $block['attrs']['settings'] ) ? $block['attrs']['settings'] : null;
if ( empty( $block_settings ) ) {
return $block_content;
}
// Like the layout hook this assumes the hook only applies to blocks with a single wrapper.
// Add the class name to the first element, presuming it's the wrapper, if it exists.
$tags = new WP_HTML_Tag_Processor( $block_content );
if ( $tags->next_tag() ) {
$tags->add_class( _wp_get_presets_class_name( $block ) );
}
return $tags->get_updated_html();
}
/**
* Render the block level presets stylesheet.
*
* @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.
* @param array $block The block being rendered.
*
* @return null
*/
function _wp_add_block_level_preset_styles( $pre_render, $block ) {
// Return early if the block has not support for descendent block styles.
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
if ( ! block_has_support( $block_type, '__experimentalSettings', false ) ) {
return null;
}
// return early if no settings are found on the block attributes.
$block_settings = isset( $block['attrs']['settings'] ) ? $block['attrs']['settings'] : null;
if ( empty( $block_settings ) ) {
return null;
}
$class_name = '.' . _wp_get_presets_class_name( $block );
// the root selector for preset variables needs to target every possible block selector
// in order for the general setting to override any bock specific setting of a parent block or
// the site root.
$variables_root_selector = '*,[class*="wp-block"]';
$registry = WP_Block_Type_Registry::get_instance();
$blocks = $registry->get_all_registered();
foreach ( $blocks as $block_type ) {
/*
* 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 );
// Remove any potentially unsafe styles.
$theme_json_shape = WP_Theme_JSON::remove_insecure_properties(
array(
'version' => WP_Theme_JSON::LATEST_SCHEMA,
'settings' => $block_settings,
)
);
$theme_json_object = new WP_Theme_JSON( $theme_json_shape );
$styles = '';
// include preset css variables declaration on the stylesheet.
$styles .= $theme_json_object->get_stylesheet(
array( 'variables' ),
null,
array(
'root_selector' => $variables_root_selector,
'scope' => $class_name,
)
);
// include preset css classes on the the stylesheet.
$styles .= $theme_json_object->get_stylesheet(
array( 'presets' ),
null,
array(
'root_selector' => $class_name . ',' . $class_name . ' *',
'scope' => $class_name,
)
);
if ( ! empty( $styles ) ) {
wp_enqueue_block_support_styles( $styles );
}
return null;
}
add_filter( 'render_block', '_wp_add_block_level_presets_class', 10, 2 );
add_filter( 'pre_render_block', '_wp_add_block_level_preset_styles', 10, 2 );

View File

@ -0,0 +1,81 @@
<?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, '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, 'shadow', false );
if ( ! $has_shadow_support ) {
return array();
}
$shadow_block_styles = array();
$custom_shadow = $block_attributes['style']['shadow'] ?? null;
$shadow_block_styles['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

@ -0,0 +1,89 @@
<?php
/**
* Spacing block support flag.
*
* For backwards compatibility, this remains separate to the dimensions.php
* block support despite both belonging under a single panel in the editor.
*
* @package WordPress
* @since 5.8.0
*/
/**
* Registers the style block attribute for block types that support it.
*
* @since 5.8.0
* @access private
*
* @param WP_Block_Type $block_type Block Type.
*/
function wp_register_spacing_support( $block_type ) {
$has_spacing_support = block_has_support( $block_type, 'spacing', false );
// Setup attributes and styles within that if needed.
if ( ! $block_type->attributes ) {
$block_type->attributes = array();
}
if ( $has_spacing_support && ! array_key_exists( 'style', $block_type->attributes ) ) {
$block_type->attributes['style'] = array(
'type' => 'object',
);
}
}
/**
* Adds CSS classes for block spacing to the incoming attributes array.
* This will be applied to the block markup in the front-end.
*
* @since 5.8.0
* @since 6.1.0 Implemented the style engine to generate CSS and classnames.
* @access private
*
* @param WP_Block_Type $block_type Block Type.
* @param array $block_attributes Block attributes.
* @return array Block spacing CSS classes and inline styles.
*/
function wp_apply_spacing_support( $block_type, $block_attributes ) {
if ( wp_should_skip_block_supports_serialization( $block_type, 'spacing' ) ) {
return array();
}
$attributes = array();
$has_padding_support = block_has_support( $block_type, array( 'spacing', 'padding' ), false );
$has_margin_support = block_has_support( $block_type, array( 'spacing', 'margin' ), false );
$block_styles = isset( $block_attributes['style'] ) ? $block_attributes['style'] : null;
if ( ! $block_styles ) {
return $attributes;
}
$skip_padding = wp_should_skip_block_supports_serialization( $block_type, 'spacing', 'padding' );
$skip_margin = wp_should_skip_block_supports_serialization( $block_type, 'spacing', 'margin' );
$spacing_block_styles = array(
'padding' => null,
'margin' => null,
);
if ( $has_padding_support && ! $skip_padding ) {
$spacing_block_styles['padding'] = isset( $block_styles['spacing']['padding'] ) ? $block_styles['spacing']['padding'] : null;
}
if ( $has_margin_support && ! $skip_margin ) {
$spacing_block_styles['margin'] = isset( $block_styles['spacing']['margin'] ) ? $block_styles['spacing']['margin'] : null;
}
$styles = wp_style_engine_get_styles( array( 'spacing' => $spacing_block_styles ) );
if ( ! empty( $styles['css'] ) ) {
$attributes['style'] = $styles['css'];
}
return $attributes;
}
// Register the block support.
WP_Block_Supports::get_instance()->register(
'spacing',
array(
'register_attribute' => 'wp_register_spacing_support',
'apply' => 'wp_apply_spacing_support',
)
);

View File

@ -0,0 +1,659 @@
<?php
/**
* Typography block support flag.
*
* @package WordPress
* @since 5.6.0
*/
/**
* 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.
*/
function wp_register_typography_support( $block_type ) {
if ( ! ( $block_type instanceof WP_Block_Type ) ) {
return;
}
$typography_supports = isset( $block_type->supports['typography'] ) ? $block_type->supports['typography'] : false;
if ( ! $typography_supports ) {
return;
}
$has_font_family_support = isset( $typography_supports['__experimentalFontFamily'] ) ? $typography_supports['__experimentalFontFamily'] : false;
$has_font_size_support = isset( $typography_supports['fontSize'] ) ? $typography_supports['fontSize'] : false;
$has_font_style_support = isset( $typography_supports['__experimentalFontStyle'] ) ? $typography_supports['__experimentalFontStyle'] : false;
$has_font_weight_support = isset( $typography_supports['__experimentalFontWeight'] ) ? $typography_supports['__experimentalFontWeight'] : false;
$has_letter_spacing_support = isset( $typography_supports['__experimentalLetterSpacing'] ) ? $typography_supports['__experimentalLetterSpacing'] : false;
$has_line_height_support = isset( $typography_supports['lineHeight'] ) ? $typography_supports['lineHeight'] : false;
$has_text_columns_support = isset( $typography_supports['textColumns'] ) ? $typography_supports['textColumns'] : false;
$has_text_decoration_support = isset( $typography_supports['__experimentalTextDecoration'] ) ? $typography_supports['__experimentalTextDecoration'] : false;
$has_text_transform_support = isset( $typography_supports['__experimentalTextTransform'] ) ? $typography_supports['__experimentalTextTransform'] : false;
$has_writing_mode_support = isset( $typography_supports['__experimentalWritingMode'] ) ? $typography_supports['__experimentalWritingMode'] : false;
$has_typography_support = $has_font_family_support
|| $has_font_size_support
|| $has_font_style_support
|| $has_font_weight_support
|| $has_letter_spacing_support
|| $has_line_height_support
|| $has_text_columns_support
|| $has_text_decoration_support
|| $has_text_transform_support
|| $has_writing_mode_support;
if ( ! $block_type->attributes ) {
$block_type->attributes = array();
}
if ( $has_typography_support && ! array_key_exists( 'style', $block_type->attributes ) ) {
$block_type->attributes['style'] = array(
'type' => 'object',
);
}
if ( $has_font_size_support && ! array_key_exists( 'fontSize', $block_type->attributes ) ) {
$block_type->attributes['fontSize'] = array(
'type' => 'string',
);
}
if ( $has_font_family_support && ! array_key_exists( 'fontFamily', $block_type->attributes ) ) {
$block_type->attributes['fontFamily'] = array(
'type' => 'string',
);
}
}
/**
* Adds CSS classes and inline styles for typography features such as font sizes
* to the incoming attributes array. This will be applied to the block markup in
* the front-end.
*
* @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.
* @param array $block_attributes Block attributes.
* @return array Typography CSS classes and inline styles.
*/
function wp_apply_typography_support( $block_type, $block_attributes ) {
if ( ! ( $block_type instanceof WP_Block_Type ) ) {
return array();
}
$typography_supports = isset( $block_type->supports['typography'] )
? $block_type->supports['typography']
: false;
if ( ! $typography_supports ) {
return array();
}
if ( wp_should_skip_block_supports_serialization( $block_type, 'typography' ) ) {
return array();
}
$has_font_family_support = isset( $typography_supports['__experimentalFontFamily'] ) ? $typography_supports['__experimentalFontFamily'] : false;
$has_font_size_support = isset( $typography_supports['fontSize'] ) ? $typography_supports['fontSize'] : false;
$has_font_style_support = isset( $typography_supports['__experimentalFontStyle'] ) ? $typography_supports['__experimentalFontStyle'] : false;
$has_font_weight_support = isset( $typography_supports['__experimentalFontWeight'] ) ? $typography_supports['__experimentalFontWeight'] : false;
$has_letter_spacing_support = isset( $typography_supports['__experimentalLetterSpacing'] ) ? $typography_supports['__experimentalLetterSpacing'] : false;
$has_line_height_support = isset( $typography_supports['lineHeight'] ) ? $typography_supports['lineHeight'] : false;
$has_text_columns_support = isset( $typography_supports['textColumns'] ) ? $typography_supports['textColumns'] : false;
$has_text_decoration_support = isset( $typography_supports['__experimentalTextDecoration'] ) ? $typography_supports['__experimentalTextDecoration'] : false;
$has_text_transform_support = isset( $typography_supports['__experimentalTextTransform'] ) ? $typography_supports['__experimentalTextTransform'] : false;
$has_writing_mode_support = isset( $typography_supports['__experimentalWritingMode'] ) ? $typography_supports['__experimentalWritingMode'] : false;
// Whether to skip individual block support features.
$should_skip_font_size = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontSize' );
$should_skip_font_family = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontFamily' );
$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' );
$should_skip_writing_mode = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'writingMode' );
$typography_block_styles = array();
if ( $has_font_size_support && ! $should_skip_font_size ) {
$preset_font_size = array_key_exists( 'fontSize', $block_attributes )
? "var:preset|font-size|{$block_attributes['fontSize']}"
: null;
$custom_font_size = isset( $block_attributes['style']['typography']['fontSize'] )
? $block_attributes['style']['typography']['fontSize']
: null;
$typography_block_styles['fontSize'] = $preset_font_size ? $preset_font_size : wp_get_typography_font_size_value(
array(
'size' => $custom_font_size,
)
);
}
if ( $has_font_family_support && ! $should_skip_font_family ) {
$preset_font_family = array_key_exists( 'fontFamily', $block_attributes )
? "var:preset|font-family|{$block_attributes['fontFamily']}"
: null;
$custom_font_family = isset( $block_attributes['style']['typography']['fontFamily'] )
? wp_typography_get_preset_inline_style_value( $block_attributes['style']['typography']['fontFamily'], 'font-family' )
: null;
$typography_block_styles['fontFamily'] = $preset_font_family ? $preset_font_family : $custom_font_family;
}
if (
$has_font_style_support &&
! $should_skip_font_style &&
isset( $block_attributes['style']['typography']['fontStyle'] )
) {
$typography_block_styles['fontStyle'] = wp_typography_get_preset_inline_style_value(
$block_attributes['style']['typography']['fontStyle'],
'font-style'
);
}
if (
$has_font_weight_support &&
! $should_skip_font_weight &&
isset( $block_attributes['style']['typography']['fontWeight'] )
) {
$typography_block_styles['fontWeight'] = wp_typography_get_preset_inline_style_value(
$block_attributes['style']['typography']['fontWeight'],
'font-weight'
);
}
if ( $has_line_height_support && ! $should_skip_line_height ) {
$typography_block_styles['lineHeight'] = isset( $block_attributes['style']['typography']['lineHeight'] )
? $block_attributes['style']['typography']['lineHeight']
: null;
}
if ( $has_text_columns_support && ! $should_skip_text_columns && isset( $block_attributes['style']['typography']['textColumns'] ) ) {
$typography_block_styles['textColumns'] = isset( $block_attributes['style']['typography']['textColumns'] )
? $block_attributes['style']['typography']['textColumns']
: null;
}
if (
$has_text_decoration_support &&
! $should_skip_text_decoration &&
isset( $block_attributes['style']['typography']['textDecoration'] )
) {
$typography_block_styles['textDecoration'] = wp_typography_get_preset_inline_style_value(
$block_attributes['style']['typography']['textDecoration'],
'text-decoration'
);
}
if (
$has_text_transform_support &&
! $should_skip_text_transform &&
isset( $block_attributes['style']['typography']['textTransform'] )
) {
$typography_block_styles['textTransform'] = wp_typography_get_preset_inline_style_value(
$block_attributes['style']['typography']['textTransform'],
'text-transform'
);
}
if (
$has_letter_spacing_support &&
! $should_skip_letter_spacing &&
isset( $block_attributes['style']['typography']['letterSpacing'] )
) {
$typography_block_styles['letterSpacing'] = wp_typography_get_preset_inline_style_value(
$block_attributes['style']['typography']['letterSpacing'],
'letter-spacing'
);
}
if ( $has_writing_mode_support &&
! $should_skip_writing_mode &&
isset( $block_attributes['style']['typography']['writingMode'] )
) {
$typography_block_styles['writingMode'] = isset( $block_attributes['style']['typography']['writingMode'] )
? $block_attributes['style']['typography']['writingMode']
: null;
}
$attributes = array();
$styles = wp_style_engine_get_styles(
array( 'typography' => $typography_block_styles ),
array( 'convert_vars_to_classnames' => true )
);
if ( ! empty( $styles['classnames'] ) ) {
$attributes['class'] = $styles['classnames'];
}
if ( ! empty( $styles['css'] ) ) {
$attributes['style'] = $styles['css'];
}
return $attributes;
}
/**
* Generates an inline style value for a typography feature e.g. text decoration,
* text transform, and font style.
*
* Note: This function is for backwards compatibility.
* * It is necessary to parse older blocks whose typography styles contain presets.
* * It mostly replaces the deprecated `wp_typography_get_css_variable_inline_style()`,
* but skips compiling a CSS declaration as the style engine takes over this role.
* @link https://github.com/wordpress/gutenberg/pull/27555
*
* @since 6.1.0
*
* @param string $style_value A raw style value for a single typography feature from a block's style attribute.
* @param string $css_property Slug for the CSS property the inline style sets.
* @return string A CSS inline style value.
*/
function wp_typography_get_preset_inline_style_value( $style_value, $css_property ) {
// If the style value is not a preset CSS variable go no further.
if ( empty( $style_value ) || ! str_contains( $style_value, "var:preset|{$css_property}|" ) ) {
return $style_value;
}
/*
* For backwards compatibility.
* Presets were removed in WordPress/gutenberg#27555.
* A preset CSS variable is the style.
* Gets the style value from the string and return CSS style.
*/
$index_to_splice = strrpos( $style_value, '|' ) + 1;
$slug = _wp_to_kebab_case( substr( $style_value, $index_to_splice ) );
// Return the actual CSS inline style value,
// e.g. `var(--wp--preset--text-decoration--underline);`.
return sprintf( 'var(--wp--preset--%s--%s);', $css_property, $slug );
}
/**
* Renders typography styles/content to the block wrapper.
*
* @since 6.1.0
*
* @param string $block_content Rendered block content.
* @param array $block Block object.
* @return string Filtered block content.
*/
function wp_render_typography_support( $block_content, $block ) {
if ( ! isset( $block['attrs']['style']['typography']['fontSize'] ) ) {
return $block_content;
}
$custom_font_size = $block['attrs']['style']['typography']['fontSize'];
$fluid_font_size = wp_get_typography_font_size_value( array( 'size' => $custom_font_size ) );
/*
* Checks that $fluid_font_size does not match $custom_font_size,
* which means it's been mutated by the fluid font size functions.
*/
if ( ! empty( $fluid_font_size ) && $fluid_font_size !== $custom_font_size ) {
// Replaces the first instance of `font-size:$custom_font_size` with `font-size:$fluid_font_size`.
return preg_replace( '/font-size\s*:\s*' . preg_quote( $custom_font_size, '/' ) . '\s*;?/', 'font-size:' . esc_attr( $fluid_font_size ) . ';', $block_content, 1 );
}
return $block_content;
}
/**
* Checks a string for a unit and value and returns an array
* consisting of `'value'` and `'unit'`, e.g. array( '42', 'rem' ).
*
* @since 6.1.0
*
* @param string|int|float $raw_value Raw size value from theme.json.
* @param array $options {
* Optional. An associative array of options. Default is empty array.
*
* @type string $coerce_to Coerce the value to rem or px. Default `'rem'`.
* @type int $root_size_value Value of root font size for rem|em <-> px conversion. Default `16`.
* @type string[] $acceptable_units An array of font size units. Default `array( 'rem', 'px', 'em' )`;
* }
* @return array|null An array consisting of `'value'` and `'unit'` properties on success.
* `null` on failure.
*/
function wp_get_typography_value_and_unit( $raw_value, $options = array() ) {
if ( ! is_string( $raw_value ) && ! is_int( $raw_value ) && ! is_float( $raw_value ) ) {
_doing_it_wrong(
__FUNCTION__,
__( 'Raw size value must be a string, integer, or float.' ),
'6.1.0'
);
return null;
}
if ( empty( $raw_value ) ) {
return null;
}
// Converts numbers to pixel values by default.
if ( is_numeric( $raw_value ) ) {
$raw_value = $raw_value . 'px';
}
$defaults = array(
'coerce_to' => '',
'root_size_value' => 16,
'acceptable_units' => array( 'rem', 'px', 'em' ),
);
$options = wp_parse_args( $options, $defaults );
$acceptable_units_group = implode( '|', $options['acceptable_units'] );
$pattern = '/^(\d*\.?\d+)(' . $acceptable_units_group . '){1,1}$/';
preg_match( $pattern, $raw_value, $matches );
// Bails out if not a number value and a px or rem unit.
if ( ! isset( $matches[1] ) || ! isset( $matches[2] ) ) {
return null;
}
$value = $matches[1];
$unit = $matches[2];
/*
* Default browser font size. Later, possibly could inject some JS to
* compute this `getComputedStyle( document.querySelector( "html" ) ).fontSize`.
*/
if ( 'px' === $options['coerce_to'] && ( 'em' === $unit || 'rem' === $unit ) ) {
$value = $value * $options['root_size_value'];
$unit = $options['coerce_to'];
}
if ( 'px' === $unit && ( 'em' === $options['coerce_to'] || 'rem' === $options['coerce_to'] ) ) {
$value = $value / $options['root_size_value'];
$unit = $options['coerce_to'];
}
/*
* No calculation is required if swapping between em and rem yet,
* since we assume a root size value. Later we might like to differentiate between
* :root font size (rem) and parent element font size (em) relativity.
*/
if ( ( 'em' === $options['coerce_to'] || 'rem' === $options['coerce_to'] ) && ( 'em' === $unit || 'rem' === $unit ) ) {
$unit = $options['coerce_to'];
}
return array(
'value' => round( $value, 3 ),
'unit' => $unit,
);
}
/**
* Internal implementation of CSS clamp() based on available min/max viewport
* 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.
* @since 6.5.0 Returns early when min and max viewport subtraction is zero to avoid division by zero.
* @access private
*
* @param array $args {
* Optional. An associative array of values to calculate a fluid formula
* for font size. Default is empty array.
*
* @type string $maximum_viewport_width Maximum size up to which type will have fluidity.
* @type string $minimum_viewport_width Minimum viewport size from which type will have fluidity.
* @type string $maximum_font_size Maximum font size for any clamp() calculation.
* @type string $minimum_font_size Minimum font size for any clamp() calculation.
* @type int $scale_factor A scale factor to determine how fast a font scales within boundaries.
* }
* @return string|null A font-size value using clamp() on success, otherwise null.
*/
function wp_get_computed_fluid_typography_value( $args = array() ) {
$maximum_viewport_width_raw = isset( $args['maximum_viewport_width'] ) ? $args['maximum_viewport_width'] : null;
$minimum_viewport_width_raw = isset( $args['minimum_viewport_width'] ) ? $args['minimum_viewport_width'] : null;
$maximum_font_size_raw = isset( $args['maximum_font_size'] ) ? $args['maximum_font_size'] : null;
$minimum_font_size_raw = isset( $args['minimum_font_size'] ) ? $args['minimum_font_size'] : null;
$scale_factor = isset( $args['scale_factor'] ) ? $args['scale_factor'] : null;
// Normalizes the minimum font size in order to use the value for calculations.
$minimum_font_size = wp_get_typography_value_and_unit( $minimum_font_size_raw );
/*
* We get a 'preferred' unit to keep units consistent when calculating,
* otherwise the result will not be accurate.
*/
$font_size_unit = isset( $minimum_font_size['unit'] ) ? $minimum_font_size['unit'] : 'rem';
// Normalizes the maximum font size in order to use the value for calculations.
$maximum_font_size = wp_get_typography_value_and_unit(
$maximum_font_size_raw,
array(
'coerce_to' => $font_size_unit,
)
);
// Checks for mandatory min and max sizes, and protects against unsupported units.
if ( ! $maximum_font_size || ! $minimum_font_size ) {
return null;
}
// Uses rem for accessible fluid target font scaling.
$minimum_font_size_rem = wp_get_typography_value_and_unit(
$minimum_font_size_raw,
array(
'coerce_to' => 'rem',
)
);
// Viewport widths defined for fluid typography. Normalize units.
$maximum_viewport_width = wp_get_typography_value_and_unit(
$maximum_viewport_width_raw,
array(
'coerce_to' => $font_size_unit,
)
);
$minimum_viewport_width = wp_get_typography_value_and_unit(
$minimum_viewport_width_raw,
array(
'coerce_to' => $font_size_unit,
)
);
// Protects against unsupported units in min and max viewport widths.
if ( ! $minimum_viewport_width || ! $maximum_viewport_width ) {
return null;
}
// Calculates the linear factor denominator. If it's 0, we cannot calculate a fluid value.
$linear_factor_denominator = $maximum_viewport_width['value'] - $minimum_viewport_width['value'];
if ( empty( $linear_factor_denominator ) ) {
return null;
}
/*
* Build CSS rule.
* Borrowed from https://websemantics.uk/tools/responsive-font-calculator/.
*/
$view_port_width_offset = round( $minimum_viewport_width['value'] / 100, 3 ) . $font_size_unit;
$linear_factor = 100 * ( ( $maximum_font_size['value'] - $minimum_font_size['value'] ) / ( $linear_factor_denominator ) );
$linear_factor_scaled = round( $linear_factor * $scale_factor, 3 );
$linear_factor_scaled = empty( $linear_factor_scaled ) ? 1 : $linear_factor_scaled;
$fluid_target_font_size = implode( '', $minimum_font_size_rem ) . " + ((1vw - $view_port_width_offset) * $linear_factor_scaled)";
return "clamp($minimum_font_size_raw, $fluid_target_font_size, $maximum_font_size_raw)";
}
/**
* Returns a font-size value based on a given font-size preset.
* Takes into account fluid typography parameters and attempts to return a CSS
* formula depending on available, valid values.
*
* @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.
* @since 6.4.0 Added configurable min and max viewport width values to the typography.fluid theme.json schema.
*
* @param array $preset {
* Required. fontSizes preset value as seen in theme.json.
*
* @type string $name Name of the font size preset.
* @type string $slug Kebab-case, unique identifier for the font size preset.
* @type string|int|float $size CSS font-size value, including units if applicable.
* }
* @param bool $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing.
* Default is false.
* @return string|null Font-size value or null if a size is not passed in $preset.
*/
function wp_get_typography_font_size_value( $preset, $should_use_fluid_typography = false ) {
if ( ! isset( $preset['size'] ) ) {
return null;
}
/*
* Catches empty values and 0/'0'.
* Fluid calculations cannot be performed on 0.
*/
if ( empty( $preset['size'] ) ) {
return $preset['size'];
}
// Checks if fluid font sizes are activated.
$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'] ) )
) {
$should_use_fluid_typography = true;
}
if ( ! $should_use_fluid_typography ) {
return $preset['size'];
}
$fluid_settings = isset( $typography_settings['fluid'] ) && is_array( $typography_settings['fluid'] )
? $typography_settings['fluid']
: array();
// Defaults.
$default_maximum_viewport_width = '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;
$default_minimum_font_size_limit = '14px';
// Defaults overrides.
$minimum_viewport_width = isset( $fluid_settings['minViewportWidth'] ) ? $fluid_settings['minViewportWidth'] : $default_minimum_viewport_width;
$maximum_viewport_width = isset( $layout_settings['wideSize'] ) && ! empty( wp_get_typography_value_and_unit( $layout_settings['wideSize'] ) ) ? $layout_settings['wideSize'] : $default_maximum_viewport_width;
if ( isset( $fluid_settings['maxViewportWidth'] ) ) {
$maximum_viewport_width = $fluid_settings['maxViewportWidth'];
}
$has_min_font_size = isset( $fluid_settings['minFontSize'] ) && ! empty( wp_get_typography_value_and_unit( $fluid_settings['minFontSize'] ) );
$minimum_font_size_limit = $has_min_font_size ? $fluid_settings['minFontSize'] : $default_minimum_font_size_limit;
// Font sizes.
$fluid_font_size_settings = isset( $preset['fluid'] ) ? $preset['fluid'] : null;
// A font size has explicitly bypassed fluid calculations.
if ( false === $fluid_font_size_settings ) {
return $preset['size'];
}
// Try to grab explicit min and max fluid font sizes.
$minimum_font_size_raw = isset( $fluid_font_size_settings['min'] ) ? $fluid_font_size_settings['min'] : null;
$maximum_font_size_raw = isset( $fluid_font_size_settings['max'] ) ? $fluid_font_size_settings['max'] : null;
// Font sizes.
$preferred_size = wp_get_typography_value_and_unit( $preset['size'] );
// Protects against unsupported units.
if ( empty( $preferred_size['unit'] ) ) {
return $preset['size'];
}
/*
* Normalizes the minimum font size limit according to the incoming unit,
* in order to perform comparative checks.
*/
$minimum_font_size_limit = wp_get_typography_value_and_unit(
$minimum_font_size_limit,
array(
'coerce_to' => $preferred_size['unit'],
)
);
// Don't enforce minimum font size if a font size has explicitly set a min and max value.
if ( ! empty( $minimum_font_size_limit ) && ( ! $minimum_font_size_raw && ! $maximum_font_size_raw ) ) {
/*
* If a minimum size was not passed to this function
* and the user-defined font size is lower than $minimum_font_size_limit,
* do not calculate a fluid value.
*/
if ( $preferred_size['value'] <= $minimum_font_size_limit['value'] ) {
return $preset['size'];
}
}
// If no fluid max font size is available use the incoming value.
if ( ! $maximum_font_size_raw ) {
$maximum_font_size_raw = $preferred_size['value'] . $preferred_size['unit'];
}
/*
* If no minimumFontSize is provided, create one using
* the given font size multiplied by the min font size scale factor.
*/
if ( ! $minimum_font_size_raw ) {
$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'] ) {
$minimum_font_size_raw = $minimum_font_size_limit['value'] . $minimum_font_size_limit['unit'];
} else {
$minimum_font_size_raw = $calculated_minimum_font_size . $preferred_size['unit'];
}
}
$fluid_font_size_value = wp_get_computed_fluid_typography_value(
array(
'minimum_viewport_width' => $minimum_viewport_width,
'maximum_viewport_width' => $maximum_viewport_width,
'minimum_font_size' => $minimum_font_size_raw,
'maximum_font_size' => $maximum_font_size_raw,
'scale_factor' => $default_scale_factor,
)
);
if ( ! empty( $fluid_font_size_value ) ) {
return $fluid_font_size_value;
}
return $preset['size'];
}
// Register the block support.
WP_Block_Supports::get_instance()->register(
'typography',
array(
'register_attribute' => 'wp_register_typography_support',
'apply' => 'wp_apply_typography_support',
)
);

View File

@ -0,0 +1,36 @@
<?php
/**
* Block support utility functions.
*
* @package WordPress
* @subpackage Block Supports
* @since 6.0.0
*/
/**
* Checks whether serialization of the current block's supported properties
* should occur.
*
* @since 6.0.0
* @access private
*
* @param WP_Block_Type $block_type Block type.
* @param string $feature_set Name of block support feature set..
* @param string $feature Optional name of individual feature to check.
*
* @return bool Whether to serialize block support styles & classes.
*/
function wp_should_skip_block_supports_serialization( $block_type, $feature_set, $feature = null ) {
if ( ! is_object( $block_type ) || ! $feature_set ) {
return false;
}
$path = array( $feature_set, '__experimentalSkipSerialization' );
$skip_serialization = _wp_array_get( $block_type->supports, $path, false );
if ( is_array( $skip_serialization ) ) {
return in_array( $feature, $skip_serialization, true );
}
return $skip_serialization;
}