Add getDimensionsClassesAndStyles function and related tests by Swoyamjeetcodes · Pull Request #74524 · WordPress/gutenberg

Swoyamjeetcodes · 2026-01-11T16:18:02Z

What?

This PR introduces a new experimental helper for Dimensions block support serialization:
__experimentalGetDimensionsClassesAndStyles.

The helper returns { className, style } for dimensions-related block supports when their serialization is intentionally skipped.

Why?

Gutenberg currently provides helper utilities for several block supports (color, spacing, border, shadow, typography) to generate CSS classes and inline styles when serialization is skipped. However, there was no equivalent helper for Dimensions block support (e.g. width, height, min-height, aspect ratio).

As a result, block authors had to reimplement internal logic to correctly apply dimensions styles to inner elements, leading to duplication and inconsistencies across blocks.

This PR fills that gap by providing a dedicated helper that aligns Dimensions with the rest of the Block API.

How?

Added a new helper function getDimensionsClassesAndStyles that derives dimensions-related class names and inline styles from style.dimensions.
Exposed the helper as __experimentalGetDimensionsClassesAndStyles via @wordpress/block-editor.
Implemented conflict resolution logic between aspectRatio and height-related properties to mirror existing internal behavior.
Added unit tests covering aspect ratio, width, height, minHeight, and conflict resolution scenarios.

Testing Instructions

Run the block-editor unit tests:
```
npm run test:unit packages/block-editor
```

github-actions · 2026-01-11T16:18:11Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Swoyamjeetcodes <swoyamjeetcodes@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: mrleemon <leemon@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

github-actions · 2026-01-11T16:18:38Z

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @Swoyamjeetcodes! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

t-hamano

Sorry for the late review of this PR 🙇‍♂️ We were just about to add the same function in other PRs.

If you have the bandwidth, I’d appreciate it if we could move this PR forward. However, with the release of WordPress 7.0 Beta 1 fast approaching, we can move forward with the other two PRs instead of this one and still get your name in the credits 👍 The unit tests in this PR are definitely useful.

cc @aaronrobertshaw @Mamaduka

t-hamano · 2026-02-16T02:32:33Z

+	// Apply rules to unset incompatible styles.
+	// 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 height properties. The Cover block
+	// and dimensions controls have logic that will manually clear the aspect ratio if height properties
+	// are set.
+	if ( dimensions?.aspectRatio ) {
+		// To ensure the aspect ratio does not get overridden by `minHeight` or `height` unset any existing rule.
+		inlineStyleOverrides.minHeight = 'unset';
+		inlineStyleOverrides.height = 'unset';
+	} else if ( dimensions?.minHeight || dimensions?.height ) {
+		// To ensure height properties do not get overridden by `aspectRatio` unset any existing rule.
+		inlineStyleOverrides.aspectRatio = 'unset';
+	}


While I understand the intent of this code, I personally think it's better to avoid style overriding. For example, even if a block doesn't support height or minHeight, if aspectRatio has some value, an inline style like min-height;unset;height:unset will be generated.

It might be better to generate styles and class names purely based on attributes. Like this:

export function getDimensionsClassesAndStyles( attributes ) { const { style } = attributes; // Collect inline styles for dimensions. const dimensionsStyles = style?.dimensions || {}; const styleProp = getInlineStyles( { dimensions: dimensionsStyles } ); return { style: styleProp, }; }

If you want I can modify as per that.

Yes, for now let's update the code to the suggested one to simplify the logic, and maybe remove some unit tests that we no longer need.

sure, commiting soon.

Swoyamjeetcodes · 2026-02-16T02:41:45Z

Sure :D @t-hamano

t-hamano · 2026-02-16T02:47:03Z

 	getBorderClassesAndStyles as __experimentalGetBorderClassesAndStyles,
 	useBorderProps as __experimentalUseBorderProps,
 	getColorClassesAndStyles as __experimentalGetColorClassesAndStyles,
+	getDimensionsClassesAndStyles as __experimentalGetDimensionsClassesAndStyles,


Suggested change

getDimensionsClassesAndStyles as __experimentalGetDimensionsClassesAndStyles,

getDimensionsClassesAndStyles,

It's better to avoid the __experimental prefix. See the discussion here: #75553 (comment)

aaronrobertshaw

Thanks for working on this @Swoyamjeetcodes 👍

This is a useful addition. There are already a handful of PRs looking to introduce the same utility, so it'll be great to get this landed.

I agree with @t-hamano's suggestion to lean on getInlineStyles() and the style engine here.

Not only does it remove duplication of logic and a bug this PR would introduce, it also aligns this utility with how the other block support helpers work. They're all thin wrappers around the style engine.

On that note, I'd also suggest renaming the file to use-dimensions-props.js to match the convention established by the other supports (use-border-props.js, use-color-props.js, use-spacing-props.js, etc.). This keeps the naming consistent and makes it straightforward to add a custom hook in the near future as dimensions block supports do support presets, so we may need this soon.

Since this utility is essentially a thin wrapper, I think the tests only need to cover the basic input/output mapping (attributes in, className + style out). The conflict-resolution logic around aspect ratio vs height/minHeight lives in the style engine and the useBlockProps hook in dimensions.js so tests for that behaviour are better suited there rather than in this utility's test suite.

… __experimental prefix

aaronrobertshaw · 2026-02-16T12:09:49Z

@Swoyamjeetcodes, I hope you don't mind. I took the liberty of pushing some changes to help move this forward given the limited time until 7.0 Beta 1 and to unblock the other PRs that need this utility (#75553, #74242).

The changes align with what @t-hamano suggested:

Simplified the implementation to delegate to getInlineStyles() from the style engine, matching the pattern used by the other block support utilities
Renamed the file to use-dimensions-props.js to follow the existing convention
Dropped the __experimental prefix on the public export and updated docs as required
Simplified the tests to cover the basic input/output mapping

@t-hamano if you get the chance, can you sanity check the combined changes @Swoyamjeetcodes and I have made? 🙏

aaronrobertshaw · 2026-02-16T14:56:26Z

Thanks for the quick approvals and merging this one! 🙇

Swoyamjeetcodes · 2026-02-16T15:16:05Z

@aaronrobertshaw Absolutely no issues ! Thanks for the help.

Swoyamjeetcodes requested review from ellatrix and tellthemachines as code owners January 11, 2026 16:18

github-actions Bot added the [Package] Block editor /packages/block-editor label Jan 11, 2026

github-actions Bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Jan 11, 2026

Swoyamjeetcodes mentioned this pull request Jan 11, 2026

Missing helper for Dimensions block support serialization (getDimensionsClassesAndStyles) #74518

Closed

t-hamano added [Type] Enhancement A suggestion for improvement. [Feature] Block API API that allows to express the block paradigm. labels Jan 12, 2026

Add getDimensionsClassesAndStyles function and related tests

bcb1c8d

Swoyamjeetcodes force-pushed the try/get-dimensions-classes-and-styles branch from 65f3f49 to bcb1c8d Compare January 12, 2026 16:59

Mamaduka mentioned this pull request Feb 15, 2026

Icon block: Skip serialization and increase default size #75553

Merged

t-hamano reviewed Feb 16, 2026

View reviewed changes

aaronrobertshaw reviewed Feb 16, 2026

View reviewed changes

Simplify to use style engine, rename to use-dimensions-props.js, drop…

8f9caba

… __experimental prefix

Mamaduka approved these changes Feb 16, 2026

View reviewed changes

t-hamano approved these changes Feb 16, 2026

View reviewed changes

t-hamano merged commit 65e3bc8 into WordPress:trunk Feb 16, 2026

github-actions Bot added this to the Gutenberg 22.6 milestone Feb 16, 2026

Navigation Menu

Uh oh!

Add getDimensionsClassesAndStyles function and related tests - #74524

Add getDimensionsClassesAndStyles function and related tests#74524
t-hamano merged 2 commits into
WordPress:trunkfrom
Swoyamjeetcodes:try/get-dimensions-classes-and-styles

Swoyamjeetcodes commented Jan 11, 2026

Uh oh!

github-actions Bot commented Jan 11, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jan 11, 2026

Uh oh!

t-hamano left a comment

Uh oh!

t-hamano Feb 16, 2026

Uh oh!

Swoyamjeetcodes Feb 16, 2026

Uh oh!

t-hamano Feb 16, 2026

Uh oh!

Swoyamjeetcodes Feb 16, 2026

Uh oh!

Swoyamjeetcodes commented Feb 16, 2026

Uh oh!

t-hamano Feb 16, 2026

Uh oh!

aaronrobertshaw left a comment

Uh oh!

aaronrobertshaw commented Feb 16, 2026

Uh oh!

aaronrobertshaw commented Feb 16, 2026

Uh oh!

Swoyamjeetcodes commented Feb 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	getDimensionsClassesAndStyles as __experimentalGetDimensionsClassesAndStyles,
	getDimensionsClassesAndStyles,

Uh oh!

Conversation

Swoyamjeetcodes commented Jan 11, 2026

What?

Why?

How?

Testing Instructions

Uh oh!

github-actions Bot commented Jan 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jan 11, 2026

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

t-hamano Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Swoyamjeetcodes Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

t-hamano Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Swoyamjeetcodes Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Swoyamjeetcodes commented Feb 16, 2026

Uh oh!

t-hamano Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

aaronrobertshaw left a comment

Choose a reason for hiding this comment

Uh oh!

aaronrobertshaw commented Feb 16, 2026

Uh oh!

aaronrobertshaw commented Feb 16, 2026

Uh oh!

Swoyamjeetcodes commented Feb 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

github-actions Bot commented Jan 11, 2026 •

edited

Loading