From 2140b001bd659860dc1dc282efe3635e45e65db2 Mon Sep 17 00:00:00 2001 From: isabel_brison Date: Wed, 31 Jan 2024 02:54:17 +0000 Subject: [PATCH] Editor: introduce `dimensions.aspectRatio` block support. Adds front end rendering logic for the `dimensions.aspectRatio` block support as well as the required logic in `WP_Theme_JSON` and the style engine. Props andrewserong. Fixes #60365. Built from https://develop.svn.wordpress.org/trunk@57491 git-svn-id: http://core.svn.wordpress.org/trunk@56992 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-includes/block-supports/dimensions.php | 80 +++++++++++++++++++ wp-includes/class-wp-theme-json.php | 26 ++++-- .../style-engine/class-wp-style-engine.php | 14 +++- wp-includes/version.php | 2 +- 4 files changed, 114 insertions(+), 8 deletions(-) diff --git a/wp-includes/block-supports/dimensions.php b/wp-includes/block-supports/dimensions.php index a889e78a16..da68f187c3 100644 --- a/wp-includes/block-supports/dimensions.php +++ b/wp-includes/block-supports/dimensions.php @@ -83,6 +83,86 @@ function wp_apply_dimensions_support( $block_type, $block_attributes ) { return $attributes; } +/** + * Renders server-side dimensions styles to the block wrapper. + * This block support uses the `render_block` hook to ensure that + * it is also applied to non-server-rendered blocks. + * + * @since 6.5.0 + * @access private + * + * @param string $block_content Rendered block content. + * @param array $block Block object. + * @return string Filtered block content. + */ +function wp_render_dimensions_support( $block_content, $block ) { + $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] ); + $block_attributes = ( isset( $block['attrs'] ) && is_array( $block['attrs'] ) ) ? $block['attrs'] : array(); + $has_aspect_ratio_support = block_has_support( $block_type, array( 'dimensions', 'aspectRatio' ), false ); + + if ( + ! $has_aspect_ratio_support || + wp_should_skip_block_supports_serialization( $block_type, 'dimensions', 'aspectRatio' ) + ) { + return $block_content; + } + + $dimensions_block_styles = array(); + $dimensions_block_styles['aspectRatio'] = $block_attributes['style']['dimensions']['aspectRatio'] ?? null; + + // To ensure the aspect ratio does not get overridden by `minHeight` unset any existing rule. + if ( + isset( $dimensions_block_styles['aspectRatio'] ) + ) { + $dimensions_block_styles['minHeight'] = 'unset'; + } elseif ( + isset( $block_attributes['style']['dimensions']['minHeight'] ) || + isset( $block_attributes['minHeight'] ) + ) { + $dimensions_block_styles['aspectRatio'] = 'unset'; + } + + $styles = wp_style_engine_get_styles( array( 'dimensions' => $dimensions_block_styles ) ); + + if ( ! empty( $styles['css'] ) ) { + // Inject dimensions styles to the first element, presuming it's the wrapper, if it exists. + $tags = new WP_HTML_Tag_Processor( $block_content ); + + if ( $tags->next_tag() ) { + $existing_style = $tags->get_attribute( 'style' ); + $updated_style = ''; + + if ( ! empty( $existing_style ) ) { + $updated_style = $existing_style; + if ( ! str_ends_with( $existing_style, ';' ) ) { + $updated_style .= ';'; + } + } + + $updated_style .= $styles['css']; + $tags->set_attribute( 'style', $updated_style ); + + if ( ! empty( $styles['classnames'] ) ) { + foreach ( explode( ' ', $styles['classnames'] ) as $class_name ) { + if ( + str_contains( $class_name, 'aspect-ratio' ) && + ! isset( $block_attributes['style']['dimensions']['aspectRatio'] ) + ) { + continue; + } + $tags->add_class( $class_name ); + } + } + } + + return $tags->get_updated_html(); + } + + return $block_content; +} + +add_filter( 'render_block', 'wp_render_dimensions_support', 10, 2 ); + // Register the block support. WP_Block_Supports::get_instance()->register( 'dimensions', diff --git a/wp-includes/class-wp-theme-json.php b/wp-includes/class-wp-theme-json.php index 8a06d81d47..1d92e5c35a 100644 --- a/wp-includes/class-wp-theme-json.php +++ b/wp-includes/class-wp-theme-json.php @@ -204,10 +204,12 @@ class WP_Theme_JSON { * @since 6.2.0 Added `outline-*`, and `min-height` properties. * @since 6.3.0 Added `column-count` property. * @since 6.4.0 Added `writing-mode` property. + * @since 6.5.0 Added `aspect-ratio` property. * * @var array */ const PROPERTIES_METADATA = array( + 'aspect-ratio' => array( 'dimensions', 'aspectRatio' ), 'background' => array( 'color', 'gradient' ), 'background-color' => array( 'color', 'background' ), 'border-radius' => array( 'border', 'radius' ), @@ -344,8 +346,8 @@ class WP_Theme_JSON { * @since 6.3.0 Added support for `typography.textColumns`, removed `layout.definitions`. * @since 6.4.0 Added support for `layout.allowEditing`, `background.backgroundImage`, * `typography.writingMode`, `lightbox.enabled` and `lightbox.allowEditing`. - * @since 6.5.0 Added support for `layout.allowCustomContentAndWideSize` and - * `background.backgroundSize`. + * @since 6.5.0 Added support for `layout.allowCustomContentAndWideSize`, + * `background.backgroundSize` and `dimensions.aspectRatio`. * @var array */ const VALID_SETTINGS = array( @@ -380,7 +382,8 @@ class WP_Theme_JSON { ), 'custom' => null, 'dimensions' => array( - 'minHeight' => null, + 'aspectRatio' => null, + 'minHeight' => null, ), 'layout' => array( 'contentSize' => null, @@ -438,6 +441,7 @@ class WP_Theme_JSON { * updated `blockGap` to be allowed at any level. * @since 6.2.0 Added `outline`, and `minHeight` properties. * @since 6.3.0 Added support for `typography.textColumns`. + * @since 6.5.0 Added support for `dimensions.aspectRatio`. * * @var array */ @@ -458,7 +462,8 @@ class WP_Theme_JSON { 'text' => null, ), 'dimensions' => array( - 'minHeight' => null, + 'aspectRatio' => null, + 'minHeight' => null, ), 'filter' => array( 'duotone' => null, @@ -575,7 +580,7 @@ class WP_Theme_JSON { * @since 6.0.0 * @since 6.2.0 Added `dimensions.minHeight` and `position.sticky`. * @since 6.4.0 Added `background.backgroundImage`. - * @since 6.5.0 Added `background.backgroundSize`. + * @since 6.5.0 Added `background.backgroundSize` and `dimensions.aspectRatio`. * @var array */ const APPEARANCE_TOOLS_OPT_INS = array( @@ -589,6 +594,7 @@ class WP_Theme_JSON { array( 'color', 'heading' ), array( 'color', 'button' ), array( 'color', 'caption' ), + array( 'dimensions', 'aspectRatio' ), array( 'dimensions', 'minHeight' ), array( 'position', 'sticky' ), array( 'spacing', 'blockGap' ), @@ -1921,6 +1927,7 @@ class WP_Theme_JSON { * @since 5.8.0 * @since 5.9.0 Added the `$settings` and `$properties` parameters. * @since 6.1.0 Added `$theme_json`, `$selector`, and `$use_root_padding` parameters. + * @since 6.5.0 Output a `min-height: unset` rule when `aspect-ratio` is set. * * @param array $styles Styles to process. * @param array $settings Theme settings. @@ -1992,6 +1999,15 @@ class WP_Theme_JSON { $value = wp_get_typography_font_size_value( array( 'size' => $value ) ); } + if ( 'aspect-ratio' === $css_property ) { + // For aspect ratio to work, other dimensions rules must be unset. + // This ensures that a fixed height does not override the aspect ratio. + $declarations[] = array( + 'name' => 'min-height', + 'value' => 'unset', + ); + } + $declarations[] = array( 'name' => $css_property, 'value' => $value, diff --git a/wp-includes/style-engine/class-wp-style-engine.php b/wp-includes/style-engine/class-wp-style-engine.php index 790e33f38c..99372b5d70 100644 --- a/wp-includes/style-engine/class-wp-style-engine.php +++ b/wp-includes/style-engine/class-wp-style-engine.php @@ -23,7 +23,8 @@ * @since 6.1.0 * @since 6.3.0 Added support for text-columns. * @since 6.4.0 Added support for background.backgroundImage. - * @since 6.5.0 Added support for background.backgroundPosition and background.backgroundRepeat. + * @since 6.5.0 Added support for background.backgroundPosition, + * background.backgroundRepeat and dimensions.aspectRatio. */ #[AllowDynamicProperties] final class WP_Style_Engine { @@ -190,7 +191,16 @@ final class WP_Style_Engine { ), ), 'dimensions' => array( - 'minHeight' => array( + 'aspectRatio' => array( + 'property_keys' => array( + 'default' => 'aspect-ratio', + ), + 'path' => array( 'dimensions', 'aspectRatio' ), + 'classnames' => array( + 'has-aspect-ratio' => true, + ), + ), + 'minHeight' => array( 'property_keys' => array( 'default' => 'min-height', ), diff --git a/wp-includes/version.php b/wp-includes/version.php index 1c4e88fe3c..125e43b77a 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -16,7 +16,7 @@ * * @global string $wp_version */ -$wp_version = '6.5-alpha-57490'; +$wp_version = '6.5-alpha-57491'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.