Add getDimensionsClassesAndStyles function and related tests

[Swoyamjeetcodes]

What?

Closes #74518

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

1. Run the block-editor unit tests:

   npm run test:unit packages/block-editor

[github-actions]

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]

👋 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.

• #75553
• #74242

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]

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,
	};
}

[Swoyamjeetcodes]

If you want I can modify as per that.

[t-hamano]

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.

[Swoyamjeetcodes]

sure, commiting soon.

[Swoyamjeetcodes]

Sure :D @t-hamano

[t-hamano]

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.

[aaronrobertshaw]

@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]

Thanks for the quick approvals and merging this one! 🙇

[Swoyamjeetcodes]

@aaronrobertshaw Absolutely no issues ! Thanks for the help.