#39457: Image block keep image size on replacing image

[gaambo]

What?

This PR fixes #39457 to keep the selected size in an image block when replacing/changing the image.
This is a follow up PR to #44522 where I couldn't get the PR correctly to rebase on trunk.

Why?

Useful for patterns where a certain image size is required for it to look good. A pattern can declare the sizeSlug attribute and it will try to insert the new image in the size again.

How?

Previously on selecting a new image there was a check if the new image is available in the default image size, if yes it used that and if not it falled back to "full". Now it checks for a previously selected sizeSlug attribute and checks if the image is available in that size, if not it does the same checks as before (default size, full). So the order is:

1. previously selected image size (from block attribute)
2. default image size
3. "full" image size

Testing Instructions

Test with images that have the selected size

1. Insert an image block in the editor (eg with an image from Openverse:

<!-- wp:image {"id":12} -->
<figure class="wp-block-image"><img src="http://localhost:8888/wp-content/uploads/2023/04/image-2.jpeg" alt="" class="wp-image-12"/><figcaption class="wp-element-caption">"<a href="https://www.flickr.com/photos/61021753@N02/8597955458" target="_blank" rel="noreferrer noopener">n319_w1150</a>" by <a href="https://www.flickr.com/photos/61021753@N02" target="_blank" rel="noreferrer noopener">BioDivLibrary</a>/ <a href="https://creativecommons.org/publicdomain/mark/1.0//?ref=openverse" target="_blank" rel="noreferrer noopener">pdm 1.0</a></figcaption></figure>
<!-- /wp:image -->

2. Set the images size to "Medium".

<!-- wp:image {"id":12,"sizeSlug":"medium"} -->
<figure class="wp-block-image size-medium"><img src="http://localhost:8888/wp-content/uploads/2023/04/image-2-201x300.jpeg" alt="" class="wp-image-12"/><figcaption class="wp-element-caption">"<a href="https://www.flickr.com/photos/61021753@N02/8597955458" target="_blank" rel="noreferrer noopener">n319_w1150</a>" by <a href="https://www.flickr.com/photos/61021753@N02" target="_blank" rel="noreferrer noopener">BioDivLibrary</a>/ <a href="https://creativecommons.org/publicdomain/mark/1.0//?ref=openverse" target="_blank" rel="noreferrer noopener">pdm 1.0</a></figcaption></figure>
<!-- /wp:image -->

3. Replace the blocks image with any other local/uploaded image with a similar size
4. The image block should have kept the size set to "Medium" and should be output with medium size.

Test with images that don't have the selected size (eg are smaller):

1. Insert an image block in the editor (eg with an image from Openverse:

<!-- wp:image {"id":12} -->
<figure class="wp-block-image"><img src="http://localhost:8888/wp-content/uploads/2023/04/image-2.jpeg" alt="" class="wp-image-12"/><figcaption class="wp-element-caption">"<a href="https://www.flickr.com/photos/61021753@N02/8597955458" target="_blank" rel="noreferrer noopener">n319_w1150</a>" by <a href="https://www.flickr.com/photos/61021753@N02" target="_blank" rel="noreferrer noopener">BioDivLibrary</a>/ <a href="https://creativecommons.org/publicdomain/mark/1.0//?ref=openverse" target="_blank" rel="noreferrer noopener">pdm 1.0</a></figcaption></figure>
<!-- /wp:image -->

2. Set the images size to "Medium".

<!-- wp:image {"id":12,"sizeSlug":"medium"} -->
<figure class="wp-block-image size-medium"><img src="http://localhost:8888/wp-content/uploads/2023/04/image-2-201x300.jpeg" alt="" class="wp-image-12"/><figcaption class="wp-element-caption">"<a href="https://www.flickr.com/photos/61021753@N02/8597955458" target="_blank" rel="noreferrer noopener">n319_w1150</a>" by <a href="https://www.flickr.com/photos/61021753@N02" target="_blank" rel="noreferrer noopener">BioDivLibrary</a>/ <a href="https://creativecommons.org/publicdomain/mark/1.0//?ref=openverse" target="_blank" rel="noreferrer noopener">pdm 1.0</a></figcaption></figure>
<!-- /wp:image -->

3. Replace the blocks image with any other local/uploaded image with a smaller size
4. The image block should now have it's size set to the default image size or full.

Testing Instructions for Keyboard

Screenshots or screencast

[gaambo]

I'd be happy to add tests for this case to avoid regressions. But i'm not sure how to handle image files in tests? I see the cover blocks tests use a dummy url ("http://localhost/my-image.jpg"), but for in this case I'd need a real attachment which has a the sizes correctly calculated so it tests if the sizes are available. If anyone can give me guidance here I'd be thankful :)

[ajlende]

✔️ Images with the selected size use that size
✔️ Images without the selected size use the default size
✔️ Images without the default size use 'full'

👍 Looks good to me. Thanks for the PR!