From ef4447622fbd5de7830ccd3f3c6de61c4630fd39 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Sun, 7 Dec 2025 16:49:45 -0800 Subject: [PATCH 01/10] Add support for dimensionSizes presets --- packages/global-styles-engine/src/index.ts | 1 + .../global-styles-engine/src/utils/dimensions.ts | 13 +++++++++++++ 2 files changed, 14 insertions(+) create mode 100644 packages/global-styles-engine/src/utils/dimensions.ts diff --git a/packages/global-styles-engine/src/index.ts b/packages/global-styles-engine/src/index.ts index b3c765f555d732..3d89a7144a1c06 100644 --- a/packages/global-styles-engine/src/index.ts +++ b/packages/global-styles-engine/src/index.ts @@ -21,6 +21,7 @@ export { getBlockSelector } from './core/selectors'; // Utilities (Ideally these shouldn't be exposed) export { getTypographyFontSizeValue } from './utils/typography'; +export { getDimensionPresetCssVar } from './utils/dimensions'; export { getValueFromVariable, getPresetVariableFromValue, diff --git a/packages/global-styles-engine/src/utils/dimensions.ts b/packages/global-styles-engine/src/utils/dimensions.ts new file mode 100644 index 00000000000000..fc768d7bd0a13f --- /dev/null +++ b/packages/global-styles-engine/src/utils/dimensions.ts @@ -0,0 +1,13 @@ +export function getDimensionPresetCssVar( value?: string ) { + if ( ! value ) { + return; + } + + const slug = value.match( /var:preset\|dimension\|(.+)/ ); + + if ( ! slug ) { + return value; + } + + return `var(--wp--preset--dimension--${ slug[ 1 ] })`; +} From 6496c304255cd6f74c4bc49fc2555bc6cd7e2a12 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Sat, 25 Oct 2025 00:07:22 +1000 Subject: [PATCH 02/10] First pass adding height block support --- .../themes/global-settings-and-styles.md | 4 ++- docs/how-to-guides/themes/theme-support.md | 2 +- .../theme-json-reference/styles-versions.md | 1 + .../theme-json-reference/theme-json-living.md | 4 ++- lib/block-supports/dimensions.php | 2 +- lib/class-wp-theme-json-gutenberg.php | 8 +++-- .../global-styles/dimensions-panel.js | 36 +++++++++++++++++++ .../src/components/global-styles/hooks.js | 2 +- packages/block-editor/src/hooks/dimensions.js | 3 +- packages/block-editor/src/hooks/utils.js | 4 +++ packages/blocks/src/api/constants.js | 5 +++ .../src/settings/get-setting.ts | 1 + .../global-styles-ui/src/dimensions-panel.tsx | 1 + .../src/class-wp-style-engine.php | 6 ++++ .../src/styles/dimensions/index.ts | 14 +++++++- packages/style-engine/src/types.ts | 2 ++ phpunit/block-supports/dimensions-test.php | 10 +++++- phpunit/class-wp-theme-json-test.php | 2 ++ schemas/json/block.json | 6 ++++ schemas/json/theme.json | 14 +++++++- 20 files changed, 116 insertions(+), 11 deletions(-) diff --git a/docs/how-to-guides/themes/global-settings-and-styles.md b/docs/how-to-guides/themes/global-settings-and-styles.md index b8237ab3dc51a2..4929207abf66c9 100644 --- a/docs/how-to-guides/themes/global-settings-and-styles.md +++ b/docs/how-to-guides/themes/global-settings-and-styles.md @@ -237,6 +237,7 @@ The settings section has the following structure: "custom": {}, "dimensions": { "aspectRatio": false, + "height": false, "minHeight": false, "width": false, }, @@ -302,7 +303,7 @@ There's one special setting property, `appearanceTools`, which is a boolean and - background: backgroundImage, backgroundSize - border: color, radius, style, width - color: link -- dimensions: aspectRatio, minHeight, width +- dimensions: aspectRatio, height, minHeight, width - position: sticky - spacing: blockGap, margin, padding - typography: lineHeight @@ -772,6 +773,7 @@ Each block declares which style properties it exposes via the [block supports me }, "dimensions": { "aspectRatio": "value", + "height": "value" "minHeight": "value" "width": "value" }, diff --git a/docs/how-to-guides/themes/theme-support.md b/docs/how-to-guides/themes/theme-support.md index ad86be407a0b25..0d01255059fdc6 100644 --- a/docs/how-to-guides/themes/theme-support.md +++ b/docs/how-to-guides/themes/theme-support.md @@ -475,7 +475,7 @@ Use this setting to enable the following Global Styles settings: - color: link - spacing: blockGap, margin, padding - typography: lineHeight -- dimensions: aspectRatio, minHeight, width +- dimensions: aspectRatio, height, minHeight, width - position: sticky ```php diff --git a/docs/reference-guides/theme-json-reference/styles-versions.md b/docs/reference-guides/theme-json-reference/styles-versions.md index cc80c6ca8388d9..ee6896bd279992 100644 --- a/docs/reference-guides/theme-json-reference/styles-versions.md +++ b/docs/reference-guides/theme-json-reference/styles-versions.md @@ -48,6 +48,7 @@ New styles options are integrated into theme.json on a regular basis. Knowing th | `spacing.margin.left` | 5.8 | 5.9 | | `spacing.margin.bottom` | 5.8 | 5.9 | | `spacing.blockGap` | 5.9 | 5.9 | +| `dimensions.height` | 7.0 | N/A | | `dimensions.minHeight` | 6.2 | N/A | | `dimensions.width` | 7.0 | N/A | | `outline.color` | 6.2 | N/A | diff --git a/docs/reference-guides/theme-json-reference/theme-json-living.md b/docs/reference-guides/theme-json-reference/theme-json-living.md index 368b8c8f1ffdc6..124b4b8eab159d 100644 --- a/docs/reference-guides/theme-json-reference/theme-json-living.md +++ b/docs/reference-guides/theme-json-reference/theme-json-living.md @@ -46,7 +46,7 @@ Setting that enables the following UI tools: - background: backgroundImage, backgroundSize - border: color, radius, style, width - color: link, heading, button, caption -- dimensions: aspectRatio, minHeight, width +- dimensions: aspectRatio, height, minHeight, width - position: sticky - spacing: blockGap, margin, padding - typography: lineHeight @@ -111,6 +111,7 @@ Settings related to dimensions. | aspectRatio | Allow users to set an aspect ratio. | `boolean` | `false` | | defaultAspectRatios | Allow users to choose aspect ratios from the default set of aspect ratios. | `boolean` | `true` | | aspectRatios | Allow users to define aspect ratios for some blocks. | `[ { name, slug, ratio } ]` | | +| height | Allow users to set custom height. | `boolean` | `false` | | minHeight | Allow users to set custom minimum height. | `boolean` | `false` | | width | Allow users to set custom width. | `boolean` | `false` | | dimensionSizes | Dimension size presets for dimension block supports. | `[ { name, slug, size } ]` | | @@ -269,6 +270,7 @@ Dimensions styles. | Property | Description | Type | | -------- | ----------- | ---- | | aspectRatio | Sets the `aspect-ratio` CSS property. | `string`, `{ ref }` | +| height | Sets the `height` CSS property. | `string`, `{ ref }` | | minHeight | Sets the `min-height` CSS property. | `string`, `{ ref }` | | width | Sets the `width` CSS property. | `string`, `{ ref }` | diff --git a/lib/block-supports/dimensions.php b/lib/block-supports/dimensions.php index e09c9553df5eba..d20abc10949053 100644 --- a/lib/block-supports/dimensions.php +++ b/lib/block-supports/dimensions.php @@ -57,7 +57,7 @@ function gutenberg_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 ); diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 8c9a12e8a2f6d2..cc2e6d62ba1faa 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -241,7 +241,7 @@ class WP_Theme_JSON_Gutenberg { * @since 6.2.0 Added `outline-*`, and `min-height` properties. * @since 6.3.0 Added `writing-mode` property. * @since 6.6.0 Added `background-[image|position|repeat|size]` properties. - * @since 7.0.0 Added `dimensions.width`. + * @since 7.0.0 Added `dimensions.width` and `dimensions.height`. * * @var array */ @@ -307,6 +307,7 @@ class WP_Theme_JSON_Gutenberg { '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' ), ); @@ -437,6 +438,7 @@ class WP_Theme_JSON_Gutenberg { 'aspectRatios' => null, 'defaultAspectRatios' => null, 'dimensionSizes' => null, + 'height' => null, 'minHeight' => null, 'width' => null, ), @@ -552,6 +554,7 @@ class WP_Theme_JSON_Gutenberg { ), 'dimensions' => array( 'aspectRatio' => null, + 'height' => null, 'minHeight' => null, 'width' => null, ), @@ -757,7 +760,7 @@ public static function get_element_class_name( $element ) { * * @since 6.0.0 * @since 6.2.0 Added `dimensions.minHeight` and `position.sticky`. - * @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( @@ -772,6 +775,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' ), // BEGIN EXPERIMENTAL. diff --git a/packages/block-editor/src/components/global-styles/dimensions-panel.js b/packages/block-editor/src/components/global-styles/dimensions-panel.js index 612c5f480e022a..5208f7c1d0f40e 100644 --- a/packages/block-editor/src/components/global-styles/dimensions-panel.js +++ b/packages/block-editor/src/components/global-styles/dimensions-panel.js @@ -38,6 +38,7 @@ export function useHasDimensionsPanel( settings ) { const hasPadding = useHasPadding( settings ); const hasMargin = useHasMargin( settings ); const hasGap = useHasGap( settings ); + const hasHeight = useHasHeight( settings ); const hasMinHeight = useHasMinHeight( settings ); const hasWidth = useHasWidth( settings ); const hasAspectRatio = useHasAspectRatio( settings ); @@ -50,6 +51,7 @@ export function useHasDimensionsPanel( settings ) { hasPadding || hasMargin || hasGap || + hasHeight || hasMinHeight || hasWidth || hasAspectRatio || @@ -77,6 +79,10 @@ function useHasGap( settings ) { return settings?.spacing?.blockGap; } +function useHasHeight( settings ) { + return settings?.dimensions?.height; +} + function useHasMinHeight( settings ) { return settings?.dimensions?.minHeight; } @@ -211,6 +217,7 @@ const DEFAULT_CONTROLS = { padding: true, margin: true, blockGap: true, + height: true, minHeight: true, width: true, aspectRatio: true, @@ -391,6 +398,17 @@ export default function DimensionsPanel( { }; const hasMinHeightValue = () => !! value?.dimensions?.minHeight; + // Height + const showHeightControl = useHasHeight( settings ); + const heightValue = decodeValue( inheritedValue?.dimensions?.height ); + const setHeightValue = ( newValue ) => { + onChange( setImmutably( value, [ 'dimensions', 'height' ], newValue ) ); + }; + const resetHeightValue = () => { + setHeightValue( undefined ); + }; + const hasHeightValue = () => !! value?.dimensions?.height; + // Width const showWidthControl = useHasWidth( settings ); const widthValue = decodeValue( inheritedValue?.dimensions?.width ); @@ -455,6 +473,7 @@ export default function DimensionsPanel( { }, dimensions: { ...previousValue?.dimensions, + height: undefined, minHeight: undefined, aspectRatio: undefined, width: undefined, @@ -707,6 +726,23 @@ export default function DimensionsPanel( { /> ) } + { showHeightControl && ( + + + + ) } { showWidthControl && ( { + [ 'aspectRatio', 'height', 'minHeight', 'width' ].forEach( ( key ) => { if ( ! supportedStyles.includes( key ) ) { updatedSettings.dimensions = { ...updatedSettings.dimensions, diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js index f3b826eb107b28..d937beff6bb7f7 100644 --- a/packages/block-editor/src/hooks/dimensions.js +++ b/packages/block-editor/src/hooks/dimensions.js @@ -159,6 +159,7 @@ export function hasDimensionsSupport( blockName, feature = 'any' ) { if ( feature === 'any' ) { return !! ( support?.aspectRatio || + !! support?.height || !! support?.minHeight || !! support?.width ); @@ -169,7 +170,7 @@ export function hasDimensionsSupport( blockName, feature = 'any' ) { export default { useBlockProps, - attributeKeys: [ 'minHeight', 'width', 'style' ], + attributeKeys: [ 'height', 'minHeight', 'width', 'style' ], hasSupport( name ) { return hasDimensionsSupport( name ); }, diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js index 386b050f7cdae5..417e3f99264ef4 100644 --- a/packages/block-editor/src/hooks/utils.js +++ b/packages/block-editor/src/hooks/utils.js @@ -263,6 +263,7 @@ export function useBlockSettings( name, parentLayout ) { themeSpacingSizes, units, aspectRatio, + height, minHeight, width, dimensionSizes, @@ -323,6 +324,7 @@ export function useBlockSettings( name, parentLayout ) { 'spacing.spacingSizes.theme', 'spacing.units', 'dimensions.aspectRatio', + 'dimensions.height', 'dimensions.minHeight', 'dimensions.width', 'dimensions.dimensionSizes', @@ -434,6 +436,7 @@ export function useBlockSettings( name, parentLayout ) { }, dimensions: { aspectRatio, + height, minHeight, width, dimensionSizes, @@ -472,6 +475,7 @@ export function useBlockSettings( name, parentLayout ) { themeSpacingSizes, units, aspectRatio, + height, minHeight, width, dimensionSizes, diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js index dacefd8d9c12cd..919aa5f85fd1a4 100644 --- a/packages/blocks/src/api/constants.js +++ b/packages/blocks/src/api/constants.js @@ -222,6 +222,11 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = { support: [ 'dimensions', 'minHeight' ], useEngine: true, }, + height: { + value: [ 'dimensions', 'height' ], + support: [ 'dimensions', 'height' ], + useEngine: true, + }, width: { value: [ 'dimensions', 'width' ], support: [ 'dimensions', 'width' ], diff --git a/packages/global-styles-engine/src/settings/get-setting.ts b/packages/global-styles-engine/src/settings/get-setting.ts index 0ff5771067e714..75d9825d403ec3 100644 --- a/packages/global-styles-engine/src/settings/get-setting.ts +++ b/packages/global-styles-engine/src/settings/get-setting.ts @@ -35,6 +35,7 @@ const VALID_SETTINGS = [ 'color.text', 'custom', 'dimensions.aspectRatio', + 'dimensions.height', 'dimensions.minHeight', 'dimensions.width', 'dimensions.dimensionSizes', diff --git a/packages/global-styles-ui/src/dimensions-panel.tsx b/packages/global-styles-ui/src/dimensions-panel.tsx index dd019b1d80cc77..2b7f99870a5e89 100644 --- a/packages/global-styles-ui/src/dimensions-panel.tsx +++ b/packages/global-styles-ui/src/dimensions-panel.tsx @@ -20,6 +20,7 @@ const DEFAULT_CONTROLS = { padding: true, margin: true, blockGap: true, + height: true, minHeight: true, width: true, childLayout: false, diff --git a/packages/style-engine/src/class-wp-style-engine.php b/packages/style-engine/src/class-wp-style-engine.php index b75be5c56961b0..f013b2e41bc157 100644 --- a/packages/style-engine/src/class-wp-style-engine.php +++ b/packages/style-engine/src/class-wp-style-engine.php @@ -201,6 +201,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', diff --git a/packages/style-engine/src/styles/dimensions/index.ts b/packages/style-engine/src/styles/dimensions/index.ts index dd8c6a98d7b644..c6b0730a171261 100644 --- a/packages/style-engine/src/styles/dimensions/index.ts +++ b/packages/style-engine/src/styles/dimensions/index.ts @@ -4,6 +4,18 @@ import type { Style, StyleOptions } from '../../types'; import { generateRule } from '../utils'; +const height = { + name: 'height', + generate: ( style: Style, options: StyleOptions ) => { + return generateRule( + style, + options, + [ 'dimensions', 'height' ], + 'height' + ); + }, +}; + const minHeight = { name: 'minHeight', generate: ( style: Style, options: StyleOptions ) => { @@ -40,4 +52,4 @@ const width = { }, }; -export default [ minHeight, aspectRatio, width ]; +export default [ height, minHeight, aspectRatio, width ]; diff --git a/packages/style-engine/src/types.ts b/packages/style-engine/src/types.ts index 8de623fcfcb2bf..31c5bd38f23c09 100644 --- a/packages/style-engine/src/types.ts +++ b/packages/style-engine/src/types.ts @@ -48,7 +48,9 @@ export interface Style { }; dimensions?: { aspectRatio?: CSSProperties[ 'aspectRatio' ]; + height?: CSSProperties[ 'height' ]; minHeight?: CSSProperties[ 'minHeight' ]; + width?: CSSProperties[ 'width' ]; }; spacing?: { margin?: CSSProperties[ 'margin' ] | Box< 'margin' >; diff --git a/phpunit/block-supports/dimensions-test.php b/phpunit/block-supports/dimensions-test.php index f2041ec94bd3bf..6fbd57a39a5490 100644 --- a/phpunit/block-supports/dimensions-test.php +++ b/phpunit/block-supports/dimensions-test.php @@ -36,7 +36,9 @@ public function test_dimensions_style_is_applied() { ), 'supports' => array( 'dimensions' => array( + 'height' => true, 'minHeight' => true, + 'width' => true, ), ), ) @@ -46,14 +48,16 @@ public function test_dimensions_style_is_applied() { $block_attrs = array( 'style' => array( 'dimensions' => array( + 'height' => '80vh', 'minHeight' => '50vh', + 'width' => '1000px', ), ), ); $actual = gutenberg_apply_dimensions_support( $block_type, $block_attrs ); $expected = array( - 'style' => 'min-height:50vh;', + 'style' => 'height:80vh;min-height:50vh;width:1000px;', ); $this->assertSame( $expected, $actual ); @@ -72,7 +76,9 @@ public function test_dimensions_with_skipped_serialization_block_supports() { ), 'supports' => array( 'dimensions' => array( + 'height' => true, 'minHeight' => true, + 'width' => true, '__experimentalSkipSerialization' => true, ), ), @@ -83,7 +89,9 @@ public function test_dimensions_with_skipped_serialization_block_supports() { $block_attrs = array( 'style' => array( 'dimensions' => array( + 'height' => '70vh', 'minHeight' => '50vh', + 'width' => '999px', ), ), ); diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index b953caefbd4bfb..6c794525cf4847 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -321,6 +321,7 @@ public function test_get_settings_appearance_true_opts_in() { ), 'dimensions' => array( 'aspectRatio' => true, + 'height' => true, 'minHeight' => true, 'width' => true, ), @@ -361,6 +362,7 @@ public function test_get_settings_appearance_true_opts_in() { ), 'dimensions' => array( 'aspectRatio' => true, + 'height' => true, 'minHeight' => true, 'width' => true, ), diff --git a/schemas/json/block.json b/schemas/json/block.json index 29c7914e6e2caa..ded8e9bc1a38c8 100644 --- a/schemas/json/block.json +++ b/schemas/json/block.json @@ -323,6 +323,11 @@ "type": "boolean", "default": false }, + "height": { + "description": "Allow blocks to define a height value.", + "type": "boolean", + "default": false + }, "minHeight": { "description": "Allow blocks to define a minimum height value.", "type": "boolean", @@ -717,6 +722,7 @@ "properties": { "root": { "type": "string" }, "aspectRatio": { "type": "string" }, + "height": { "type": "string" }, "minHeight": { "type": "string" }, "width": { "type": "string" } } diff --git a/schemas/json/theme.json b/schemas/json/theme.json index 9f75c589dcb428..cfb2de8e467e37 100644 --- a/schemas/json/theme.json +++ b/schemas/json/theme.json @@ -21,7 +21,7 @@ "type": "object", "properties": { "appearanceTools": { - "description": "Setting that enables the following UI tools:\n\n- background: backgroundImage, backgroundSize\n- border: color, radius, style, width\n- color: link, heading, button, caption\n- dimensions: aspectRatio, minHeight, width\n- position: sticky\n- spacing: blockGap, margin, padding\n- typography: lineHeight", + "description": "Setting that enables the following UI tools:\n\n- background: backgroundImage, backgroundSize\n- border: color, radius, style, width\n- color: link, heading, button, caption\n- dimensions: aspectRatio, height, minHeight, width\n- position: sticky\n- spacing: blockGap, margin, padding\n- typography: lineHeight", "type": "boolean", "default": false } @@ -286,6 +286,11 @@ } } }, + "height": { + "description": "Allow users to set custom height.", + "type": "boolean", + "default": false + }, "minHeight": { "description": "Allow users to set custom minimum height.", "type": "boolean", @@ -1518,6 +1523,13 @@ { "$ref": "#/definitions/refComplete" } ] }, + "height": { + "description": "Sets the `height` CSS property.", + "oneOf": [ + { "type": "string" }, + { "$ref": "#/definitions/refComplete" } + ] + }, "minHeight": { "description": "Sets the `min-height` CSS property.", "oneOf": [ From 43cd3aaaab12f67e1c2ba2939040f3b90707f951 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 5 Nov 2025 19:19:51 +0800 Subject: [PATCH 03/10] Add changelog --- backport-changelog/7.0/10471.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 backport-changelog/7.0/10471.md diff --git a/backport-changelog/7.0/10471.md b/backport-changelog/7.0/10471.md new file mode 100644 index 00000000000000..06162f3372b8c8 --- /dev/null +++ b/backport-changelog/7.0/10471.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/10471 + +* https://github.com/WordPress/gutenberg/pull/71905 From 92934c3a291355d1271e28c82aef79ff549f1cab Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 6 Nov 2025 10:16:28 +0800 Subject: [PATCH 04/10] Additional clean up --- lib/class-wp-theme-json-gutenberg.php | 3 ++- packages/style-engine/src/class-wp-style-engine.php | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index cc2e6d62ba1faa..9716bee591b4b4 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -398,7 +398,7 @@ class WP_Theme_JSON_Gutenberg { * @since 6.4.0 Added `layout.allowEditing`. * @since 6.4.0 Added `lightbox`. * @since 7.0.0 Added type markers to the schema for boolean values. - * @since 7.0.0 Added `dimensions.width`. + * @since 7.0.0 Added `dimensions.width` and `dimensions.height`. * @var array */ const VALID_SETTINGS = array( @@ -527,6 +527,7 @@ class WP_Theme_JSON_Gutenberg { * @since 6.2.0 Added `outline`, and `minHeight` properties. * @since 6.6.0 Added `background` sub properties to top-level only. * @since 6.6.0 Added `dimensions.aspectRatio`. + * @since 7.0.0 Added `dimensions.width` and `dimensions.height`. * @var array */ const VALID_STYLES = array( diff --git a/packages/style-engine/src/class-wp-style-engine.php b/packages/style-engine/src/class-wp-style-engine.php index f013b2e41bc157..68db43b1daf0ed 100644 --- a/packages/style-engine/src/class-wp-style-engine.php +++ b/packages/style-engine/src/class-wp-style-engine.php @@ -201,7 +201,7 @@ final class WP_Style_Engine { 'has-aspect-ratio' => true, ), ), - 'height' => array( + 'height' => array( 'property_keys' => array( 'default' => 'height', ), From 7a6abfb76a30e2136da1e4611a718d8453f4b39d Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 24 Nov 2025 22:02:24 +1000 Subject: [PATCH 05/10] Add some unit tests for applying height block support styles --- phpunit/block-supports/dimensions-test.php | 71 ++++++++++++++++++++++ 1 file changed, 71 insertions(+) diff --git a/phpunit/block-supports/dimensions-test.php b/phpunit/block-supports/dimensions-test.php index 6fbd57a39a5490..c7a6905f39aaa2 100644 --- a/phpunit/block-supports/dimensions-test.php +++ b/phpunit/block-supports/dimensions-test.php @@ -214,4 +214,75 @@ public function test_width_with_individual_skipped_serialization_block_supports( $this->assertSame( $expected, $actual ); } + + public function test_height_style_is_applied() { + $this->test_block_name = 'test/height-style-is-applied'; + register_block_type( + $this->test_block_name, + array( + 'api_version' => 3, + 'attributes' => array( + 'style' => array( + 'type' => 'object', + ), + ), + 'supports' => array( + 'dimensions' => array( + 'height' => true, + ), + ), + ) + ); + $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 = gutenberg_apply_dimensions_support( $block_type, $block_attrs ); + $expected = array( + 'style' => 'height:400px;', + ); + + $this->assertSame( $expected, $actual ); + } + + public function test_height_with_individual_skipped_serialization_block_supports() { + $this->test_block_name = 'test/height-with-individual-skipped-serialization-block-supports'; + register_block_type( + $this->test_block_name, + array( + 'api_version' => 3, + 'attributes' => array( + 'style' => array( + 'type' => 'object', + ), + ), + 'supports' => array( + 'dimensions' => array( + 'height' => true, + '__experimentalSkipSerialization' => array( 'height' ), + ), + ), + ) + ); + $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 = gutenberg_apply_dimensions_support( $block_type, $block_attrs ); + $expected = array(); + + $this->assertSame( $expected, $actual ); + } } From 6f055fbd2ead236d4c3e43bd72a3019c2d1ed371 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 27 Nov 2025 13:55:59 +1000 Subject: [PATCH 06/10] Update block supports docs --- docs/reference-guides/block-api/block-supports.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/reference-guides/block-api/block-supports.md b/docs/reference-guides/block-api/block-supports.md index d37b7ff777a3ba..a977c632d8eef0 100644 --- a/docs/reference-guides/block-api/block-supports.md +++ b/docs/reference-guides/block-api/block-supports.md @@ -629,6 +629,7 @@ _**Note:** Since WordPress 6.2._ - Type: `Object` - Default value: null - Subproperties: + - `height`: type `boolean`, default value `false` - `minHeight`: type `boolean`, default value `false` - `width`: type `boolean`, default value `false` @@ -638,6 +639,7 @@ This value signals that a block supports some of the CSS style properties relate supports: { dimensions: { aspectRatio: true // Enable aspect ratio control. + height: true // Enable height control. minHeight: true // Enable min height control. width: true // Enable width control. } @@ -646,13 +648,14 @@ supports: { When a block declares support for a specific dimensions property, its attributes definition is extended to include the `style` attribute. -- `style`: an attribute of `object` type with no default assigned. This is added when `aspectRatio`, `minHeight`, or `width` support is declared. It stores the custom values set by the user. For example: +- `style`: an attribute of `object` type with no default assigned. This is added when `aspectRatio`, `height`, `minHeight`, or `width` support is declared. It stores the custom values set by the user. For example: ```js attributes: { style: { dimensions: { aspectRatio: "16/9", + height: "40vh", minHeight: "50vh", width: "400px", } From bb50e57d2336199afc4c1c244ed8c59238b96529 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 8 Dec 2025 22:29:15 -0800 Subject: [PATCH 07/10] Update height support for using presets --- lib/class-wp-theme-json-gutenberg.php | 2 +- .../src/components/global-styles/dimensions-panel.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 9716bee591b4b4..dc086ad0d648a8 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -220,7 +220,7 @@ class WP_Theme_JSON_Gutenberg { 'value_key' => 'size', 'css_vars' => '--wp--preset--dimension--$slug', 'classes' => array(), - 'properties' => array( 'width', 'min-height' ), + 'properties' => array( 'width', 'height', 'min-height' ), ), ); diff --git a/packages/block-editor/src/components/global-styles/dimensions-panel.js b/packages/block-editor/src/components/global-styles/dimensions-panel.js index 5208f7c1d0f40e..9a91f7d2a4cce5 100644 --- a/packages/block-editor/src/components/global-styles/dimensions-panel.js +++ b/packages/block-editor/src/components/global-styles/dimensions-panel.js @@ -736,7 +736,7 @@ export default function DimensionsPanel( { } panelId={ panelId } > - Date: Tue, 9 Dec 2025 22:11:49 -0800 Subject: [PATCH 08/10] Handle aspect ratio and height conflicts --- lib/block-supports/dimensions.php | 7 ++++-- packages/block-editor/src/hooks/dimensions.js | 22 ++++++++++++------- 2 files changed, 19 insertions(+), 10 deletions(-) diff --git a/lib/block-supports/dimensions.php b/lib/block-supports/dimensions.php index d20abc10949053..1874017e0137bd 100644 --- a/lib/block-supports/dimensions.php +++ b/lib/block-supports/dimensions.php @@ -103,14 +103,17 @@ function gutenberg_render_dimensions_support( $block_content, $block ) { $dimensions_block_styles = array(); $dimensions_block_styles['aspectRatio'] = $block_attributes['style']['dimensions']['aspectRatio'] ?? null; - // To ensure the aspect ratio does not get overridden by `minHeight` unset any existing rule. + // To ensure the aspect ratio does not get overridden by `minHeight` or `height` unset any existing rule. if ( isset( $dimensions_block_styles['aspectRatio'] ) ) { $dimensions_block_styles['minHeight'] = 'unset'; + $dimensions_block_styles['height'] = 'unset'; } elseif ( isset( $block_attributes['style']['dimensions']['minHeight'] ) || - isset( $block_attributes['minHeight'] ) + isset( $block_attributes['minHeight'] ) || + isset( $block_attributes['style']['dimensions']['height'] ) || + isset( $block_attributes['height'] ) ) { $dimensions_block_styles['aspectRatio'] = 'unset'; } diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js index d937beff6bb7f7..e2a4cd779fa5fc 100644 --- a/packages/block-editor/src/hooks/dimensions.js +++ b/packages/block-editor/src/hooks/dimensions.js @@ -176,7 +176,7 @@ export default { }, }; -function useBlockProps( { name, minHeight, style } ) { +function useBlockProps( { name, height, minHeight, style } ) { if ( ! hasDimensionsSupport( name, 'aspectRatio' ) || shouldSkipSerialization( name, DIMENSIONS_SUPPORT_KEY, 'aspectRatio' ) @@ -193,16 +193,22 @@ function useBlockProps( { name, minHeight, style } ) { const inlineStyleOverrides = {}; // Apply rules to unset incompatible styles. - // Note that a set `aspectRatio` will win out if both an aspect ratio and a minHeight are set. + // Note that a set `aspectRatio` will win out if both an aspect ratio and height-related properties are set. // This is because the aspect ratio is a newer block support, so (in theory) any aspect ratio - // that is set should be intentional and should override any existing minHeight. The Cover block - // and dimensions controls have logic that will manually clear the aspect ratio if a minHeight - // is set. + // that is set should be intentional and should override any existing height properties. The Cover block + // and dimensions controls have logic that will manually clear the aspect ratio if height properties + // are set. if ( style?.dimensions?.aspectRatio ) { - // To ensure the aspect ratio does not get overridden by `minHeight` unset any existing rule. + // To ensure the aspect ratio does not get overridden by `minHeight` or `height` unset any existing rule. inlineStyleOverrides.minHeight = 'unset'; - } else if ( minHeight || style?.dimensions?.minHeight ) { - // To ensure the minHeight does not get overridden by `aspectRatio` unset any existing rule. + inlineStyleOverrides.height = 'unset'; + } else if ( + minHeight || + style?.dimensions?.minHeight || + height || + style?.dimensions?.height + ) { + // To ensure height properties do not get overridden by `aspectRatio` unset any existing rule. inlineStyleOverrides.aspectRatio = 'unset'; } From 095a41ff8a719c29139abfdc77c96c85a283425a Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 15 Dec 2025 21:52:12 -0500 Subject: [PATCH 09/10] Fix backport changelog --- backport-changelog/7.0/10471.md | 3 --- backport-changelog/7.0/10474.md | 3 +++ 2 files changed, 3 insertions(+), 3 deletions(-) delete mode 100644 backport-changelog/7.0/10471.md create mode 100644 backport-changelog/7.0/10474.md diff --git a/backport-changelog/7.0/10471.md b/backport-changelog/7.0/10471.md deleted file mode 100644 index 06162f3372b8c8..00000000000000 --- a/backport-changelog/7.0/10471.md +++ /dev/null @@ -1,3 +0,0 @@ -https://github.com/WordPress/wordpress-develop/pull/10471 - -* https://github.com/WordPress/gutenberg/pull/71905 diff --git a/backport-changelog/7.0/10474.md b/backport-changelog/7.0/10474.md new file mode 100644 index 00000000000000..b185388a4e9bf2 --- /dev/null +++ b/backport-changelog/7.0/10474.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/10474 + +* https://github.com/WordPress/gutenberg/pull/71914 From 5e5fdd39cd1390a1584cd5441b6f855c82144036 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Tue, 16 Dec 2025 09:48:00 -0500 Subject: [PATCH 10/10] Fix unsetting aspect ratio for height change --- .../components/global-styles/dimensions-panel.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/global-styles/dimensions-panel.js b/packages/block-editor/src/components/global-styles/dimensions-panel.js index 9a91f7d2a4cce5..db7cc392d4d370 100644 --- a/packages/block-editor/src/components/global-styles/dimensions-panel.js +++ b/packages/block-editor/src/components/global-styles/dimensions-panel.js @@ -402,7 +402,19 @@ export default function DimensionsPanel( { const showHeightControl = useHasHeight( settings ); const heightValue = decodeValue( inheritedValue?.dimensions?.height ); const setHeightValue = ( newValue ) => { - onChange( setImmutably( value, [ 'dimensions', 'height' ], newValue ) ); + const tempValue = setImmutably( + value, + [ 'dimensions', 'height' ], + newValue + ); + // Apply height, while removing any applied aspect ratio. + onChange( + setImmutably( + tempValue, + [ 'dimensions', 'aspectRatio' ], + undefined + ) + ); }; const resetHeightValue = () => { setHeightValue( undefined );