diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-17 07:56:49 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-17 07:56:49 +0000 |
commit | a415c29efee45520ae252d2aa28f1083a521cd7b (patch) | |
tree | f4ade4b6668ecc0765de7e1424f7c1427ad433ff /wp-includes/block-supports | |
parent | Initial commit. (diff) | |
download | wordpress-a415c29efee45520ae252d2aa28f1083a521cd7b.tar.xz wordpress-a415c29efee45520ae252d2aa28f1083a521cd7b.zip |
Adding upstream version 6.4.3+dfsg1.upstream/6.4.3+dfsg1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'wp-includes/block-supports')
-rw-r--r-- | wp-includes/block-supports/align.php | 65 | ||||
-rw-r--r-- | wp-includes/block-supports/background.php | 118 | ||||
-rw-r--r-- | wp-includes/block-supports/border.php | 176 | ||||
-rw-r--r-- | wp-includes/block-supports/colors.php | 144 | ||||
-rw-r--r-- | wp-includes/block-supports/custom-classname.php | 65 | ||||
-rw-r--r-- | wp-includes/block-supports/dimensions.php | 93 | ||||
-rw-r--r-- | wp-includes/block-supports/duotone.php | 59 | ||||
-rw-r--r-- | wp-includes/block-supports/elements.php | 232 | ||||
-rw-r--r-- | wp-includes/block-supports/generated-classname.php | 71 | ||||
-rw-r--r-- | wp-includes/block-supports/layout.php | 961 | ||||
-rw-r--r-- | wp-includes/block-supports/position.php | 151 | ||||
-rw-r--r-- | wp-includes/block-supports/settings.php | 152 | ||||
-rw-r--r-- | wp-includes/block-supports/shadow.php | 82 | ||||
-rw-r--r-- | wp-includes/block-supports/spacing.php | 89 | ||||
-rw-r--r-- | wp-includes/block-supports/typography.php | 652 | ||||
-rw-r--r-- | wp-includes/block-supports/utils.php | 36 |
16 files changed, 3146 insertions, 0 deletions
diff --git a/wp-includes/block-supports/align.php b/wp-includes/block-supports/align.php new file mode 100644 index 0000000..35591a1 --- /dev/null +++ b/wp-includes/block-supports/align.php @@ -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', + ) +); diff --git a/wp-includes/block-supports/background.php b/wp-includes/block-supports/background.php new file mode 100644 index 0000000..a8de0c6 --- /dev/null +++ b/wp-includes/block-supports/background.php @@ -0,0 +1,118 @@ +<?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 + * @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; + $background_size = isset( $block_attributes['style']['background']['backgroundSize'] ) + ? $block_attributes['style']['background']['backgroundSize'] + : 'cover'; + + $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 when an image url is set. + $background_block_styles['backgroundSize'] = $background_size; + } + + $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 ); + } + + 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 ); diff --git a/wp-includes/block-supports/border.php b/wp-includes/block-supports/border.php new file mode 100644 index 0000000..a11c099 --- /dev/null +++ b/wp-includes/block-supports/border.php @@ -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', + ) +); diff --git a/wp-includes/block-supports/colors.php b/wp-includes/block-supports/colors.php new file mode 100644 index 0000000..f14b718 --- /dev/null +++ b/wp-includes/block-supports/colors.php @@ -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', + ) +); diff --git a/wp-includes/block-supports/custom-classname.php b/wp-includes/block-supports/custom-classname.php new file mode 100644 index 0000000..1889918 --- /dev/null +++ b/wp-includes/block-supports/custom-classname.php @@ -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', + ) +); diff --git a/wp-includes/block-supports/dimensions.php b/wp-includes/block-supports/dimensions.php new file mode 100644 index 0000000..a889e78 --- /dev/null +++ b/wp-includes/block-supports/dimensions.php @@ -0,0 +1,93 @@ +<?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; +} + +// Register the block support. +WP_Block_Supports::get_instance()->register( + 'dimensions', + array( + 'register_attribute' => 'wp_register_dimensions_support', + 'apply' => 'wp_apply_dimensions_support', + ) +); diff --git a/wp-includes/block-supports/duotone.php b/wp-includes/block-supports/duotone.php new file mode 100644 index 0000000..a90eb76 --- /dev/null +++ b/wp-includes/block-supports/duotone.php @@ -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 ); diff --git a/wp-includes/block-supports/elements.php b/wp-includes/block-supports/elements.php new file mode 100644 index 0000000..4f3de8c --- /dev/null +++ b/wp-includes/block-supports/elements.php @@ -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", + 'hover_selector' => ".$class_name a: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 ); diff --git a/wp-includes/block-supports/generated-classname.php b/wp-includes/block-supports/generated-classname.php new file mode 100644 index 0000000..bbedd0e --- /dev/null +++ b/wp-includes/block-supports/generated-classname.php @@ -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', + ) +); diff --git a/wp-includes/block-supports/layout.php b/wp-includes/block-supports/layout.php new file mode 100644 index 0000000..0e22dde --- /dev/null +++ b/wp-includes/block-supports/layout.php @@ -0,0 +1,961 @@ +<?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(); + } + + $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'] ) . '-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; + } + + if ( false !== strpos( $processor->get_attribute( 'class' ), $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; + } + + $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]; + }, + $block_content + ); + 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 ); diff --git a/wp-includes/block-supports/position.php b/wp-includes/block-supports/position.php new file mode 100644 index 0000000..5659afc --- /dev/null +++ b/wp-includes/block-supports/position.php @@ -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 ); diff --git a/wp-includes/block-supports/settings.php b/wp-includes/block-supports/settings.php new file mode 100644 index 0000000..ca3ba13 --- /dev/null +++ b/wp-includes/block-supports/settings.php @@ -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 ); diff --git a/wp-includes/block-supports/shadow.php b/wp-includes/block-supports/shadow.php new file mode 100644 index 0000000..6fa05b2 --- /dev/null +++ b/wp-includes/block-supports/shadow.php @@ -0,0 +1,82 @@ +<?php +/** + * Shadow block support flag. + * + * @package WordPress + * @since 6.3.0 + */ + +/** + * Registers the style and shadow block attributes for block types that support it. + * + * @since 6.3.0 + * @access private + * + * @param WP_Block_Type $block_type Block Type. + */ +function wp_register_shadow_support( $block_type ) { + $has_shadow_support = block_has_support( $block_type, '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(); + + $preset_shadow = array_key_exists( 'shadow', $block_attributes ) ? "var:preset|shadow|{$block_attributes['shadow']}" : null; + $custom_shadow = isset( $block_attributes['style']['shadow'] ) ? $block_attributes['style']['shadow'] : null; + $shadow_block_styles['shadow'] = $preset_shadow ? $preset_shadow : $custom_shadow; + + $attributes = array(); + $styles = wp_style_engine_get_styles( $shadow_block_styles ); + + if ( ! empty( $styles['css'] ) ) { + $attributes['style'] = $styles['css']; + } + + return $attributes; +} + +// Register the block support. +WP_Block_Supports::get_instance()->register( + 'shadow', + array( + 'register_attribute' => 'wp_register_shadow_support', + 'apply' => 'wp_apply_shadow_support', + ) +); diff --git a/wp-includes/block-supports/spacing.php b/wp-includes/block-supports/spacing.php new file mode 100644 index 0000000..e190d99 --- /dev/null +++ b/wp-includes/block-supports/spacing.php @@ -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', + ) +); diff --git a/wp-includes/block-supports/typography.php b/wp-includes/block-supports/typography.php new file mode 100644 index 0000000..bccde4f --- /dev/null +++ b/wp-includes/block-supports/typography.php @@ -0,0 +1,652 @@ +<?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. + * @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; + } + + /* + * 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'] ) / ( $maximum_viewport_width['value'] - $minimum_viewport_width['value'] ) ); + $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', + ) +); diff --git a/wp-includes/block-supports/utils.php b/wp-includes/block-supports/utils.php new file mode 100644 index 0000000..7c5d7db --- /dev/null +++ b/wp-includes/block-supports/utils.php @@ -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; +} |