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

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.

Co-authored-by: dhananjaykuber <[email protected]>
Co-authored-by: carolinan <[email protected]>
Co-authored-by: gyurmey2 <[email protected]>
Co-authored-by: ouun <[email protected]>
Co-authored-by: JiveDig <[email protected]>
Co-authored-by: liviopv <[email protected]>

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