diff --git a/src/wp-includes/block-supports/dimensions.php b/src/wp-includes/block-supports/dimensions.php index da68f187c3915..aad482f31ff2f 100644 --- a/src/wp-includes/block-supports/dimensions.php +++ b/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', 'height', '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'] ) ) { diff --git a/src/wp-includes/class-wp-theme-json.php b/src/wp-includes/class-wp-theme-json.php index 598f3ba918536..dcf009013ff9a 100644 --- a/src/wp-includes/class-wp-theme-json.php +++ b/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` and `dimensions.height`. * @var array */ const PROPERTIES_METADATA = array( @@ -301,6 +302,8 @@ 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' ), ); @@ -395,6 +398,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` and `dimensions.height`. * @var array */ const VALID_SETTINGS = array( @@ -433,7 +437,9 @@ class WP_Theme_JSON { 'aspectRatio' => null, 'aspectRatios' => null, 'defaultAspectRatios' => null, + 'height' => null, 'minHeight' => null, + 'width' => null, ), 'layout' => array( 'contentSize' => null, @@ -527,6 +533,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` and `dimensions.height`. * @var array */ const VALID_STYLES = array( @@ -554,7 +561,9 @@ class WP_Theme_JSON { ), 'dimensions' => array( 'aspectRatio' => null, + 'height' => null, 'minHeight' => null, + 'width' => null, ), 'filter' => array( 'duotone' => null, @@ -644,11 +653,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 +735,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` and `dimensions.height`. * @var array */ const APPEARANCE_TOOLS_OPT_INS = array( @@ -738,7 +750,9 @@ 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' ), array( 'spacing', 'blockGap' ), array( 'spacing', 'margin' ), diff --git a/src/wp-includes/style-engine/class-wp-style-engine.php b/src/wp-includes/style-engine/class-wp-style-engine.php index f47c349aecbe3..101e8b74385de 100644 --- a/src/wp-includes/style-engine/class-wp-style-engine.php +++ b/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', @@ -219,6 +225,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( diff --git a/tests/phpunit/tests/theme/wpThemeJson.php b/tests/phpunit/tests/theme/wpThemeJson.php index 8a9932dd777b5..dfc139423905e 100644 --- a/tests/phpunit/tests/theme/wpThemeJson.php +++ b/tests/phpunit/tests/theme/wpThemeJson.php @@ -280,7 +280,9 @@ public function test_get_settings_appearance_true_opts_in() { ), 'dimensions' => array( 'aspectRatio' => true, + 'height' => true, 'minHeight' => true, + 'width' => true, ), 'position' => array( 'sticky' => true, @@ -318,7 +320,9 @@ public function test_get_settings_appearance_true_opts_in() { ), 'dimensions' => array( 'aspectRatio' => true, + 'height' => true, 'minHeight' => true, + 'width' => true, ), 'position' => array( 'sticky' => true,