#56498: Add aspect ratio support to Media Text block

[dhananjaykuber]

Fixes #56498

What?

Adds aspect ratio control for images in the Media & Text block, allowing users to choose from predefined aspect ratios including Square (1:1), Standard (4:3), Portrait (3:4), Classic (3:2), Classic Portrait (2:3), Wide (16:9), and Tall (9:16).

Why?

Currently, users can only control image display by adjusting the overall media width or editing the image elsewhere. This enhancement provides direct control over image aspect ratios within the block editor, improving the user experience and layout control capabilities.

How?

• Added new aspectRatio attribute to block.json
• Implemented aspect ratio SelectControl in the block's Settings panel
• Added corresponding CSS classes and styles for each aspect ratio
• Updated block deprecation handling for backward compatibility

Testing Instructions

1. Open a post or page in the block editor
2. Insert a Media & Text block
3. Add an image to the block
4. In the block's Settings panel (sidebar), locate the "Aspect ratio" control
5. Try different aspect ratios from the dropdown and verify:
   • The image maintains the selected aspect ratio
   • The layout remains responsive
   • The aspect ratio persists after saving

Screenshots or screencast

screen-capture.2.webm

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

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @corentin-gautier, @biz2bytecoder, @lindsayweb.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

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

Unlinked contributors: corentin-gautier, biz2bytecoder, lindsayweb.

Co-authored-by: dhananjaykuber <dhananjaykuber@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: gyurmey2 <gyurmey@git.wordpress.org>
Co-authored-by: ouun <werepack@git.wordpress.org>
Co-authored-by: JiveDig <jivedig@git.wordpress.org>
Co-authored-by: liviopv <liviopv@git.wordpress.org>

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

[carolinan]

Hi
The reset needs to be implemented for the new control.

The aspect ratio option is available and the CSS is applied when "Crop image to fill" option is used, but it doesn't do anything.
I think the aspect ratio option needs to be disabled when "Crop image to fill" is enabled.
It can be visible but disabled, or hidden completely.

I believe the deprecation is correct but that new fixtures should be created and the existing fixtures regenerated.
https://github.com/WordPress/gutenberg/blob/HEAD/test/integration/fixtures/blocks/README.md

[carolinan]

Hi @dhananjaykuber Are you available to continue working on this?

[dhananjaykuber]

Hi @carolinan

[carolinan]

Thank you for the update.
Both the reset and the disabling of the control are working.
I don't feel strongly for or against the help text: I don't think there are any other conditional options that have this type of helptext.

[carolinan]

So should we merge this without a design review...?

[carolinan]

It would be good to get a second review of the deprecation.

[t-hamano]

@dhananjaykuber Thanks for working on this PR!

Just wanted to confirm, have you considered adding aspectRatio support as block support? Here's why:

• Theme developers can define custom presets via settings.dimensions.aspectRatios.
• They can opt in or out of this support via theme.json.
• Users can apply a default aspect ratio to the Media & Text block via the global styles UI.
• If we implemented aspectRatio as a custom attribute of the block, it might be difficult to migrate to aspectRatio block support in the future due to backward compatibility issues.

The aspectRatio block supports skipping serialization, so it should be possible to apply styles to elements inside the Media & Text block.

Regarding the aspectRatio block support, the discussion on #60911 may also be of help.

[fabiankaegy]

Agree with @t-hamano here. Since we have the ability to define aspect ratio presets in theme.json and have a block support for it we should avoid additional custom implementations of this in core.

[carolinan]

thank you for the reviews,I did not even know there was a block support.

[Mamaduka]

It seems that we're missing (or not easy to find) a dev note or documentation entry for adding aspectRatio support to blocks. This should streamline the contributors' process.

Punting this to WP 6.9.

[t-hamano]

I've removed this PR from the 6.8 Editor Task board. Let's track progress on this in #56498 and see what we can do in 6.9. Either way, I think we should update this PR or submit a new one based on this comment.

[t-hamano]

@dhananjaykuber, do you have the bandwidth to update this PR or submit a new PR based on this comment? Thank you!

[dhananjaykuber]

@dhananjaykuber, do you have the bandwidth to update this PR or submit a new PR based on this comment? Thank you!

Yes, On it

[dhananjaykuber]

Hi @t-hamano
Thanks for the suggestion! I did try adding aspectRatio as block support only and removing it from the block attributes. However, I noticed that in this setup, the aspect ratio control doesn’t show up for the Media & Text block in the editor.

[t-hamano]

@dhananjaykuber do you mind pushing your local changes to this PR so that we can investigate the problem?

[t-hamano]

With WordPress 6.9 Beta 1 just around the corner and we can no longer ship enhancements, so I'd like to punt this to 7.0.