From 769bb54610ba47525aa2df35aa9b468e0c729e1f Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Thu, 25 Sep 2025 13:53:53 -0400 Subject: [PATCH 01/12] Add width and height block supports under dimensions. --- .../global-styles/dimensions-panel.js | 69 +++++++++++++++++++ .../src/components/global-styles/hooks.js | 8 +++ packages/block-editor/src/hooks/dimensions.js | 36 ++++++++-- packages/block-editor/src/hooks/utils.js | 7 ++ packages/blocks/src/api/constants.js | 10 +++ .../global-styles-ui/src/dimensions-panel.tsx | 2 + 6 files changed, 125 insertions(+), 7 deletions(-) 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 1e56f5f9490d9f..2b3a236f08b976 100644 --- a/packages/block-editor/src/components/global-styles/dimensions-panel.js +++ b/packages/block-editor/src/components/global-styles/dimensions-panel.js @@ -39,6 +39,8 @@ export function useHasDimensionsPanel( settings ) { const hasMargin = useHasMargin( settings ); const hasGap = useHasGap( settings ); const hasMinHeight = useHasMinHeight( settings ); + const hasWidth = useHasWidth( settings ); + const hasHeight = useHasHeight( settings ); const hasAspectRatio = useHasAspectRatio( settings ); const hasChildLayout = useHasChildLayout( settings ); @@ -50,6 +52,8 @@ export function useHasDimensionsPanel( settings ) { hasMargin || hasGap || hasMinHeight || + hasWidth || + hasHeight || hasAspectRatio || hasChildLayout ) ); @@ -79,6 +83,13 @@ function useHasMinHeight( settings ) { return settings?.dimensions?.minHeight; } +function useHasWidth( settings ) { + return settings?.dimensions?.width; +} +function useHasHeight( settings ) { + return settings?.dimensions?.height; +} + function useHasAspectRatio( settings ) { return settings?.dimensions?.aspectRatio; } @@ -206,6 +217,7 @@ const DEFAULT_CONTROLS = { margin: true, blockGap: true, minHeight: true, + width: false, aspectRatio: true, childLayout: true, }; @@ -384,6 +396,28 @@ export default function DimensionsPanel( { }; const hasMinHeightValue = () => !! value?.dimensions?.minHeight; + // Width + const showWidthControl = useHasWidth( settings ); + const widthValue = decodeValue( inheritedValue?.dimensions?.width ); + const setWidthValue = ( newValue ) => { + onChange( setImmutably( value, [ 'dimensions', 'width' ], newValue ) ); + }; + const resetWidthValue = () => { + setWidthValue( undefined ); + }; + const hasWidthValue = () => !! value?.dimensions?.width; + + // 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; + // Aspect Ratio const showAspectRatioControl = useHasAspectRatio( settings ); const aspectRatioValue = decodeValue( @@ -439,6 +473,7 @@ export default function DimensionsPanel( { ...previousValue?.dimensions, minHeight: undefined, aspectRatio: undefined, + width: undefined, }, }; }, [] ); @@ -688,6 +723,40 @@ export default function DimensionsPanel( { /> ) } + { showWidthControl && ( + + + + ) } + { showHeightControl && ( + + + + ) } { showAspectRatioControl && ( { if ( ! supportedStyles.includes( diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js index e1206c12645552..d5105ba9d5cfb9 100644 --- a/packages/block-editor/src/hooks/dimensions.js +++ b/packages/block-editor/src/hooks/dimensions.js @@ -81,6 +81,7 @@ export function DimensionsPanel( { clientId, name, setAttributes, settings } ) { }, [ clientId, isEnabled ] ); + const [ visualizedProperty, setVisualizedProperty ] = useVisualizer(); const onChange = ( newStyle ) => { setAttributes( { @@ -156,7 +157,12 @@ export function hasDimensionsSupport( blockName, feature = 'any' ) { } if ( feature === 'any' ) { - return !! ( support?.aspectRatio || !! support?.minHeight ); + return !! ( + support?.aspectRatio || + !! support?.minHeight || + !! support?.width || + !! support?.height + ); } return !! support?.[ feature ]; @@ -164,16 +170,16 @@ export function hasDimensionsSupport( blockName, feature = 'any' ) { export default { useBlockProps, - attributeKeys: [ 'minHeight', 'style' ], + attributeKeys: [ 'minHeight', 'width', 'height', 'style' ], hasSupport( name ) { - return hasDimensionsSupport( name, 'aspectRatio' ); + return hasDimensionsSupport( name ); }, }; -function useBlockProps( { name, minHeight, style } ) { +function useBlockProps( { name, width, height, minHeight, style } ) { if ( - ! hasDimensionsSupport( name, 'aspectRatio' ) || - shouldSkipSerialization( name, DIMENSIONS_SUPPORT_KEY, 'aspectRatio' ) + ! hasDimensionsSupport( name ) || + shouldSkipSerialization( name, DIMENSIONS_SUPPORT_KEY ) ) { return {}; } @@ -200,7 +206,23 @@ function useBlockProps( { name, minHeight, style } ) { inlineStyleOverrides.aspectRatio = 'unset'; } - return { className, style: inlineStyleOverrides }; + if ( + ( width || style?.dimensions?.width ) && + ! shouldSkipSerialization( name, DIMENSIONS_SUPPORT_KEY, 'width' ) + ) { + inlineStyleOverrides.width = style?.dimensions?.width; + } + if ( + ( height || style?.dimensions?.height ) && + ! shouldSkipSerialization( name, DIMENSIONS_SUPPORT_KEY, 'height' ) + ) { + inlineStyleOverrides.height = style?.dimensions?.height; + } + + return { + className, + style: inlineStyleOverrides, + }; } /** diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js index f0fef67a548dcf..d7bb2d75aa06a6 100644 --- a/packages/block-editor/src/hooks/utils.js +++ b/packages/block-editor/src/hooks/utils.js @@ -263,6 +263,8 @@ export function useBlockSettings( name, parentLayout ) { units, aspectRatio, minHeight, + width, + height, layout, borderColor, borderRadius, @@ -321,6 +323,8 @@ export function useBlockSettings( name, parentLayout ) { 'spacing.units', 'dimensions.aspectRatio', 'dimensions.minHeight', + 'dimensions.width', + 'dimensions.height', 'layout', 'border.color', 'border.radius', @@ -430,6 +434,8 @@ export function useBlockSettings( name, parentLayout ) { dimensions: { aspectRatio, minHeight, + width, + height, }, layout, parentLayout, @@ -466,6 +472,7 @@ export function useBlockSettings( name, parentLayout ) { units, aspectRatio, minHeight, + width, layout, parentLayout, borderColor, diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js index 07e8072e9cd272..3e3c571936e771 100644 --- a/packages/blocks/src/api/constants.js +++ b/packages/blocks/src/api/constants.js @@ -222,6 +222,16 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = { support: [ 'dimensions', 'minHeight' ], useEngine: true, }, + width: { + value: [ 'dimensions', 'width' ], + support: [ 'dimensions', 'width' ], + useEngine: true, + }, + height: { + value: [ 'dimensions', 'width' ], + support: [ 'dimensions', 'width' ], + useEngine: true, + }, padding: { value: [ 'spacing', 'padding' ], support: [ 'spacing', 'padding' ], diff --git a/packages/global-styles-ui/src/dimensions-panel.tsx b/packages/global-styles-ui/src/dimensions-panel.tsx index e10a19d013e962..f44db8090c2921 100644 --- a/packages/global-styles-ui/src/dimensions-panel.tsx +++ b/packages/global-styles-ui/src/dimensions-panel.tsx @@ -21,6 +21,8 @@ const DEFAULT_CONTROLS = { margin: true, blockGap: true, minHeight: true, + width: false, + height: false, childLayout: false, }; From 89ed41915b3c46d9eaf7b9dac91451072a3c7396 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Thu, 25 Sep 2025 14:16:32 -0400 Subject: [PATCH 02/12] Render width and height on the front end. --- lib/block-supports/dimensions.php | 10 +++++++--- .../style-engine/src/class-wp-style-engine.php | 18 ++++++++++++++++++ 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/lib/block-supports/dimensions.php b/lib/block-supports/dimensions.php index 008f67adeccdde..6ef59a967851f2 100644 --- a/lib/block-supports/dimensions.php +++ b/lib/block-supports/dimensions.php @@ -86,11 +86,11 @@ function gutenberg_apply_dimensions_support( $block_type, $block_attributes ) { function gutenberg_render_dimensions_support( $block_content, $block ) { $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] ); $block_attributes = ( isset( $block['attrs'] ) && is_array( $block['attrs'] ) ) ? $block['attrs'] : array(); - $has_aspect_ratio_support = block_has_support( $block_type, array( 'dimensions', 'aspectRatio' ), false ); + $has_dimensions_support = block_has_support( $block_type, 'dimensions', false ); if ( - ! $has_aspect_ratio_support || - wp_should_skip_block_supports_serialization( $block_type, 'dimensions', 'aspectRatio' ) + ! $has_dimensions_support || + wp_should_skip_block_supports_serialization( $block_type, 'dimensions' ) ) { return $block_content; } @@ -110,6 +110,10 @@ function gutenberg_render_dimensions_support( $block_content, $block ) { $dimensions_block_styles['aspectRatio'] = 'unset'; } + // Add width and height values. + $dimensions_block_styles['width'] = $block_attributes['style']['dimensions']['width'] ?? null; + $dimensions_block_styles['height'] = $block_attributes['style']['dimensions']['height'] ?? null; + $styles = gutenberg_style_engine_get_styles( array( 'dimensions' => $dimensions_block_styles ) ); if ( ! empty( $styles['css'] ) ) { diff --git a/packages/style-engine/src/class-wp-style-engine.php b/packages/style-engine/src/class-wp-style-engine.php index d34132863cff48..b1e10600705081 100644 --- a/packages/style-engine/src/class-wp-style-engine.php +++ b/packages/style-engine/src/class-wp-style-engine.php @@ -210,6 +210,24 @@ final class WP_Style_Engine { 'spacing' => '--wp--preset--spacing--$slug', ), ), + 'width' => array( + 'property_keys' => array( + 'default' => 'width', + ), + 'path' => array( 'dimensions', 'width' ), + 'css_vars' => array( + 'spacing' => '--wp--preset--spacing--$slug', + ), + ), + 'height' => array( + 'property_keys' => array( + 'default' => 'height', + ), + 'path' => array( 'dimensions', 'height' ), + 'css_vars' => array( + 'spacing' => '--wp--preset--spacing--$slug', + ), + ), ), 'spacing' => array( 'padding' => array( From 55402fea4cffa4ab3ac725fe39d78d4c8a3ad08b Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Thu, 25 Sep 2025 14:26:31 -0400 Subject: [PATCH 03/12] PHPCS fixes --- lib/block-supports/dimensions.php | 4 ++-- packages/style-engine/src/class-wp-style-engine.php | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/block-supports/dimensions.php b/lib/block-supports/dimensions.php index 6ef59a967851f2..0d532fab4d60ae 100644 --- a/lib/block-supports/dimensions.php +++ b/lib/block-supports/dimensions.php @@ -86,7 +86,7 @@ function gutenberg_apply_dimensions_support( $block_type, $block_attributes ) { function gutenberg_render_dimensions_support( $block_content, $block ) { $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] ); $block_attributes = ( isset( $block['attrs'] ) && is_array( $block['attrs'] ) ) ? $block['attrs'] : array(); - $has_dimensions_support = block_has_support( $block_type, 'dimensions', false ); + $has_dimensions_support = block_has_support( $block_type, 'dimensions', false ); if ( ! $has_dimensions_support || @@ -111,7 +111,7 @@ function gutenberg_render_dimensions_support( $block_content, $block ) { } // Add width and height values. - $dimensions_block_styles['width'] = $block_attributes['style']['dimensions']['width'] ?? null; + $dimensions_block_styles['width'] = $block_attributes['style']['dimensions']['width'] ?? null; $dimensions_block_styles['height'] = $block_attributes['style']['dimensions']['height'] ?? null; $styles = gutenberg_style_engine_get_styles( array( 'dimensions' => $dimensions_block_styles ) ); diff --git a/packages/style-engine/src/class-wp-style-engine.php b/packages/style-engine/src/class-wp-style-engine.php index b1e10600705081..661ba19a0ccc4c 100644 --- a/packages/style-engine/src/class-wp-style-engine.php +++ b/packages/style-engine/src/class-wp-style-engine.php @@ -210,7 +210,7 @@ final class WP_Style_Engine { 'spacing' => '--wp--preset--spacing--$slug', ), ), - 'width' => array( + 'width' => array( 'property_keys' => array( 'default' => 'width', ), @@ -219,7 +219,7 @@ final class WP_Style_Engine { 'spacing' => '--wp--preset--spacing--$slug', ), ), - 'height' => array( + 'height' => array( 'property_keys' => array( 'default' => 'height', ), From 36a526d27dfe1c7a0a2a7b096f571d27c747f602 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Thu, 25 Sep 2025 15:53:50 -0400 Subject: [PATCH 04/12] PHPCS whitespace fixes. --- lib/block-supports/dimensions.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/block-supports/dimensions.php b/lib/block-supports/dimensions.php index 0d532fab4d60ae..a6a6ffbb29fc7f 100644 --- a/lib/block-supports/dimensions.php +++ b/lib/block-supports/dimensions.php @@ -84,9 +84,9 @@ function gutenberg_apply_dimensions_support( $block_type, $block_attributes ) { * @return string Filtered block content. */ function gutenberg_render_dimensions_support( $block_content, $block ) { - $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] ); - $block_attributes = ( isset( $block['attrs'] ) && is_array( $block['attrs'] ) ) ? $block['attrs'] : array(); - $has_dimensions_support = block_has_support( $block_type, 'dimensions', false ); + $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] ); + $block_attributes = ( isset( $block['attrs'] ) && is_array( $block['attrs'] ) ) ? $block['attrs'] : array(); + $has_dimensions_support = block_has_support( $block_type, 'dimensions', false ); if ( ! $has_dimensions_support || From 105a250496a3814481f6f9c867b231e0bbc537c9 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Thu, 25 Sep 2025 19:36:50 -0400 Subject: [PATCH 05/12] Remove the height support to split it out to a new PR. --- docs/reference-guides/core-blocks.md | 2 +- lib/block-supports/dimensions.php | 5 +-- .../global-styles/dimensions-panel.js | 39 ++----------------- packages/block-editor/src/hooks/dimensions.js | 13 ++----- packages/block-editor/src/hooks/utils.js | 3 -- packages/block-library/src/cover/block.json | 3 +- packages/blocks/src/api/constants.js | 5 --- .../global-styles-ui/src/dimensions-panel.tsx | 1 - .../src/class-wp-style-engine.php | 9 ----- 9 files changed, 11 insertions(+), 69 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 72557b6180d68d..6014144f318243 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -296,7 +296,7 @@ Add an image or video with a text overlay. ([Source](https://github.com/WordPres - **Name:** core/cover - **Category:** media -- **Supports:** align, allowedBlocks, anchor, color (heading, text, ~~background~~, ~~enableContrastChecker~~), dimensions (aspectRatio), filter (duotone), interactivity (clientNavigation), layout (~~allowJustification~~), shadow, spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~ +- **Supports:** align, allowedBlocks, anchor, color (heading, text, ~~background~~, ~~enableContrastChecker~~), dimensions (aspectRatio, width), filter (duotone), interactivity (clientNavigation), layout (~~allowJustification~~), shadow, spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~ - **Attributes:** alt, backgroundType, contentPosition, customGradient, customOverlayColor, dimRatio, focalPoint, gradient, hasParallax, id, isDark, isRepeated, isUserOverlayColor, minHeight, minHeightUnit, overlayColor, poster, sizeSlug, tagName, templateLock, url, useFeaturedImage ## Details diff --git a/lib/block-supports/dimensions.php b/lib/block-supports/dimensions.php index a6a6ffbb29fc7f..cd460f5e07c38f 100644 --- a/lib/block-supports/dimensions.php +++ b/lib/block-supports/dimensions.php @@ -110,9 +110,8 @@ function gutenberg_render_dimensions_support( $block_content, $block ) { $dimensions_block_styles['aspectRatio'] = 'unset'; } - // Add width and height values. - $dimensions_block_styles['width'] = $block_attributes['style']['dimensions']['width'] ?? null; - $dimensions_block_styles['height'] = $block_attributes['style']['dimensions']['height'] ?? null; + // Add width value. + $dimensions_block_styles['width'] = $block_attributes['style']['dimensions']['width'] ?? null; $styles = gutenberg_style_engine_get_styles( array( 'dimensions' => $dimensions_block_styles ) ); 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 2b3a236f08b976..1e1fb4093fa696 100644 --- a/packages/block-editor/src/components/global-styles/dimensions-panel.js +++ b/packages/block-editor/src/components/global-styles/dimensions-panel.js @@ -39,8 +39,7 @@ export function useHasDimensionsPanel( settings ) { const hasMargin = useHasMargin( settings ); const hasGap = useHasGap( settings ); const hasMinHeight = useHasMinHeight( settings ); - const hasWidth = useHasWidth( settings ); - const hasHeight = useHasHeight( settings ); + const hasWidth = blockHasWidth( settings ); const hasAspectRatio = useHasAspectRatio( settings ); const hasChildLayout = useHasChildLayout( settings ); @@ -53,7 +52,6 @@ export function useHasDimensionsPanel( settings ) { hasGap || hasMinHeight || hasWidth || - hasHeight || hasAspectRatio || hasChildLayout ) ); @@ -83,12 +81,9 @@ function useHasMinHeight( settings ) { return settings?.dimensions?.minHeight; } -function useHasWidth( settings ) { +function blockHasWidth( settings ) { return settings?.dimensions?.width; } -function useHasHeight( settings ) { - return settings?.dimensions?.height; -} function useHasAspectRatio( settings ) { return settings?.dimensions?.aspectRatio; @@ -397,7 +392,7 @@ export default function DimensionsPanel( { const hasMinHeightValue = () => !! value?.dimensions?.minHeight; // Width - const showWidthControl = useHasWidth( settings ); + const showWidthControl = blockHasWidth( settings ); const widthValue = decodeValue( inheritedValue?.dimensions?.width ); const setWidthValue = ( newValue ) => { onChange( setImmutably( value, [ 'dimensions', 'width' ], newValue ) ); @@ -407,17 +402,6 @@ export default function DimensionsPanel( { }; const hasWidthValue = () => !! value?.dimensions?.width; - // 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; - // Aspect Ratio const showAspectRatioControl = useHasAspectRatio( settings ); const aspectRatioValue = decodeValue( @@ -740,23 +724,6 @@ export default function DimensionsPanel( { /> ) } - { showHeightControl && ( - - - - ) } { showAspectRatioControl && ( '--wp--preset--spacing--$slug', ), ), - 'height' => array( - 'property_keys' => array( - 'default' => 'height', - ), - 'path' => array( 'dimensions', 'height' ), - 'css_vars' => array( - 'spacing' => '--wp--preset--spacing--$slug', - ), - ), ), 'spacing' => array( 'padding' => array( From ab2591fbb395509a14bca8a0b555919a56ae140a Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Thu, 25 Sep 2025 19:39:11 -0400 Subject: [PATCH 06/12] Remove support for cover block used in testing. --- docs/reference-guides/core-blocks.md | 2 +- packages/block-library/src/cover/block.json | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 6014144f318243..72557b6180d68d 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -296,7 +296,7 @@ Add an image or video with a text overlay. ([Source](https://github.com/WordPres - **Name:** core/cover - **Category:** media -- **Supports:** align, allowedBlocks, anchor, color (heading, text, ~~background~~, ~~enableContrastChecker~~), dimensions (aspectRatio, width), filter (duotone), interactivity (clientNavigation), layout (~~allowJustification~~), shadow, spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~ +- **Supports:** align, allowedBlocks, anchor, color (heading, text, ~~background~~, ~~enableContrastChecker~~), dimensions (aspectRatio), filter (duotone), interactivity (clientNavigation), layout (~~allowJustification~~), shadow, spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~ - **Attributes:** alt, backgroundType, contentPosition, customGradient, customOverlayColor, dimRatio, focalPoint, gradient, hasParallax, id, isDark, isRepeated, isUserOverlayColor, minHeight, minHeightUnit, overlayColor, poster, sizeSlug, tagName, templateLock, url, useFeaturedImage ## Details diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json index b5d8effa4d4437..97095ab4b95152 100644 --- a/packages/block-library/src/cover/block.json +++ b/packages/block-library/src/cover/block.json @@ -122,8 +122,7 @@ "enableContrastChecker": false }, "dimensions": { - "aspectRatio": true, - "width": true + "aspectRatio": true }, "typography": { "fontSize": true, From 257c2fe316d99a12180a99f625302a26e8a8ff00 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 22 Oct 2025 19:00:51 +1000 Subject: [PATCH 07/12] Fix and complete width block support --- .../themes/global-settings-and-styles.md | 4 +- docs/how-to-guides/themes/theme-support.md | 2 +- .../block-api/block-supports.md | 7 +++- .../theme-json-reference/styles-versions.md | 1 + .../theme-json-reference/theme-json-living.md | 8 ++-- lib/block-supports/dimensions.php | 42 ++++++++++--------- lib/class-wp-theme-json-gutenberg.php | 7 ++++ .../global-styles/dimensions-panel.js | 8 ++-- .../src/components/global-styles/hooks.js | 10 +---- packages/block-editor/src/hooks/dimensions.js | 18 ++------ .../src/settings/get-setting.ts | 1 + .../global-styles-ui/src/dimensions-panel.tsx | 2 +- .../src/class-wp-style-engine.php | 3 -- .../src/styles/dimensions/index.ts | 14 ++++++- schemas/json/block.json | 8 +++- schemas/json/theme.json | 14 ++++++- 16 files changed, 88 insertions(+), 61 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 e0b7653321413d..b8237ab3dc51a2 100644 --- a/docs/how-to-guides/themes/global-settings-and-styles.md +++ b/docs/how-to-guides/themes/global-settings-and-styles.md @@ -238,6 +238,7 @@ The settings section has the following structure: "dimensions": { "aspectRatio": false, "minHeight": false, + "width": false, }, "layout": { "contentSize": "800px", @@ -301,7 +302,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 +- dimensions: aspectRatio, 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", "minHeight": "value" + "width": "value" }, "filter": { "duotone": "value" diff --git a/docs/how-to-guides/themes/theme-support.md b/docs/how-to-guides/themes/theme-support.md index e5d6c34e4081ce..ad86be407a0b25 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 +- dimensions: aspectRatio, minHeight, width - position: sticky ```php diff --git a/docs/reference-guides/block-api/block-supports.md b/docs/reference-guides/block-api/block-supports.md index eb726c426bdfc9..ec5a7ce75752ce 100644 --- a/docs/reference-guides/block-api/block-supports.md +++ b/docs/reference-guides/block-api/block-supports.md @@ -630,6 +630,7 @@ _**Note:** Since WordPress 6.2._ - Default value: null - Subproperties: - `minHeight`: type `boolean`, default value `false` + - `width`: type `boolean`, default value `false` This value signals that a block supports some of the CSS style properties related to dimensions. When it does, the block editor will show UI controls for the user to set their values if [the theme declares support](/docs/how-to-guides/themes/global-settings-and-styles.md#opt-in-into-ui-controls). @@ -638,20 +639,22 @@ supports: { dimensions: { aspectRatio: true // Enable aspect ratio control. minHeight: true // Enable min height control. + width: true // Enable width control. } } ``` 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` or `minHeight` 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`, `minHeight`, or `width` support is declared. It stores the custom values set by the user. For example: ```js attributes: { style: { dimensions: { aspectRatio: "16/9", - minHeight: "50vh" + minHeight: "50vh", + width: "400px", } } } diff --git a/docs/reference-guides/theme-json-reference/styles-versions.md b/docs/reference-guides/theme-json-reference/styles-versions.md index 0cbffdc6ebfe07..cc80c6ca8388d9 100644 --- a/docs/reference-guides/theme-json-reference/styles-versions.md +++ b/docs/reference-guides/theme-json-reference/styles-versions.md @@ -49,6 +49,7 @@ New styles options are integrated into theme.json on a regular basis. Knowing th | `spacing.margin.bottom` | 5.8 | 5.9 | | `spacing.blockGap` | 5.9 | 5.9 | | `dimensions.minHeight` | 6.2 | N/A | +| `dimensions.width` | 7.0 | N/A | | `outline.color` | 6.2 | N/A | | `outline.offset` | 6.2 | N/A | | `outline.style` | 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 138e32f76505ee..95a599dd97fe27 100644 --- a/docs/reference-guides/theme-json-reference/theme-json-living.md +++ b/docs/reference-guides/theme-json-reference/theme-json-living.md @@ -2,7 +2,7 @@ > This is the living specification for **version 3** of `theme.json`. This version works with WordPress 6.6 or later, and the latest Gutenberg plugin. > -> There are some related documents that you may be interested in: +> There are some related documents that you may be interested in: > - the [theme.json v1](/docs/reference-guides/theme-json-reference/theme-json-v1.md) specification, > - the [theme.json v2](/docs/reference-guides/theme-json-reference/theme-json-v2.md) specification, and > - the [reference to migrate from older theme.json versions](/docs/reference-guides/theme-json-reference/theme-json-migrations.md). @@ -15,7 +15,7 @@ This documentation was generated from the JSON schema for theme.json. The latest schema for version 3, including all the latest changes from the Gutenberg plugin, is available at https://schemas.wp.org/trunk/theme.json. -Theme.json schemas for each WordPress version are available at https://schemas.wp.org/wp/{{version}}/theme.json. +Theme.json schemas for each WordPress version are available at https://schemas.wp.org/wp/{{version}}/theme.json. For example, a schema for WordPress 5.8 is available at https://schemas.wp.org/wp/5.8/theme.json. See [Developing with theme.json](/docs/how-to-guides/themes/global-settings-and-styles.md#developing-with-themejson) for how to use the JSON schema in your editor. @@ -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 +- dimensions: aspectRatio, minHeight, width - position: sticky - spacing: blockGap, margin, padding - typography: lineHeight @@ -112,6 +112,7 @@ Settings related to dimensions. | 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 } ]` | | | minHeight | Allow users to set custom minimum height. | `boolean` | `false` | +| width | Allow users to set custom width. | `boolean` | `false` | --- @@ -268,6 +269,7 @@ Dimensions styles. | -------- | ----------- | ---- | | aspectRatio | Sets the `aspect-ratio` 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 cd460f5e07c38f..58d0535a817df4 100644 --- a/lib/block-supports/dimensions.php +++ b/lib/block-supports/dimensions.php @@ -44,27 +44,32 @@ function gutenberg_register_dimensions_support( $block_type ) { * @return array Block dimensions CSS classes and inline styles. */ function gutenberg_apply_dimensions_support( $block_type, $block_attributes ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable - 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'] = $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 = gutenberg_style_engine_get_styles( array( 'dimensions' => $dimensions_block_styles ) ); if ( ! empty( $styles['css'] ) ) { @@ -84,13 +89,13 @@ function gutenberg_apply_dimensions_support( $block_type, $block_attributes ) { * @return string Filtered block content. */ function gutenberg_render_dimensions_support( $block_content, $block ) { - $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] ); - $block_attributes = ( isset( $block['attrs'] ) && is_array( $block['attrs'] ) ) ? $block['attrs'] : array(); - $has_dimensions_support = block_has_support( $block_type, 'dimensions', false ); + $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] ); + $block_attributes = ( isset( $block['attrs'] ) && is_array( $block['attrs'] ) ) ? $block['attrs'] : array(); + $has_aspect_ratio_support = block_has_support( $block_type, array( 'dimensions', 'aspectRatio' ), false ); if ( - ! $has_dimensions_support || - wp_should_skip_block_supports_serialization( $block_type, 'dimensions' ) + ! $has_aspect_ratio_support || + wp_should_skip_block_supports_serialization( $block_type, 'dimensions', 'aspectRatio' ) ) { return $block_content; } @@ -110,9 +115,6 @@ function gutenberg_render_dimensions_support( $block_content, $block ) { $dimensions_block_styles['aspectRatio'] = 'unset'; } - // Add width value. - $dimensions_block_styles['width'] = $block_attributes['style']['dimensions']['width'] ?? null; - $styles = gutenberg_style_engine_get_styles( array( 'dimensions' => $dimensions_block_styles ) ); if ( ! empty( $styles['css'] ) ) { diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 14d8dca5caa0b7..22622a0fc9df01 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -232,6 +232,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`. * * @var array */ @@ -297,6 +298,7 @@ class WP_Theme_JSON_Gutenberg { 'text-transform' => array( 'typography', 'textTransform' ), 'filter' => array( 'filter', 'duotone' ), 'box-shadow' => array( 'shadow' ), + 'width' => array( 'dimensions', 'width' ), 'writing-mode' => array( 'typography', 'writingMode' ), ); @@ -386,6 +388,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`. * @var array */ const VALID_SETTINGS = array( @@ -425,6 +428,7 @@ class WP_Theme_JSON_Gutenberg { 'aspectRatios' => null, 'defaultAspectRatios' => null, 'minHeight' => null, + 'width' => null, ), 'layout' => array( 'contentSize' => null, @@ -539,6 +543,7 @@ class WP_Theme_JSON_Gutenberg { 'dimensions' => array( 'aspectRatio' => null, 'minHeight' => null, + 'width' => null, ), 'filter' => array( 'duotone' => null, @@ -741,6 +746,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`. * @var array */ const APPEARANCE_TOOLS_OPT_INS = array( @@ -756,6 +762,7 @@ public static function get_element_class_name( $element ) { array( 'color', 'caption' ), array( 'dimensions', 'aspectRatio' ), array( 'dimensions', 'minHeight' ), + array( 'dimensions', 'width' ), // BEGIN EXPERIMENTAL. // Allow `position.fixed` to be opted-in by default. // Sticky position support was backported to WordPress 6.2 in https://core.trac.wordpress.org/ticket/57618. 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 1e1fb4093fa696..ef2aa8804f8aae 100644 --- a/packages/block-editor/src/components/global-styles/dimensions-panel.js +++ b/packages/block-editor/src/components/global-styles/dimensions-panel.js @@ -39,7 +39,7 @@ export function useHasDimensionsPanel( settings ) { const hasMargin = useHasMargin( settings ); const hasGap = useHasGap( settings ); const hasMinHeight = useHasMinHeight( settings ); - const hasWidth = blockHasWidth( settings ); + const hasWidth = useHasWidth( settings ); const hasAspectRatio = useHasAspectRatio( settings ); const hasChildLayout = useHasChildLayout( settings ); @@ -81,7 +81,7 @@ function useHasMinHeight( settings ) { return settings?.dimensions?.minHeight; } -function blockHasWidth( settings ) { +function useHasWidth( settings ) { return settings?.dimensions?.width; } @@ -212,7 +212,7 @@ const DEFAULT_CONTROLS = { margin: true, blockGap: true, minHeight: true, - width: false, + width: true, aspectRatio: true, childLayout: true, }; @@ -392,7 +392,7 @@ export default function DimensionsPanel( { const hasMinHeightValue = () => !! value?.dimensions?.minHeight; // Width - const showWidthControl = blockHasWidth( settings ); + const showWidthControl = useHasWidth( settings ); const widthValue = decodeValue( inheritedValue?.dimensions?.width ); const setWidthValue = ( newValue ) => { onChange( setImmutably( value, [ 'dimensions', 'width' ], newValue ) ); diff --git a/packages/block-editor/src/components/global-styles/hooks.js b/packages/block-editor/src/components/global-styles/hooks.js index a3a295933aad7a..e6ac2715f07a58 100644 --- a/packages/block-editor/src/components/global-styles/hooks.js +++ b/packages/block-editor/src/components/global-styles/hooks.js @@ -152,7 +152,7 @@ export function useSettingsForBlockElement( } } ); - [ 'aspectRatio', 'minHeight' ].forEach( ( key ) => { + [ 'aspectRatio', 'minHeight', 'width' ].forEach( ( key ) => { if ( ! supportedStyles.includes( key ) ) { updatedSettings.dimensions = { ...updatedSettings.dimensions, @@ -161,14 +161,6 @@ export function useSettingsForBlockElement( } } ); - if ( supportedStyles.includes( 'width' ) ) { - updatedSettings.dimensions.width = true; - } - - if ( supportedStyles.includes( 'height' ) ) { - updatedSettings.dimensions.height = true; - } - [ 'radius', 'color', 'style', 'width' ].forEach( ( key ) => { if ( ! supportedStyles.includes( diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js index da2d495cd01cad..f3b826eb107b28 100644 --- a/packages/block-editor/src/hooks/dimensions.js +++ b/packages/block-editor/src/hooks/dimensions.js @@ -175,10 +175,10 @@ export default { }, }; -function useBlockProps( { name, width, minHeight, style } ) { +function useBlockProps( { name, minHeight, style } ) { if ( - ! hasDimensionsSupport( name ) || - shouldSkipSerialization( name, DIMENSIONS_SUPPORT_KEY ) + ! hasDimensionsSupport( name, 'aspectRatio' ) || + shouldSkipSerialization( name, DIMENSIONS_SUPPORT_KEY, 'aspectRatio' ) ) { return {}; } @@ -205,17 +205,7 @@ function useBlockProps( { name, width, minHeight, style } ) { inlineStyleOverrides.aspectRatio = 'unset'; } - if ( - ( width || style?.dimensions?.width ) && - ! shouldSkipSerialization( name, DIMENSIONS_SUPPORT_KEY, 'width' ) - ) { - inlineStyleOverrides.width = style?.dimensions?.width; - } - - return { - className, - style: inlineStyleOverrides, - }; + return { className, style: inlineStyleOverrides }; } /** diff --git a/packages/global-styles-engine/src/settings/get-setting.ts b/packages/global-styles-engine/src/settings/get-setting.ts index e4c7889ad877f6..23a9a0388bf662 100644 --- a/packages/global-styles-engine/src/settings/get-setting.ts +++ b/packages/global-styles-engine/src/settings/get-setting.ts @@ -36,6 +36,7 @@ const VALID_SETTINGS = [ 'custom', 'dimensions.aspectRatio', 'dimensions.minHeight', + 'dimensions.width', 'layout.contentSize', 'layout.definitions', 'layout.wideSize', diff --git a/packages/global-styles-ui/src/dimensions-panel.tsx b/packages/global-styles-ui/src/dimensions-panel.tsx index e9b0e7376b91a5..dd019b1d80cc77 100644 --- a/packages/global-styles-ui/src/dimensions-panel.tsx +++ b/packages/global-styles-ui/src/dimensions-panel.tsx @@ -21,7 +21,7 @@ const DEFAULT_CONTROLS = { margin: true, blockGap: true, minHeight: true, - width: false, + 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 dd93cfd6d3c173..db9e73a2c0641e 100644 --- a/packages/style-engine/src/class-wp-style-engine.php +++ b/packages/style-engine/src/class-wp-style-engine.php @@ -215,9 +215,6 @@ final class WP_Style_Engine { 'default' => 'width', ), 'path' => array( 'dimensions', 'width' ), - 'css_vars' => array( - 'spacing' => '--wp--preset--spacing--$slug', - ), ), ), 'spacing' => array( diff --git a/packages/style-engine/src/styles/dimensions/index.ts b/packages/style-engine/src/styles/dimensions/index.ts index 4ffb33e65686d6..dd8c6a98d7b644 100644 --- a/packages/style-engine/src/styles/dimensions/index.ts +++ b/packages/style-engine/src/styles/dimensions/index.ts @@ -28,4 +28,16 @@ const aspectRatio = { }, }; -export default [ minHeight, aspectRatio ]; +const width = { + name: 'width', + generate: ( style: Style, options: StyleOptions ) => { + return generateRule( + style, + options, + [ 'dimensions', 'width' ], + 'width' + ); + }, +}; + +export default [ minHeight, aspectRatio, width ]; diff --git a/schemas/json/block.json b/schemas/json/block.json index fc810bbc5eec14..d0e350b878f2a2 100644 --- a/schemas/json/block.json +++ b/schemas/json/block.json @@ -327,6 +327,11 @@ "description": "Allow blocks to define a minimum height value.", "type": "boolean", "default": false + }, + "width": { + "description": "Allow blocks to define a width value.", + "type": "boolean", + "default": false } } }, @@ -707,7 +712,8 @@ "properties": { "root": { "type": "string" }, "aspectRatio": { "type": "string" }, - "minHeight": { "type": "string" } + "minHeight": { "type": "string" }, + "width": { "type": "string" } } } ] diff --git a/schemas/json/theme.json b/schemas/json/theme.json index 34f67f1ac00ee3..026313e2379a1b 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\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, minHeight, width\n- position: sticky\n- spacing: blockGap, margin, padding\n- typography: lineHeight", "type": "boolean", "default": false } @@ -290,6 +290,11 @@ "description": "Allow users to set custom minimum height.", "type": "boolean", "default": false + }, + "width": { + "description": "Allow users to set custom width.", + "type": "boolean", + "default": false } }, "additionalProperties": false @@ -1497,6 +1502,13 @@ { "type": "string" }, { "$ref": "#/definitions/refComplete" } ] + }, + "width": { + "description": "Sets the `width` CSS property.", + "oneOf": [ + { "type": "string" }, + { "$ref": "#/definitions/refComplete" } + ] } } }, From e9ace72089d7741dca8ef0f4656dd3dec2bd0a72 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 24 Oct 2025 13:58:02 +1000 Subject: [PATCH 08/12] Fix appearance tools test --- phpunit/class-wp-theme-json-test.php | 2 ++ 1 file changed, 2 insertions(+) diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index e4162eedc6ab9b..b953caefbd4bfb 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -322,6 +322,7 @@ public function test_get_settings_appearance_true_opts_in() { 'dimensions' => array( 'aspectRatio' => true, 'minHeight' => true, + 'width' => true, ), 'position' => array( 'sticky' => true, @@ -361,6 +362,7 @@ public function test_get_settings_appearance_true_opts_in() { 'dimensions' => array( 'aspectRatio' => true, 'minHeight' => true, + 'width' => true, ), 'position' => array( 'sticky' => true, From 2aaaea45bea841eb7548d82267806d8f2629e252 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 30 Oct 2025 14:45:38 +0800 Subject: [PATCH 09/12] Add missing selectors config for dimensions --- lib/class-wp-theme-json-gutenberg.php | 1 + packages/global-styles-engine/src/core/render.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 22622a0fc9df01..9d50162c7fc4ad 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -646,6 +646,7 @@ class WP_Theme_JSON_Gutenberg { const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = array( '__experimentalBorder' => 'border', 'color' => 'color', + 'dimensions' => 'dimensions', 'spacing' => 'spacing', 'typography' => 'typography', ); diff --git a/packages/global-styles-engine/src/core/render.tsx b/packages/global-styles-engine/src/core/render.tsx index b4811d691cbd0a..4eefee3b143c68 100644 --- a/packages/global-styles-engine/src/core/render.tsx +++ b/packages/global-styles-engine/src/core/render.tsx @@ -155,6 +155,7 @@ const ELEMENT_CLASS_NAMES = { const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = { __experimentalBorder: 'border', color: 'color', + dimensions: 'dimensions', spacing: 'spacing', typography: 'typography', }; From 5ba8ddea5b8f6870d82480ec979c072cec8b94a9 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 5 Nov 2025 19:08:20 +0800 Subject: [PATCH 10/12] Add changelog --- backport-changelog/7.0/10470.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 backport-changelog/7.0/10470.md diff --git a/backport-changelog/7.0/10470.md b/backport-changelog/7.0/10470.md new file mode 100644 index 00000000000000..d40383d5df14df --- /dev/null +++ b/backport-changelog/7.0/10470.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/10470 + +* https://github.com/WordPress/gutenberg/pull/71905 From a6091730862b43a1a9d315b84e49a35e03a9c289 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 24 Nov 2025 20:05:56 +1000 Subject: [PATCH 11/12] Clean up unnused phpcs:ignore --- lib/block-supports/dimensions.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/block-supports/dimensions.php b/lib/block-supports/dimensions.php index 58d0535a817df4..e09c9553df5eba 100644 --- a/lib/block-supports/dimensions.php +++ b/lib/block-supports/dimensions.php @@ -43,7 +43,7 @@ function gutenberg_register_dimensions_support( $block_type ) { * * @return array Block dimensions CSS classes and inline styles. */ -function gutenberg_apply_dimensions_support( $block_type, $block_attributes ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable +function gutenberg_apply_dimensions_support( $block_type, $block_attributes ) { $attributes = array(); if ( wp_should_skip_block_supports_serialization( $block_type, 'dimensions' ) ) { From 63a31d31ea6cbaf3cc9ebc83831577e84370b966 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 24 Nov 2025 20:18:38 +1000 Subject: [PATCH 12/12] Add some unit tests for application of width 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 c664a22975188f..f2041ec94bd3bf 100644 --- a/phpunit/block-supports/dimensions-test.php +++ b/phpunit/block-supports/dimensions-test.php @@ -135,4 +135,75 @@ public function test_min_height_with_individual_skipped_serialization_block_supp $this->assertSame( $expected, $actual ); } + + public function test_width_style_is_applied() { + $this->test_block_name = 'test/width-style-is-applied'; + register_block_type( + $this->test_block_name, + array( + 'api_version' => 3, + 'attributes' => array( + 'style' => array( + 'type' => 'object', + ), + ), + 'supports' => array( + 'dimensions' => array( + 'width' => true, + ), + ), + ) + ); + $registry = WP_Block_Type_Registry::get_instance(); + $block_type = $registry->get_registered( $this->test_block_name ); + $block_attrs = array( + 'style' => array( + 'dimensions' => array( + 'width' => '300px', + ), + ), + ); + + $actual = gutenberg_apply_dimensions_support( $block_type, $block_attrs ); + $expected = array( + 'style' => 'width:300px;', + ); + + $this->assertSame( $expected, $actual ); + } + + public function test_width_with_individual_skipped_serialization_block_supports() { + $this->test_block_name = 'test/width-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( + 'width' => true, + '__experimentalSkipSerialization' => array( 'width' ), + ), + ), + ) + ); + $registry = WP_Block_Type_Registry::get_instance(); + $block_type = $registry->get_registered( $this->test_block_name ); + $block_attrs = array( + 'style' => array( + 'dimensions' => array( + 'width' => '300px', + ), + ), + ); + + $actual = gutenberg_apply_dimensions_support( $block_type, $block_attrs ); + $expected = array(); + + $this->assertSame( $expected, $actual ); + } }