diff options
Diffstat (limited to 'wp-includes/block-supports')
| -rw-r--r-- | wp-includes/block-supports/background.php | 49 | ||||
| -rw-r--r-- | wp-includes/block-supports/block-style-variations.php | 312 | ||||
| -rw-r--r-- | wp-includes/block-supports/duotone.php | 1 | ||||
| -rw-r--r-- | wp-includes/block-supports/elements.php | 142 | ||||
| -rw-r--r-- | wp-includes/block-supports/layout.php | 191 | ||||
| -rw-r--r-- | wp-includes/block-supports/shadow.php | 6 | ||||
| -rw-r--r-- | wp-includes/block-supports/typography.php | 68 |
7 files changed, 610 insertions, 159 deletions
diff --git a/wp-includes/block-supports/background.php b/wp-includes/block-supports/background.php index 9b82e6a..ff50be3 100644 --- a/wp-includes/block-supports/background.php +++ b/wp-includes/block-supports/background.php @@ -41,6 +41,8 @@ function wp_register_background_support( $block_type ) { * * @since 6.4.0 * @since 6.5.0 Added support for `backgroundPosition` and `backgroundRepeat` output. + * @since 6.6.0 Removed requirement for `backgroundImage.source`. A file/url is the default. + * * @access private * * @param string $block_content Rendered block content. @@ -54,52 +56,27 @@ function wp_render_background_support( $block_content, $block ) { if ( ! $has_background_image_support || - wp_should_skip_block_supports_serialization( $block_type, 'background', 'backgroundImage' ) + wp_should_skip_block_supports_serialization( $block_type, 'background', 'backgroundImage' ) || + ! isset( $block_attributes['style']['background'] ) ) { return $block_content; } - $background_image_source = isset( $block_attributes['style']['background']['backgroundImage']['source'] ) - ? $block_attributes['style']['background']['backgroundImage']['source'] - : null; - $background_image_url = isset( $block_attributes['style']['background']['backgroundImage']['url'] ) - ? $block_attributes['style']['background']['backgroundImage']['url'] - : null; - - if ( ! $background_image_source && ! $background_image_url ) { - return $block_content; - } - - $background_size = isset( $block_attributes['style']['background']['backgroundSize'] ) - ? $block_attributes['style']['background']['backgroundSize'] - : 'cover'; - $background_position = isset( $block_attributes['style']['background']['backgroundPosition'] ) - ? $block_attributes['style']['background']['backgroundPosition'] - : null; - $background_repeat = isset( $block_attributes['style']['background']['backgroundRepeat'] ) - ? $block_attributes['style']['background']['backgroundRepeat'] - : null; - - $background_block_styles = array(); + $background_styles = array(); + $background_styles['backgroundImage'] = isset( $block_attributes['style']['background']['backgroundImage'] ) ? $block_attributes['style']['background']['backgroundImage'] : array(); - if ( - 'file' === $background_image_source && - $background_image_url - ) { - // Set file based background URL. - $background_block_styles['backgroundImage']['url'] = $background_image_url; - // Only output the background size and repeat when an image url is set. - $background_block_styles['backgroundSize'] = $background_size; - $background_block_styles['backgroundRepeat'] = $background_repeat; - $background_block_styles['backgroundPosition'] = $background_position; + if ( ! empty( $background_styles['backgroundImage'] ) ) { + $background_styles['backgroundSize'] = isset( $block_attributes['style']['background']['backgroundSize'] ) ? $block_attributes['style']['background']['backgroundSize'] : 'cover'; + $background_styles['backgroundPosition'] = isset( $block_attributes['style']['background']['backgroundPosition'] ) ? $block_attributes['style']['background']['backgroundPosition'] : null; + $background_styles['backgroundRepeat'] = isset( $block_attributes['style']['background']['backgroundRepeat'] ) ? $block_attributes['style']['background']['backgroundRepeat'] : null; // If the background size is set to `contain` and no position is set, set the position to `center`. - if ( 'contain' === $background_size && ! isset( $background_position ) ) { - $background_block_styles['backgroundPosition'] = 'center'; + if ( 'contain' === $background_styles['backgroundSize'] && ! $background_styles['backgroundPosition'] ) { + $background_styles['backgroundPosition'] = 'center'; } } - $styles = wp_style_engine_get_styles( array( 'background' => $background_block_styles ) ); + $styles = wp_style_engine_get_styles( array( 'background' => $background_styles ) ); if ( ! empty( $styles['css'] ) ) { // Inject background styles to the first element, presuming it's the wrapper, if it exists. diff --git a/wp-includes/block-supports/block-style-variations.php b/wp-includes/block-supports/block-style-variations.php new file mode 100644 index 0000000..77659bf --- /dev/null +++ b/wp-includes/block-supports/block-style-variations.php @@ -0,0 +1,312 @@ +<?php +/** + * Block support to enable per-section styling of block types via + * block style variations. + * + * @package WordPress + * @since 6.6.0 + */ + +/** + * Generate block style variation instance name. + * + * @since 6.6.0 + * @access private + * + * @param array $block Block object. + * @param string $variation Slug for the block style variation. + * + * @return string The unique variation name. + */ +function wp_create_block_style_variation_instance_name( $block, $variation ) { + return $variation . '--' . md5( serialize( $block ) ); +} + +/** + * Determines the block style variation names within a CSS class string. + * + * @since 6.6.0 + * + * @param string $class_string CSS class string to look for a variation in. + * + * @return array|null The block style variation name if found. + */ +function wp_get_block_style_variation_name_from_class( $class_string ) { + if ( ! is_string( $class_string ) ) { + return null; + } + + preg_match_all( '/\bis-style-(?!default)(\S+)\b/', $class_string, $matches ); + return $matches[1] ?? null; +} + +/** + * Recursively resolves any `ref` values within a block style variation's data. + * + * @since 6.6.0 + * @access private + * + * @param array $variation_data Reference to the variation data being processed. + * @param array $theme_json Theme.json data to retrieve referenced values from. + */ +function wp_resolve_block_style_variation_ref_values( &$variation_data, $theme_json ) { + foreach ( $variation_data as $key => &$value ) { + // Only need to potentially process arrays. + if ( is_array( $value ) ) { + // If ref value is set, attempt to find its matching value and update it. + if ( array_key_exists( 'ref', $value ) ) { + // Clean up any invalid ref value. + if ( empty( $value['ref'] ) || ! is_string( $value['ref'] ) ) { + unset( $variation_data[ $key ] ); + } + + $value_path = explode( '.', $value['ref'] ?? '' ); + $ref_value = _wp_array_get( $theme_json, $value_path ); + + // Only update the current value if the referenced path matched a value. + if ( null === $ref_value ) { + unset( $variation_data[ $key ] ); + } else { + $value = $ref_value; + } + } else { + // Recursively look for ref instances. + wp_resolve_block_style_variation_ref_values( $value, $theme_json ); + } + } + } +} +/** + * Render the block style variation's styles. + * + * In the case of nested blocks with variations applied, we want the parent + * variation's styles to be rendered before their descendants. This solves the + * issue of a block type being styled in both the parent and descendant: we want + * the descendant style to take priority, and this is done by loading it after, + * in the DOM order. This is why the variation stylesheet generation is in a + * different filter. + * + * @since 6.6.0 + * @access private + * + * @param array $parsed_block The parsed block. + * + * @return array The parsed block with block style variation classname added. + */ +function wp_render_block_style_variation_support_styles( $parsed_block ) { + $classes = $parsed_block['attrs']['className'] ?? null; + $variations = wp_get_block_style_variation_name_from_class( $classes ); + + if ( ! $variations ) { + return $parsed_block; + } + + $tree = WP_Theme_JSON_Resolver::get_merged_data(); + $theme_json = $tree->get_raw_data(); + + // Only the first block style variation with data is supported. + $variation_data = array(); + foreach ( $variations as $variation ) { + $variation_data = $theme_json['styles']['blocks'][ $parsed_block['blockName'] ]['variations'][ $variation ] ?? array(); + + if ( ! empty( $variation_data ) ) { + break; + } + } + + if ( empty( $variation_data ) ) { + return $parsed_block; + } + + /* + * Recursively resolve any ref values with the appropriate value within the + * theme_json data. + */ + wp_resolve_block_style_variation_ref_values( $variation_data, $theme_json ); + + $variation_instance = wp_create_block_style_variation_instance_name( $parsed_block, $variation ); + $class_name = "is-style-$variation_instance"; + $updated_class_name = $parsed_block['attrs']['className'] . " $class_name"; + + /* + * Even though block style variations are effectively theme.json partials, + * they can't be processed completely as though they are. + * + * Block styles support custom selectors to direct specific types of styles + * to inner elements. For example, borders on Image block's get applied to + * the inner `img` element rather than the wrapping `figure`. + * + * The following relocates the "root" block style variation styles to + * under an appropriate blocks property to leverage the preexisting style + * generation for simple block style variations. This way they get the + * custom selectors they need. + * + * The inner elements and block styles for the variation itself are + * still included at the top level but scoped by the variation's selector + * when the stylesheet is generated. + */ + $elements_data = $variation_data['elements'] ?? array(); + $blocks_data = $variation_data['blocks'] ?? array(); + unset( $variation_data['elements'] ); + unset( $variation_data['blocks'] ); + + _wp_array_set( + $blocks_data, + array( $parsed_block['blockName'], 'variations', $variation_instance ), + $variation_data + ); + + $config = array( + 'version' => WP_Theme_JSON::LATEST_SCHEMA, + 'styles' => array( + 'elements' => $elements_data, + 'blocks' => $blocks_data, + ), + ); + + // Turn off filter that excludes block nodes. They are needed here for the variation's inner block types. + if ( ! is_admin() ) { + remove_filter( 'wp_theme_json_get_style_nodes', 'wp_filter_out_block_nodes' ); + } + + // Temporarily prevent variation instance from being sanitized while processing theme.json. + $styles_registry = WP_Block_Styles_Registry::get_instance(); + $styles_registry->register( $parsed_block['blockName'], array( 'name' => $variation_instance ) ); + + $variation_theme_json = new WP_Theme_JSON( $config, 'blocks' ); + $variation_styles = $variation_theme_json->get_stylesheet( + array( 'styles' ), + array( 'custom' ), + array( + 'include_block_style_variations' => true, + 'skip_root_layout_styles' => true, + 'scope' => ".$class_name", + ) + ); + + // Clean up temporary block style now instance styles have been processed. + $styles_registry->unregister( $parsed_block['blockName'], $variation_instance ); + + // Restore filter that excludes block nodes. + if ( ! is_admin() ) { + add_filter( 'wp_theme_json_get_style_nodes', 'wp_filter_out_block_nodes' ); + } + + if ( empty( $variation_styles ) ) { + return $parsed_block; + } + + wp_register_style( 'block-style-variation-styles', false, array( 'global-styles', 'wp-block-library' ) ); + wp_add_inline_style( 'block-style-variation-styles', $variation_styles ); + + /* + * Add variation instance class name to block's className string so it can + * be enforced in the block markup via render_block filter. + */ + _wp_array_set( $parsed_block, array( 'attrs', 'className' ), $updated_class_name ); + + return $parsed_block; +} + +/** + * Ensure the variation block support class name generated and added to + * block attributes in the `render_block_data` filter gets applied to the + * block's markup. + * + * @see wp_render_block_style_variation_support_styles + * + * @since 6.6.0 + * @access private + * + * @param string $block_content Rendered block content. + * @param array $block Block object. + * + * @return string Filtered block content. + */ +function wp_render_block_style_variation_class_name( $block_content, $block ) { + if ( ! $block_content || empty( $block['attrs']['className'] ) ) { + return $block_content; + } + + /* + * Matches a class prefixed by `is-style`, followed by the + * variation slug, then `--`, and finally a hash. + * + * See `wp_create_block_style_variation_instance_name` for class generation. + */ + preg_match( '/\bis-style-(\S+?--\w+)\b/', $block['attrs']['className'], $matches ); + + if ( empty( $matches ) ) { + return $block_content; + } + + $tags = new WP_HTML_Tag_Processor( $block_content ); + + if ( $tags->next_tag() ) { + /* + * Ensure the variation instance class name set in the + * `render_block_data` filter is applied in markup. + * See `wp_render_block_style_variation_support_styles`. + */ + $tags->add_class( $matches[0] ); + } + + return $tags->get_updated_html(); +} + +/** + * Enqueues styles for block style variations. + * + * @since 6.6.0 + * @access private + */ +function wp_enqueue_block_style_variation_styles() { + wp_enqueue_style( 'block-style-variation-styles' ); +} + +// Register the block support. +WP_Block_Supports::get_instance()->register( 'block-style-variation', array() ); + +add_filter( 'render_block_data', 'wp_render_block_style_variation_support_styles', 10, 2 ); +add_filter( 'render_block', 'wp_render_block_style_variation_class_name', 10, 2 ); +add_action( 'wp_enqueue_scripts', 'wp_enqueue_block_style_variation_styles', 1 ); + +/** + * Registers block style variations read in from theme.json partials. + * + * @since 6.6.0 + * @access private + * + * @param array $variations Shared block style variations. + */ +function wp_register_block_style_variations_from_theme_json_partials( $variations ) { + if ( empty( $variations ) ) { + return; + } + + $registry = WP_Block_Styles_Registry::get_instance(); + + foreach ( $variations as $variation ) { + if ( empty( $variation['blockTypes'] ) || empty( $variation['styles'] ) ) { + continue; + } + + $variation_name = $variation['slug'] ?? _wp_to_kebab_case( $variation['title'] ); + $variation_label = $variation['title'] ?? $variation_name; + + foreach ( $variation['blockTypes'] as $block_type ) { + $registered_styles = $registry->get_registered_styles_for_block( $block_type ); + + // Register block style variation if it hasn't already been registered. + if ( ! array_key_exists( $variation_name, $registered_styles ) ) { + register_block_style( + $block_type, + array( + 'name' => $variation_name, + 'label' => $variation_label, + ) + ); + } + } + } +} diff --git a/wp-includes/block-supports/duotone.php b/wp-includes/block-supports/duotone.php index a90eb76..df328c3 100644 --- a/wp-includes/block-supports/duotone.php +++ b/wp-includes/block-supports/duotone.php @@ -42,6 +42,7 @@ WP_Block_Supports::get_instance()->register( // Add classnames to blocks using duotone support. add_filter( 'render_block', array( 'WP_Duotone', 'render_duotone_support' ), 10, 3 ); +add_filter( 'render_block_core/image', array( 'WP_Duotone', 'restore_image_outer_container' ), 10, 1 ); // Enqueue styles. // Block styles (core-block-supports-inline-css) before the style engine (wp_enqueue_stored_styles). diff --git a/wp-includes/block-supports/elements.php b/wp-includes/block-supports/elements.php index e7fa76a..5678dfc 100644 --- a/wp-includes/block-supports/elements.php +++ b/wp-includes/block-supports/elements.php @@ -20,29 +20,23 @@ function wp_get_elements_class_name( $block ) { } /** - * Updates the block content with elements class names. + * Determines whether an elements class name should be added to the block. * - * @since 5.8.0 - * @since 6.4.0 Added support for button and heading element styling. + * @since 6.6.0 * @access private * - * @param string $block_content Rendered block content. - * @param array $block Block object. - * @return string Filtered block content. + * @param array $block Block object. + * @param array $options Per element type options e.g. whether to skip serialization. + * @return boolean Whether the block needs an elements class name. */ -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; +function wp_should_add_elements_class_name( $block, $options ) { + if ( ! isset( $block['attrs']['style']['elements'] ) ) { + return false; } $element_color_properties = array( 'button' => array( - 'skip' => wp_should_skip_block_supports_serialization( $block_type, 'color', 'button' ), + 'skip' => isset( $options['button']['skip'] ) ? $options['button']['skip'] : false, 'paths' => array( array( 'button', 'color', 'text' ), array( 'button', 'color', 'background' ), @@ -50,14 +44,14 @@ function wp_render_elements_support( $block_content, $block ) { ), ), 'link' => array( - 'skip' => wp_should_skip_block_supports_serialization( $block_type, 'color', 'link' ), + 'skip' => isset( $options['link']['skip'] ) ? $options['link']['skip'] : false, 'paths' => array( array( 'link', 'color', 'text' ), array( 'link', ':hover', 'color', 'text' ), ), ), 'heading' => array( - 'skip' => wp_should_skip_block_supports_serialization( $block_type, 'color', 'heading' ), + 'skip' => isset( $options['heading']['skip'] ) ? $options['heading']['skip'] : false, 'paths' => array( array( 'heading', 'color', 'text' ), array( 'heading', 'color', 'background' ), @@ -84,14 +78,6 @@ function wp_render_elements_support( $block_content, $block ) { ), ); - $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 ) { @@ -101,31 +87,16 @@ function wp_render_elements_support( $block_content, $block ) { 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(); + return true; } } } - // If no custom attributes were found then there's nothing to modify. - return $block_content; + return false; } /** - * Renders the elements stylesheet. + * Render the elements stylesheet and adds elements class name to block as required. * * 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: @@ -133,18 +104,36 @@ function wp_render_elements_support( $block_content, $block ) { * * @since 6.0.0 * @since 6.1.0 Implemented the style engine to generate CSS and classnames. + * @since 6.6.0 Element block support class and styles are generated via the `render_block_data` filter instead of `pre_render_block`. * @access private * - * @param string|null $pre_render The pre-rendered content. Default null. - * @param array $block The block being rendered. - * @return null + * @param array $parsed_block The parsed block. + * @return array The same parsed block with elements classname added if appropriate. */ -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; +function wp_render_elements_support_styles( $parsed_block ) { + /* + * The generation of element styles and classname were moved to the + * `render_block_data` filter in 6.6.0 to avoid filtered attributes + * breaking the application of the elements CSS class. + * + * @see https://github.com/WordPress/gutenberg/pull/59535 + * + * The change in filter means, the argument types for this function + * have changed and require deprecating. + */ + if ( is_string( $parsed_block ) ) { + _deprecated_argument( + __FUNCTION__, + '6.6.0', + __( 'Use as a `pre_render_block` filter is deprecated. Use with `render_block_data` instead.' ) + ); + } + + $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $parsed_block['blockName'] ); + $element_block_styles = isset( $parsed_block['attrs']['style']['elements'] ) ? $parsed_block['attrs']['style']['elements'] : null; if ( ! $element_block_styles ) { - return null; + return $parsed_block; } $skip_link_color_serialization = wp_should_skip_block_supports_serialization( $block_type, 'color', 'link' ); @@ -155,11 +144,25 @@ function wp_render_elements_support_styles( $pre_render, $block ) { $skip_button_color_serialization; if ( $skips_all_element_color_serialization ) { - return null; + return $parsed_block; } - $class_name = wp_get_elements_class_name( $block ); + $options = array( + 'button' => array( 'skip' => $skip_button_color_serialization ), + 'link' => array( 'skip' => $skip_link_color_serialization ), + 'heading' => array( 'skip' => $skip_heading_color_serialization ), + ); + + if ( ! wp_should_add_elements_class_name( $parsed_block, $options ) ) { + return $parsed_block; + } + $class_name = wp_get_elements_class_name( $parsed_block ); + $updated_class_name = isset( $parsed_block['attrs']['className'] ) ? $parsed_block['attrs']['className'] . " $class_name" : $class_name; + + _wp_array_set( $parsed_block, array( 'attrs', 'className' ), $updated_class_name ); + + // Generate element styles based on selector and store in style engine for enqueuing. $element_types = array( 'button' => array( 'selector' => ".$class_name .wp-element-button, .$class_name .wp-block-button__link", @@ -225,8 +228,37 @@ function wp_render_elements_support_styles( $pre_render, $block ) { } } - return null; + return $parsed_block; +} + +/** + * Ensure the elements block support class name generated, and added to + * block attributes, in the `render_block_data` filter gets applied to the + * block's markup. + * + * @see wp_render_elements_support_styles + * @since 6.6.0 + * + * @param string $block_content Rendered block content. + * @param array $block Block object. + * @return string Filtered block content. + */ +function wp_render_elements_class_name( $block_content, $block ) { + $class_string = $block['attrs']['className'] ?? ''; + preg_match( '/\bwp-elements-\S+\b/', $class_string, $matches ); + + if ( empty( $matches ) ) { + return $block_content; + } + + $tags = new WP_HTML_Tag_Processor( $block_content ); + + if ( $tags->next_tag() ) { + $tags->add_class( $matches[0] ); + } + + return $tags->get_updated_html(); } -add_filter( 'render_block', 'wp_render_elements_support', 10, 2 ); -add_filter( 'pre_render_block', 'wp_render_elements_support_styles', 10, 2 ); +add_filter( 'render_block', 'wp_render_elements_class_name', 10, 2 ); +add_filter( 'render_block_data', 'wp_render_elements_support_styles', 10, 1 ); diff --git a/wp-includes/block-supports/layout.php b/wp-includes/block-supports/layout.php index f5acd75..ccfb200 100644 --- a/wp-includes/block-supports/layout.php +++ b/wp-includes/block-supports/layout.php @@ -14,6 +14,7 @@ * also be updated. * * @since 6.3.0 + * @since 6.6.0 Updated specificity for compatibility with 0-1-0 global styles specificity. * @access private * * @return array[] Layout definitions. @@ -51,13 +52,13 @@ function wp_get_layout_definitions() { ), 'spacingStyles' => array( array( - 'selector' => ' > :first-child:first-child', + 'selector' => ' > :first-child', 'rules' => array( 'margin-block-start' => '0', ), ), array( - 'selector' => ' > :last-child:last-child', + 'selector' => ' > :last-child', 'rules' => array( 'margin-block-end' => '0', ), @@ -116,13 +117,13 @@ function wp_get_layout_definitions() { ), 'spacingStyles' => array( array( - 'selector' => ' > :first-child:first-child', + 'selector' => ' > :first-child', 'rules' => array( 'margin-block-start' => '0', ), ), array( - 'selector' => ' > :last-child:last-child', + 'selector' => ' > :last-child', 'rules' => array( 'margin-block-end' => '0', ), @@ -150,7 +151,7 @@ function wp_get_layout_definitions() { ), ), array( - 'selector' => ' > *', + 'selector' => ' > :is(*, div)', // :is(*, div) instead of just * increases the specificity by 001. 'rules' => array( 'margin' => '0', ), @@ -172,7 +173,7 @@ function wp_get_layout_definitions() { 'displayMode' => 'grid', 'baseStyles' => array( array( - 'selector' => ' > *', + 'selector' => ' > :is(*, div)', // :is(*, div) instead of just * increases the specificity by 001. 'rules' => array( 'margin' => '0', ), @@ -222,6 +223,8 @@ function wp_register_layout_support( $block_type ) { * @since 5.9.0 * @since 6.1.0 Added `$block_spacing` param, use style engine to enqueue styles. * @since 6.3.0 Added grid layout type. + * @since 6.6.0 Removed duplicated selector from layout styles. + * Enabled negative margins for alignfull children of blocks with custom padding. * @access private * * @param string $selector CSS selector. @@ -261,7 +264,7 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false ), ), array( - 'selector' => "$selector$selector > * + *", + 'selector' => "$selector > * + *", 'declarations' => array( 'margin-block-start' => $gap_value, 'margin-block-end' => '0', @@ -305,32 +308,40 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false 'declarations' => array( 'max-width' => 'none' ), ) ); + } - if ( isset( $block_spacing ) ) { - $block_spacing_values = wp_style_engine_get_styles( - array( - 'spacing' => $block_spacing, - ) - ); + 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)" ), - ); + /* + * 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']; + // Add unit if 0. + if ( '0' === $padding_right ) { + $padding_right = '0px'; } - 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)" ), - ); + $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']; + // Add unit if 0. + if ( '0' === $padding_left ) { + $padding_left = '0px'; } + $layout_styles[] = array( + 'selector' => "$selector > .alignfull", + 'declarations' => array( 'margin-left' => "calc($padding_left * -1)" ), + ); } } @@ -370,7 +381,7 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false ), ), array( - 'selector' => "$selector$selector > * + *", + 'selector' => "$selector > * + *", 'declarations' => array( 'margin-block-start' => $gap_value, 'margin-block-end' => '0', @@ -489,7 +500,10 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false $layout_styles[] = array( 'selector' => $selector, - 'declarations' => array( 'grid-template-columns' => 'repeat(auto-fill, minmax(min(' . $minimum_column_width . ', 100%), 1fr))' ), + 'declarations' => array( + 'grid-template-columns' => 'repeat(auto-fill, minmax(min(' . $minimum_column_width . ', 100%), 1fr))', + 'container-type' => 'inline-size', + ), ); } @@ -546,6 +560,7 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false * @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`. + * @since 6.6.0 Removed duplicate container class from layout styles. * @access private * * @param string $block_content Rendered block content. @@ -555,37 +570,92 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false 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; + $child_layout = isset( $block['attrs']['style']['layout'] ) ? $block['attrs']['style']['layout'] : null; - if ( ! $block_supports_layout && ! $layout_from_parent ) { + if ( ! $block_supports_layout && ! $child_layout ) { 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 specific logic. + if ( $child_layout ) { + $container_content_class = wp_unique_prefixed_id( 'wp-container-content-' ); + $child_layout_declarations = array(); + $child_layout_styles = array(); - $child_layout_styles = array(); + $self_stretch = isset( $child_layout['selfStretch'] ) ? $child_layout['selfStretch'] : null; + + if ( 'fixed' === $self_stretch && isset( $child_layout['flexSize'] ) ) { + $child_layout_declarations['flex-basis'] = $child_layout['flexSize']; + $child_layout_declarations['box-sizing'] = 'border-box'; + } elseif ( 'fill' === $self_stretch ) { + $child_layout_declarations['flex-grow'] = '1'; + } + + if ( isset( $child_layout['columnSpan'] ) ) { + $column_span = $child_layout['columnSpan']; + $child_layout_declarations['grid-column'] = "span $column_span"; + } + if ( isset( $child_layout['rowSpan'] ) ) { + $row_span = $child_layout['rowSpan']; + $child_layout_declarations['grid-row'] = "span $row_span"; + } + $child_layout_styles[] = array( + 'selector' => ".$container_content_class", + 'declarations' => $child_layout_declarations, + ); + + /* + * If columnSpan is set, and the parent grid is responsive, i.e. if it has a minimumColumnWidth set, + * the columnSpan should be removed on small grids. If there's a minimumColumnWidth, the grid is responsive. + * But if the minimumColumnWidth value wasn't changed, it won't be set. In that case, if columnCount doesn't + * exist, we can assume that the grid is responsive. + */ + if ( isset( $child_layout['columnSpan'] ) && ( isset( $block['parentLayout']['minimumColumnWidth'] ) || ! isset( $block['parentLayout']['columnCount'] ) ) ) { + $column_span_number = floatval( $child_layout['columnSpan'] ); + $parent_column_width = isset( $block['parentLayout']['minimumColumnWidth'] ) ? $block['parentLayout']['minimumColumnWidth'] : '12rem'; + $parent_column_value = floatval( $parent_column_width ); + $parent_column_unit = explode( $parent_column_value, $parent_column_width ); + + /* + * If there is no unit, the width has somehow been mangled so we reset both unit and value + * to defaults. + * Additionally, the unit should be one of px, rem or em, so that also needs to be checked. + */ + if ( count( $parent_column_unit ) <= 1 ) { + $parent_column_unit = 'rem'; + $parent_column_value = 12; + } else { + $parent_column_unit = $parent_column_unit[1]; + + if ( ! in_array( $parent_column_unit, array( 'px', 'rem', 'em' ), true ) ) { + $parent_column_unit = 'rem'; + } + } + + /* + * A default gap value is used for this computation because custom gap values may not be + * viable to use in the computation of the container query value. + */ + $default_gap_value = 'px' === $parent_column_unit ? 24 : 1.5; + $container_query_value = $column_span_number * $parent_column_value + ( $column_span_number - 1 ) * $default_gap_value; + $container_query_value = $container_query_value . $parent_column_unit; - 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( + 'rules_group' => "@container (max-width: $container_query_value )", 'selector' => ".$container_content_class", 'declarations' => array( - 'flex-grow' => '1', + 'grid-column' => '1/-1', ), ); } - wp_style_engine_get_stylesheet_from_css_rules( + /* + * Add to the style engine store to enqueue and render layout styles. + * Return styles here just to check if any exist. + */ + $child_css = wp_style_engine_get_stylesheet_from_css_rules( $child_layout_styles, array( 'context' => 'block-supports', @@ -593,7 +663,9 @@ function wp_render_layout_support_flag( $block_content, $block ) { ) ); - $outer_class_names[] = $container_content_class; + if ( $child_css ) { + $outer_class_names[] = $container_content_class; + } } // Prep the processor for modifying the block output. @@ -735,7 +807,7 @@ function wp_render_layout_support_flag( $block_content, $block ) { $has_block_gap_support = isset( $block_gap ); $style = wp_get_layout_style( - ".$container_class.$container_class", + ".$container_class", $used_layout, $has_block_gap_support, $gap_value, @@ -851,6 +923,27 @@ function wp_render_layout_support_flag( $block_content, $block ) { return $processor->get_updated_html(); } +/** + * Check if the parent block exists and if it has a layout attribute. + * If it does, add the parent layout to the parsed block + * + * @since 6.6.0 + * @access private + * + * @param array $parsed_block The parsed block. + * @param array $source_block The source block. + * @param WP_Block $parent_block The parent block. + * @return array The parsed block with parent layout attribute if it exists. + */ +function wp_add_parent_layout_to_parsed_block( $parsed_block, $source_block, $parent_block ) { + if ( $parent_block && isset( $parent_block->parsed_block['attrs']['layout'] ) ) { + $parsed_block['parentLayout'] = $parent_block->parsed_block['attrs']['layout']; + } + return $parsed_block; +} + +add_filter( 'render_block_data', 'wp_add_parent_layout_to_parsed_block', 10, 3 ); + // Register the block support. WP_Block_Supports::get_instance()->register( 'layout', diff --git a/wp-includes/block-supports/shadow.php b/wp-includes/block-supports/shadow.php index 0ccaf3f..fffc72e 100644 --- a/wp-includes/block-supports/shadow.php +++ b/wp-includes/block-supports/shadow.php @@ -43,6 +43,7 @@ function wp_register_shadow_support( $block_type ) { * This will be applied to the block markup in the front-end. * * @since 6.3.0 + * @since 6.6.0 Return early if __experimentalSkipSerialization is true. * @access private * * @param WP_Block_Type $block_type Block type. @@ -52,7 +53,10 @@ function wp_register_shadow_support( $block_type ) { function wp_apply_shadow_support( $block_type, $block_attributes ) { $has_shadow_support = block_has_support( $block_type, 'shadow', false ); - if ( ! $has_shadow_support ) { + if ( + ! $has_shadow_support || + wp_should_skip_block_supports_serialization( $block_type, 'shadow' ) + ) { return array(); } diff --git a/wp-includes/block-supports/typography.php b/wp-includes/block-supports/typography.php index e7d081c..334c019 100644 --- a/wp-includes/block-supports/typography.php +++ b/wp-includes/block-supports/typography.php @@ -31,6 +31,7 @@ function wp_register_typography_support( $block_type ) { $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_align_support = isset( $typography_supports['textAlign'] ) ? $typography_supports['textAlign'] : 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; @@ -42,6 +43,7 @@ function wp_register_typography_support( $block_type ) { || $has_font_weight_support || $has_letter_spacing_support || $has_line_height_support + || $has_text_align_support || $has_text_columns_support || $has_text_decoration_support || $has_text_transform_support @@ -106,6 +108,7 @@ function wp_apply_typography_support( $block_type, $block_attributes ) { $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_align_support = isset( $typography_supports['textAlign'] ) ? $typography_supports['textAlign'] : 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; @@ -117,6 +120,7 @@ function wp_apply_typography_support( $block_type, $block_attributes ) { $should_skip_font_style = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontStyle' ); $should_skip_font_weight = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontWeight' ); $should_skip_line_height = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'lineHeight' ); + $should_skip_text_align = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textAlign' ); $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' ); @@ -176,6 +180,12 @@ function wp_apply_typography_support( $block_type, $block_attributes ) { : null; } + if ( $has_text_align_support && ! $should_skip_text_align ) { + $typography_block_styles['textAlign'] = isset( $block_attributes['style']['typography']['textAlign'] ) + ? $block_attributes['style']['typography']['textAlign'] + : 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'] @@ -225,13 +235,22 @@ function wp_apply_typography_support( $block_type, $block_attributes ) { } $attributes = array(); + $classnames = 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']; + $classnames[] = $styles['classnames']; + } + + if ( $has_text_align_support && ! $should_skip_text_align && isset( $block_attributes['style']['typography']['textAlign'] ) ) { + $classnames[] = 'has-text-align-' . $block_attributes['style']['typography']['textAlign']; + } + + if ( ! empty( $classnames ) ) { + $attributes['class'] = implode( ' ', $classnames ); } if ( ! empty( $styles['css'] ) ) { @@ -498,19 +517,22 @@ function wp_get_computed_fluid_typography_value( $args = array() ) { * @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. + * @since 6.6.0 Deprecated bool argument $should_use_fluid_typography. * - * @param array $preset { + * @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. + * @param bool|array $settings Optional Theme JSON settings array that overrides any global theme settings. + * 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 ) { + + +function wp_get_typography_font_size_value( $preset, $settings = array() ) { if ( ! isset( $preset['size'] ) ) { return null; } @@ -523,25 +545,35 @@ function wp_get_typography_font_size_value( $preset, $should_use_fluid_typograph 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; + /* + * As a boolean (deprecated since 6.6), $settings acts as an override to switch fluid typography "on" (`true`) or "off" (`false`). + */ + if ( is_bool( $settings ) ) { + _deprecated_argument( __FUNCTION__, '6.6.0', __( '`boolean` type for second argument `$settings` is deprecated. Use `array()` instead.' ) ); + $settings = array( + 'typography' => array( + 'fluid' => $settings, + ), + ); } + // Fallback to global settings as default. + $global_settings = wp_get_global_settings(); + $settings = wp_parse_args( + $settings, + $global_settings + ); + + $typography_settings = isset( $settings['typography'] ) ? $settings['typography'] : array(); + $should_use_fluid_typography = ! empty( $typography_settings['fluid'] ); + if ( ! $should_use_fluid_typography ) { return $preset['size']; } - $fluid_settings = isset( $typography_settings['fluid'] ) && is_array( $typography_settings['fluid'] ) - ? $typography_settings['fluid'] - : array(); + // $typography_settings['fluid'] can be a bool or an array. Normalize to array. + $fluid_settings = is_array( $typography_settings['fluid'] ) ? $typography_settings['fluid'] : array(); + $layout_settings = isset( $settings['layout'] ) ? $settings['layout'] : array(); // Defaults. $default_maximum_viewport_width = '1600px'; |