From 63e9950bbff37f744f6b8e52ddd83809e9630607 Mon Sep 17 00:00:00 2001 From: Tonya Mork Date: Wed, 1 Feb 2023 16:15:15 +0000 Subject: [PATCH] Editor: Introduce minimum height dimensions block support. This changeset adds the new dimension feature's PHP code for supporting minimum height in the block editor inspector and in global styles. Minimum height is quite useful for defining the minimum vertical dimensions of a block, while allowing it to expand beyond that size. In this changeset: * Adds support in `theme.json`. * Adds support in the style engine. * Adds support in `wp_apply_dimensions_support()`. * Renames the setting from `'__experimentalDimensions'` to `dimensions` in `wp_register_dimensions_support()`. * Adds PHPUnit tests. Is renaming `'__experimentalDimensions'` a backwards-compatibility (BC) break? Though the setting has been in the code since 5.9.0, it was never wired to anything, ie it did not expose any controls or styles. Notice in `wp_register_dimensions_support()` and `wp_apply_dimensions_support()` prior to this changeset, there are inline comments as placeholders for height and width support, but no code. If a developer opted in to use it, it had no effect. A search in wp.org's plugin and themes repo showed no instances of this experimental setting. Given there was no functionality attached to it (until this changeset), no change in behavior or effect from removing it, and no usage found in the plugins and themes repository, it does appear to be a BC break. References: * [https://github.com/WordPress/gutenberg/pull/45300 Gutenberg PR 45300] * [https://github.com/WordPress/gutenberg/pull/45334 Gutenberg PR 45334] Follow-up to [53076], [52069]. Props andrewserong, aaronrobertshaw , costdev, hellofromTonya, isabel_brison, joen, paaljoachim, mukesh27, ntsekouras, oandregal, ramonopoly. Fixes #57582. Built from https://develop.svn.wordpress.org/trunk@55175 git-svn-id: https://core.svn.wordpress.org/trunk@54708 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-includes/block-supports/dimensions.php | 27 ++++++++++++++----- wp-includes/class-wp-theme-json.php | 14 ++++++++-- .../style-engine/class-wp-style-engine.php | 11 ++++++++ wp-includes/version.php | 2 +- 4 files changed, 45 insertions(+), 9 deletions(-) diff --git a/wp-includes/block-supports/dimensions.php b/wp-includes/block-supports/dimensions.php index 3223dbe0af..7951f8d881 100644 --- a/wp-includes/block-supports/dimensions.php +++ b/wp-includes/block-supports/dimensions.php @@ -29,8 +29,7 @@ function wp_register_dimensions_support( $block_type ) { return; } - $has_dimensions_support = block_has_support( $block_type, array( '__experimentalDimensions' ), false ); - // Future block supports such as height & width will be added here. + $has_dimensions_support = block_has_support( $block_type, array( 'dimensions' ), false ); if ( $has_dimensions_support ) { $block_type->attributes['style'] = array( @@ -44,6 +43,7 @@ function wp_register_dimensions_support( $block_type ) { * 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. @@ -51,16 +51,31 @@ function wp_register_dimensions_support( $block_type ) { * @return array Block dimensions CSS classes and inline styles. */ function wp_apply_dimensions_support( $block_type, $block_attributes ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable - if ( wp_should_skip_block_supports_serialization( $block_type, '__experimentalDimensions' ) ) { + if ( wp_should_skip_block_supports_serialization( $block_type, 'dimensions' ) ) { return array(); } - $styles = array(); + $attributes = array(); - // Height support to be added in near future. // Width support to be added in near future. - return empty( $styles ) ? array() : array( 'style' => implode( ' ', $styles ) ); + $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'] = $has_min_height_support && ! $skip_min_height ? _wp_array_get( $block_styles, array( 'dimensions', 'minHeight' ), null ) : 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. diff --git a/wp-includes/class-wp-theme-json.php b/wp-includes/class-wp-theme-json.php index 1f03a675c5..207067ea9c 100644 --- a/wp-includes/class-wp-theme-json.php +++ b/wp-includes/class-wp-theme-json.php @@ -192,7 +192,7 @@ class WP_Theme_JSON { * @since 6.1.0 Added the `border-*-color`, `border-*-width`, `border-*-style`, * `--wp--style--root--padding-*`, and `box-shadow` properties, * removed the `--wp--style--block-gap` property. - * @since 6.2.0 Added `outline-*` properties. + * @since 6.2.0 Added `outline-*`, and `min-height` properties. * * @var array */ @@ -231,6 +231,7 @@ class WP_Theme_JSON { 'margin-right' => array( 'spacing', 'margin', 'right' ), 'margin-bottom' => array( 'spacing', 'margin', 'bottom' ), 'margin-left' => array( 'spacing', 'margin', 'left' ), + 'min-height' => array( 'dimensions', 'minHeight' ), 'outline-color' => array( 'outline', 'color' ), 'outline-offset' => array( 'outline', 'offset' ), 'outline-style' => array( 'outline', 'style' ), @@ -293,6 +294,7 @@ class WP_Theme_JSON { * and `typography`, and renamed others according to the new schema. * @since 6.0.0 Added `color.defaultDuotone`. * @since 6.1.0 Added `layout.definitions` and `useRootPaddingAwareAlignments`. + * @since 6.2.0 Added `dimensions.minHeight`. * @var array */ const VALID_SETTINGS = array( @@ -319,6 +321,9 @@ class WP_Theme_JSON { 'text' => null, ), 'custom' => null, + 'dimensions' => array( + 'minHeight' => null, + ), 'layout' => array( 'contentSize' => null, 'definitions' => null, @@ -358,7 +363,7 @@ class WP_Theme_JSON { * @since 6.1.0 Added new side properties for `border`, * added new property `shadow`, * updated `blockGap` to be allowed at any level. - * @since 6.2.0 Added `outline` properties. + * @since 6.2.0 Added `outline`, and `minHeight` properties. * * @var array */ @@ -378,6 +383,9 @@ class WP_Theme_JSON { 'gradient' => null, 'text' => null, ), + 'dimensions' => array( + 'minHeight' => null, + ), 'filter' => array( 'duotone' => null, ), @@ -490,6 +498,7 @@ public static function get_element_class_name( $element ) { * Options that settings.appearanceTools enables. * * @since 6.0.0 + * @since 6.2.0 Added `dimensions.minHeight`. * @var array */ const APPEARANCE_TOOLS_OPT_INS = array( @@ -498,6 +507,7 @@ public static function get_element_class_name( $element ) { array( 'border', 'style' ), array( 'border', 'width' ), array( 'color', 'link' ), + array( 'dimensions', 'minHeight' ), array( 'spacing', 'blockGap' ), array( 'spacing', 'margin' ), array( 'spacing', 'padding' ), diff --git a/wp-includes/style-engine/class-wp-style-engine.php b/wp-includes/style-engine/class-wp-style-engine.php index 951dac4b54..e24ad63a0e 100644 --- a/wp-includes/style-engine/class-wp-style-engine.php +++ b/wp-includes/style-engine/class-wp-style-engine.php @@ -137,6 +137,17 @@ final class WP_Style_Engine { ), ), ), + 'dimensions' => array( + 'minHeight' => array( + 'property_keys' => array( + 'default' => 'min-height', + ), + 'path' => array( 'dimensions', 'minHeight' ), + 'css_vars' => array( + 'spacing' => '--wp--preset--spacing--$slug', + ), + ), + ), 'spacing' => array( 'padding' => array( 'property_keys' => array( diff --git a/wp-includes/version.php b/wp-includes/version.php index 56535d4ca2..915aad5576 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -16,7 +16,7 @@ * * @global string $wp_version */ -$wp_version = '6.2-alpha-55174'; +$wp_version = '6.2-alpha-55175'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.