Image Block: Keep selected size on changing image

[gaambo]

Description

When changing the image in an image block, the sizeSlug attribute is reset to the default image size or to "full":

gutenberg/packages/block-library/src/image/edit.js

Lines 211 to 222 in dfd422a

	// Reset the dimension attributes if changing to a different image.
	if ( ! media.id || media.id !== id ) {
	additionalAttributes = {
	width: undefined,
	height: undefined,
	// Fallback to size "full" if there's no default image size.
	// It means the image is smaller, and the block will use a full-size URL.
	sizeSlug: hasDefaultSize( media, imageDefaultSize )
	? imageDefaultSize
	: 'full',
	};
	} else {

I think if an image size was already selected before (any other than the default), this should be used again even when changing images.
This is important if the size of the image is important to the layout.
Example: We're using an image block in a pattern for a hero - we've got a custom image size registered for that. I can select the size, but as soon as I click "replace" on the image block, the size gets reset. I have to tell users/editors to change the size again. The width (100%) of the <img> element is set via CSS, but of course the image looks bad when inseretd in a smaller image size.

I also don't want to change the default image size, since this is only for one pattern and the required/recommended image size may be different for each pattern.

Step-by-step reproduction instructions

1. Insert an image block in the editor

2. pick an image

3. select any other size than the default size

4. click "replace" and choos another image

5. the size is reset

6. Create a pattern which includes an image block with a predefined size

7. insert the pattern

8. set/replace the image with any other image

9. the size is reset

Proposed Solution

Change the code linked above to keep the sizeSlug attribute if one was set before and if the new media is available in this size.

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress 5.9, Gutenberg 11.9, custom theme but also TwentyTwentyTwo
• Firefox, Chrome, Safari

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[github-actions]

Hi,
This issue has gone 180 days without any activity. This means it is time for a check-in to make sure it is still relevant. If you are still experiencing this issue with the latest versions, you can help the project by responding to confirm the problem and by providing any updated reproduction steps.
Thanks for helping out.

[gaambo]

The issue still exists on trunk. I added a PR to fix the issue.

[Thelmachido]

Thanks @gaambo I will remove the needs testing label

[matthisamoto]

Is there any plan to add this to a milestone? This makes it difficult to maintain consistency in block patterns that rely on a specific image size to be set and selecting the image clears it out.

[gaambo]

I think this issues is a real pain when building patterns or templates for clients. We keep telling the client to always update the image size after changing the image, but since the image size is set in the pattern and we generate the image size for all images, this could easily be done programmatically as is seen in my very small PR.
Unfortunately I messed up trying to update my previous PR to rebase on trunk. Therefore I opened a new PR here. It also includes better & easier testing instructions.

[gaambo]

Just tested with current trunk after #51545 is merged. I thought it may be already fixed, because that PR keeps the aspect ratio when changing images. But the image size is not kept. I can updated my PR after the changes of #51545 but would like to have any feedback if this has a chance to be merged before doing any work.