Block Supports: Add height to dimensions supports

This PR introduces `dimensions.height` to the list of available block supports.

This block support enables, in the future, the removal of the custom height controls in blocks such as Image, Spacer and others in favor of customizations via block supports.

Props aaronrobertshaw, andrewserong, ramonopoly, welcher, wildworks, youknowriad.

Fixes #64202.



git-svn-id: https://develop.svn.wordpress.org/trunk@61620 602fd350-edb4-49c9-b593-d223f7449a82

Author: ramonjd

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

@@ -64,7 +64,7 @@ function wp_apply_dimensions_support( $block_type, $block_attributes ) {
 	}
 
 	$dimensions_block_styles = array();
-	$supported_features      = array( 'minHeight', 'width' );
+	$supported_features      = array( 'minHeight', 'height', 'width' );
 
 	foreach ( $supported_features as $feature ) {
 		$has_support        = block_has_support( $block_type, array( 'dimensions', $feature ), false );

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

@@ -237,7 +237,7 @@ class WP_Theme_JSON {
 	 * @since 6.5.0 Added `aspect-ratio` property.
 	 * @since 6.6.0 Added `background-[image|position|repeat|size]` properties.
 	 * @since 6.7.0 Added `background-attachment` property.
-	 * @since 7.0.0 Added `dimensions.width`.
+	 * @since 7.0.0 Added `dimensions.width` and `dimensions.height`.
 	 * @var array
 	 */
 	const PROPERTIES_METADATA = array(
@@ -302,6 +302,7 @@ class WP_Theme_JSON {
 		'text-transform'                    => array( 'typography', 'textTransform' ),
 		'filter'                            => array( 'filter', 'duotone' ),
 		'box-shadow'                        => array( 'shadow' ),
+		'height'                            => array( 'dimensions', 'height' ),
 		'width'                             => array( 'dimensions', 'width' ),
 		'writing-mode'                      => array( 'typography', 'writingMode' ),
 	);
@@ -398,7 +399,7 @@ class WP_Theme_JSON {
 	 *              'typography.defaultFontSizes', and 'spacing.defaultSpacingSizes'.
 	 * @since 6.9.0 Added support for `border.radiusSizes`.
 	 * @since 7.0.0 Added type markers to the schema for boolean values.
-	 *              Added support for `dimensions.width`.
+	 *              Added support for `dimensions.width` and `dimensions.height`.
 	 * @var array
 	 */
 	const VALID_SETTINGS = array(
@@ -437,6 +438,7 @@ class WP_Theme_JSON {
 			'aspectRatio'         => null,
 			'aspectRatios'        => null,
 			'defaultAspectRatios' => null,
+			'height'              => null,
 			'minHeight'           => null,
 			'width'               => null,
 		),
@@ -532,7 +534,7 @@ class WP_Theme_JSON {
 	 * @since 6.3.0 Added support for `typography.textColumns`.
 	 * @since 6.5.0 Added support for `dimensions.aspectRatio`.
 	 * @since 6.6.0 Added `background` sub properties to top-level only.
-	 * @since 7.0.0 Added support for `dimensions.width`.
+	 * @since 7.0.0 Added support for `dimensions.width` and `dimensions.height`.
 	 * @var array
 	 */
 	const VALID_STYLES = array(
@@ -560,6 +562,7 @@ class WP_Theme_JSON {
 		),
 		'dimensions' => array(
 			'aspectRatio' => null,
+			'height'      => null,
 			'minHeight'   => null,
 			'width'       => null,
 		),
@@ -772,7 +775,7 @@ public static function get_element_class_name( $element ) {
 	 * @since 6.2.0 Added `dimensions.minHeight` and `position.sticky`.
 	 * @since 6.4.0 Added `background.backgroundImage`.
 	 * @since 6.5.0 Added `background.backgroundSize` and `dimensions.aspectRatio`.
-	 * @since 7.0.0 Added `dimensions.width`.
+	 * @since 7.0.0 Added `dimensions.width` and `dimensions.height`.
 	 * @var array
 	 */
 	const APPEARANCE_TOOLS_OPT_INS = array(
@@ -787,6 +790,7 @@ public static function get_element_class_name( $element ) {
 		array( 'color', 'button' ),
 		array( 'color', 'caption' ),
 		array( 'dimensions', 'aspectRatio' ),
+		array( 'dimensions', 'height' ),
 		array( 'dimensions', 'minHeight' ),
 		array( 'dimensions', 'width' ),
 		array( 'position', 'sticky' ),

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

@@ -210,6 +210,12 @@ final class WP_Style_Engine {
 					'has-aspect-ratio' => true,
 				),
 			),
+			'height'      => array(
+				'property_keys' => array(
+					'default' => 'height',
+				),
+				'path'          => array( 'dimensions', 'height' ),
+			),
 			'minHeight'   => array(
 				'property_keys' => array(
 					'default' => 'min-height',

tests/phpunit/tests/block-supports/wpApplyDimensionsSupport.php

@@ -171,4 +171,75 @@ public function data_width_block_support() {
 			),
 		);
 	}
+
+	/**
+	 * Tests that height block support works as expected.
+	 *
+	 * @ticket 64202
+	 *
+	 * @covers ::wp_apply_dimensions_support
+	 *
+	 * @dataProvider data_height_block_support
+	 *
+	 * @param string $block_name The test block name to register.
+	 * @param mixed  $dimensions The dimensions block support settings.
+	 * @param mixed  $expected   The expected results.
+	 */
+	public function test_height_block_support( $block_name, $dimensions, $expected ) {
+		$this->test_block_name = $block_name;
+		register_block_type(
+			$this->test_block_name,
+			array(
+				'api_version' => 2,
+				'attributes'  => array(
+					'style' => array(
+						'type' => 'object',
+					),
+				),
+				'supports'    => array(
+					'dimensions' => $dimensions,
+				),
+			)
+		);
+		$registry    = WP_Block_Type_Registry::get_instance();
+		$block_type  = $registry->get_registered( $this->test_block_name );
+		$block_attrs = array(
+			'style' => array(
+				'dimensions' => array(
+					'height' => '400px',
+				),
+			),
+		);
+
+		$actual = wp_apply_dimensions_support( $block_type, $block_attrs );
+
+		$this->assertSame( $expected, $actual );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_height_block_support() {
+		return array(
+			'style is applied' => array(
+				'block_name' => 'test/height-style-is-applied',
+				'dimensions' => array(
+					'height' => true,
+				),
+				'expected'   => array(
+					'style' => 'height:400px;',
+				),
+			),
+			'style output is skipped when individual feature serialization is skipped' => array(
+				'block_name' => 'test/height-with-individual-skipped-serialization-block-supports',
+				'dimensions' => array(
+					'height'                          => true,
+					'__experimentalSkipSerialization' => array( 'height' ),
+				),
+				'expected'   => array(),
+			),
+		);
+	}
 }

tests/phpunit/tests/theme/wpThemeJson.php

@@ -280,6 +280,7 @@ public function test_get_settings_appearance_true_opts_in() {
 			),
 			'dimensions' => array(
 				'aspectRatio' => true,
+				'height'      => true,
 				'minHeight'   => true,
 				'width'       => true,
 			),
@@ -320,6 +321,7 @@ public function test_get_settings_appearance_true_opts_in() {
 					),
 					'dimensions' => array(
 						'aspectRatio' => true,
+						'height'      => true,
 						'minHeight'   => true,
 						'width'       => true,
 					),