Changeset 55175

Timestamp:

02/01/2023 04:13:49 PM (2 years ago)

Author:

hellofromTonya

Message:

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:

• ​Gutenberg PR 45300
• ​Gutenberg PR 45334

Follow-up to [53076], [52069].

Props andrewserong, aaronrobertshaw , costdev, hellofromTonya, isabel_brison, joen, paaljoachim, mukesh27, ntsekouras, oandregal, ramonopoly.
Fixes #57582.

Location:

trunk

Files:

• src/wp-includes/block-supports/dimensions.php (modified) (3 diffs)
• src/wp-includes/class-wp-theme-json.php (modified) (8 diffs)
• src/wp-includes/style-engine/class-wp-style-engine.php (modified) (1 diff)
• tests/phpunit/tests/block-supports/wpApplyDimensionsSupport.php (added)
• tests/phpunit/tests/style-engine/styleEngine.php (modified) (1 diff)
• tests/phpunit/tests/theme/wpThemeJson.php (modified) (2 diffs)

trunk/src/wp-includes/block-supports/dimensions.php

@@ -30 +30 @@
     }
 
-    $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 ) {
@@ -45 +44 @@
  *
  * @since 5.9.0
+ * @since 6.2.0 Added `minHeight` support.
  * @access private
  *
@@ -52 +52 @@
  */
 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;
 }
 

trunk/src/wp-includes/class-wp-theme-json.php

@@ -193 +193 @@
      *              `--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
@@ -232 +232 @@
         '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' ),
@@ -294 +295 @@
      * @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
      */
@@ -320 +322 @@
         ),
         'custom'                        => null,
+        'dimensions'                    => array(
+            'minHeight' => null,
+        ),
         'layout'                        => array(
             'contentSize' => null,
@@ -359 +364 @@
      *              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 +383 @@
             'gradient'   => null,
             'text'       => null,
+        ),
+        'dimensions' => array(
+            'minHeight' => null,
         ),
         'filter'     => array(
@@ -491 +499 @@
      *
      * @since 6.0.0
+     * @since 6.2.0 Added `dimensions.minHeight`.
      * @var array
      */
@@ -499 +508 @@
         array( 'border', 'width' ),
         array( 'color', 'link' ),
+        array( 'dimensions', 'minHeight' ),
         array( 'spacing', 'blockGap' ),
         array( 'spacing', 'margin' ),

trunk/src/wp-includes/style-engine/class-wp-style-engine.php

@@ -138 +138 @@
             ),
         ),
+        '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(

trunk/tests/phpunit/tests/style-engine/styleEngine.php

@@ -167 +167 @@
             ),
 
+            'inline_valid_dimensions_style'                => array(
+                'block_styles'    => array(
+                    'dimensions' => array(
+                        'minHeight' => '50vh',
+                    ),
+                ),
+                'options'         => null,
+                'expected_output' => array(
+                    'css'          => 'min-height:50vh;',
+                    'declarations' => array(
+                        'min-height' => '50vh',
+                    ),
+                ),
+            ),
+
             'inline_valid_typography_style'                => array(
                 'block_styles'    => array(

trunk/tests/phpunit/tests/theme/wpThemeJson.php

@@ -242 +242 @@
                 'link' => true,
             ),
+            'dimensions' => array(
+                'minHeight' => true,
+            ),
             'spacing'    => array(
                 'blockGap' => false,
@@ -265 +268 @@
                     'color'      => array(
                         'link' => true,
+                    ),
+                    'dimensions' => array(
+                        'minHeight' => true,
                     ),
                     'spacing'    => array(