Fix: Refactor Featured Image Block to use aspectRatio block support

[hbhalodia]

What?

Resolves #61432

Why?

• To improve the code quality, we have removed the aspectRatio from attributes and used the Block Supports for the core/post-featured-image, because the attributes were redundant.

How?

• Have removed the aspectRatio from the attributes.
• Have added the block supports, dimensions[aspectRatio] in block.json.
• Used that value to update the block in editor and frontend as well.

Testing Instructions

1. Open a post/page.
2. Added the core/post-featured-image block.
3. Check the aspect ratio dropdown. It is now using the block supports, instead of native attributes.

Testing Instructions for Keyboard

• NIL

Screenshots or screencast

• NIL, code quality improvement.

[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: @eric-michel.

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: eric-michel.

Co-authored-by: hbhalodia <hbhalodia@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>

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

[Mamaduka]

I've not properly tested this, but I think the Featured Image won't retain the aspect ratio after the update.

1. Set the aspect ratio for a featured image on the trunk. Save the post.
2. Switch to this branch.
3. See if the aspect ratio is still set.

[hbhalodia]

I've not properly tested this, but I think the Featured Image won't retain the aspect ratio after the update.

1. Set the aspect ratio for a featured image on the trunk. Save the post.
2. Switch to this branch.
3. See if the aspect ratio is still set.

Hi @Mamaduka, I tried the above steps and yes, the aspectRatio which is set is no more used. We need to make sure it is backward compatible, if aspectRatio is set, it should respect that, and if changed then we can use new one.

Let me know if you have some idea how can we proceed with that? I tried some findings but did not succeed. Maybe we should retain the attribute and check if that is set, use that, and once change it from block support make it undefined. I am not sure what could be the better approach.

Thank You.

[hbhalodia]

const aspectRatio = attributes?.style?.dimensions?.aspectRatio;

Above line can be changed to something like,

const blockSupportAspectRatio = attributes?.style?.dimensions?.aspectRatio || aspectRatio;

Here we should not remove the attribute from the block itself, we just keep it to get the value which was stored previously?

But it would have issue like, blockSupport aspectRatio dropdown would not show the selected aspectRatio from the atttribute.

[eric-michel]

@hbhalodia can you confirm if this implementation of aspect-ratio will create an inline style even when an aspect-ratio is not selected? This happened with the Cover block and broke a lot of our sites. If this were to happen with the Group block, it would be catastrophic for us.