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

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core, Gutenberg Plugin.
• Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[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: gyurmey2 <[email protected]>
Co-authored-by: ouun <[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.