Adds Aspect ratio control on Image blocks in Grids

[amitraj2203]

What?

Fixes: #62889

Why?

Currently, when adding an Image block within a Grid layout, the Aspect Ratio control is disabled. This can limit user's ability to set consistent visual proportions across images within the grid. Enabling the Aspect Ratio control allows users to maintain uniformity in image display.

How?

Conditionally shows Aspect ratio control on grid layouts.

Testing Instructions

1. Add a Grid block
2. Add few images with different aspect ratios to the Grid
3. Notice that the Aspect Ratio control is visible for the images

Screenshots or screencast

Screen.Recording.2024-06-27.at.2.56.58.AM.mov

[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: amitraj2203 <[email protected]>
Co-authored-by: tellthemachines <[email protected]>
Co-authored-by: ndiego <[email protected]>

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

[tellthemachines]

Thanks for taking this on @amitraj2203!

I think ideally we'd find a solution that doesn't involve DimensionsTool having to know about layout. Perhaps instead of passing it parentLayoutType directly, we can introduce an array type prop with a list of tools to render. It could default to all tools, e.g. [ 'aspectRatio', 'widthHeight', 'scale'], but if we pass it ['aspectRatio'] it only renders the aspect ratio tool. Then we can leave deciding which tools to render based on parent layout type to the image block.

[amitraj2203]

@tellthemachines Updated it as per your suggestion.

[tellthemachines]

Thanks for iterating on this! The code is looking good now, there's only one small issue remaining. Currently, setting aspect ratio on images in a Grid block results in the images becoming distorted:

This is due to the object-fit property not being set. In Image blocks outside Grid, cover is being used as a default value for the scale attribute, which translates to the object-fit CSS property. Inside a grid, because we're not exposing the scale tool, I think the best solution is to set the attribute directly in aspectRatioControl, like so:

setAttributes( {
	aspectRatio: newAspectRatio,
	scale: 'cover',
} );

Apologies for not spotting this in my earlier review!

[tellthemachines]

Oh, I just noticed something else in testing: the resizable box handles on the Image block are now appearing beneath the grid resizers:

We'll need to disable them, but I'm not 100% sure how. Looking into it now.

Update: changing the condition on this line to ! isResizable || parentLayoutType === 'grid' should stop the resizable box from rendering.

[amitraj2203]

Thanks for reviewing it thoroughly. I have addressed the changes.

[tellthemachines]

Thanks for the update @amitraj2203! This is working well for me now.