Block Supports: Add width support to dimensions

Author: aaronrobertshaw

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

@@ -51,29 +51,32 @@ 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 ) {
-	if ( wp_should_skip_block_supports_serialization( $block_type, 'dimensions' ) ) {
-		return array();
-	}
-
 	$attributes = array();
 
-	// Width support to be added in near future.
+	if ( wp_should_skip_block_supports_serialization( $block_type, 'dimensions' ) ) {
+		return $attributes;
+	}
 
-	$has_min_height_support = block_has_support( $block_type, array( 'dimensions', 'minHeight' ), false );
-	$block_styles           = isset( $block_attributes['style'] ) ? $block_attributes['style'] : null;
+	$block_styles = $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'] = null;
-	if ( $has_min_height_support && ! $skip_min_height ) {
-		$dimensions_block_styles['minHeight'] = isset( $block_styles['dimensions']['minHeight'] )
-			? $block_styles['dimensions']['minHeight']
-			: null;
+	$dimensions_block_styles = array();
+	$supported_features      = array( 'minHeight', 'width' );
+
+	foreach ( $supported_features as $feature ) {
+		$has_support        = block_has_support( $block_type, array( 'dimensions', $feature ), false );
+		$skip_serialization = wp_should_skip_block_supports_serialization( $block_type, 'dimensions', $feature );
+
+		$dimensions_block_styles[ $feature ] = null;
+
+		if ( $has_support && ! $skip_serialization ) {
+			$dimensions_block_styles[ $feature ] = $block_styles['dimensions'][ $feature ] ?? null;
+		}
 	}
+
 	$styles = wp_style_engine_get_styles( array( 'dimensions' => $dimensions_block_styles ) );
 
 	if ( ! empty( $styles['css'] ) ) {

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

@@ -237,6 +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`.
 	 * @var array
 	 */
 	const PROPERTIES_METADATA = array(
@@ -301,6 +302,7 @@ class WP_Theme_JSON {
 		'text-transform'                    => array( 'typography', 'textTransform' ),
 		'filter'                            => array( 'filter', 'duotone' ),
 		'box-shadow'                        => array( 'shadow' ),
+		'width'                             => array( 'dimensions', 'width' ),
 		'writing-mode'                      => array( 'typography', 'writingMode' ),
 	);
 
@@ -395,6 +397,7 @@ class WP_Theme_JSON {
 	 * @since 6.6.0 Added support for 'dimensions.aspectRatios', 'dimensions.defaultAspectRatios',
 	 *              'typography.defaultFontSizes', and 'spacing.defaultSpacingSizes'.
 	 * @since 6.9.0 Added support for `border.radiusSizes`.
+	 * @since 7.0.0 Added support for `dimensions.width`.
 	 * @var array
 	 */
 	const VALID_SETTINGS = array(
@@ -434,6 +437,7 @@ class WP_Theme_JSON {
 			'aspectRatios'        => null,
 			'defaultAspectRatios' => null,
 			'minHeight'           => null,
+			'width'               => null,
 		),
 		'layout'                        => array(
 			'contentSize'                   => null,
@@ -527,6 +531,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`.
 	 * @var array
 	 */
 	const VALID_STYLES = array(
@@ -555,6 +560,7 @@ class WP_Theme_JSON {
 		'dimensions' => array(
 			'aspectRatio' => null,
 			'minHeight'   => null,
+			'width'       => null,
 		),
 		'filter'     => array(
 			'duotone' => null,
@@ -644,11 +650,13 @@ class WP_Theme_JSON {
 	 * generated under their own feature level selector rather than the block's.
 	 *
 	 * @since 6.1.0
+	 * @since 7.0.0 Added support for `dimensions`.
 	 * @var string[]
 	 */
 	const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = array(
 		'__experimentalBorder' => 'border',
 		'color'                => 'color',
+		'dimensions'           => 'dimensions',
 		'spacing'              => 'spacing',
 		'typography'           => 'typography',
 	);
@@ -724,6 +732,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`.
 	 * @var array
 	 */
 	const APPEARANCE_TOOLS_OPT_INS = array(
@@ -739,6 +748,7 @@ public static function get_element_class_name( $element ) {
 		array( 'color', 'caption' ),
 		array( 'dimensions', 'aspectRatio' ),
 		array( 'dimensions', 'minHeight' ),
+		array( 'dimensions', 'width' ),
 		array( 'position', 'sticky' ),
 		array( 'spacing', 'blockGap' ),
 		array( 'spacing', 'margin' ),

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

@@ -219,6 +219,12 @@ final class WP_Style_Engine {
 					'spacing' => '--wp--preset--spacing--$slug',
 				),
 			),
+			'width'       => array(
+				'property_keys' => array(
+					'default' => 'width',
+				),
+				'path'          => array( 'dimensions', 'width' ),
+			),
 		),
 		'spacing'    => array(
 			'padding' => array(

tests/phpunit/tests/theme/wpThemeJson.php

@@ -281,6 +281,7 @@ public function test_get_settings_appearance_true_opts_in() {
 			'dimensions' => array(
 				'aspectRatio' => true,
 				'minHeight'   => true,
+				'width'       => true,
 			),
 			'position'   => array(
 				'sticky' => true,
@@ -319,6 +320,7 @@ public function test_get_settings_appearance_true_opts_in() {
 					'dimensions' => array(
 						'aspectRatio' => true,
 						'minHeight'   => true,
+						'width'       => true,
 					),
 					'position'   => array(
 						'sticky' => true,