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: http://core.svn.wordpress.org/trunk@54708 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
hellofromTonya 2023-02-01 16:15:15 +00:00
parent 1b359fb4b9
commit 048b304deb
4 changed files with 45 additions and 9 deletions

View File

@ -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.

View File

@ -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 @@ class WP_Theme_JSON {
* 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 @@ class WP_Theme_JSON {
array( 'border', 'style' ),
array( 'border', 'width' ),
array( 'color', 'link' ),
array( 'dimensions', 'minHeight' ),
array( 'spacing', 'blockGap' ),
array( 'spacing', 'margin' ),
array( 'spacing', 'padding' ),

View File

@ -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(

View File

@ -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.