Fix image sizes and srcset for intermediate images

[mikeyarce]

Description

This PR uses a new filter available in WP 5.7 to properly pass image dimensions for the image srcset and sizes. This needs to be tested and merged in coordination with the WP 5.7 release (March 9 is the current tentative release date).

New filter added in WP 5.7: https://core.trac.wordpress.org/browser/trunk/src/wp-includes/media.php?rev=50136#L1643

How the fix works:

• First we hook into wp_img_tag_add_width_and_height_attr which is early enough that our image source still has the query arguments available so we know what the image size is intended to be
• We save that image size data and then pass it into wp_image_src_get_dimensions where we set image dimensions
• If the image is a full size image, we set the default dimensions
• If the image is not full size, we calculate the image size based on the given width and the calculated aspect ratio.

Changelog Description

Bug Fix: Fixed an issue where images were not properly sized when using the Block Editor and intermediate image sizes.

Previously, all images added through the Block Editor that were assigned intermediate image sizes ( e.g. Thumbnail ) would appear as full size images.

Checklist

Please make sure the items below have been covered before requesting a review:

• [x] This change works and has been tested locally (or has an appropriate fallback).
• [x] This change works and has been tested on a Go sandbox.
• [ ] This change has relevant unit tests (if applicable).
• [ ] This change has relevant documentation additions / updates (if applicable).
• [x] I've created a changelog description that aligns with the provided examples.

Steps to Test

1. Patch your wp-includes/media.php file to include the changes to wp_image_src_get_dimensions found here: https://core.trac.wordpress.org/browser/trunk/src/wp-includes/media.php?rev=50136#L1601
2. Apply this code to your sandbox
3. Make sure your test site has Gutenberg Enabled
4. Create a new Post
5. Select the Image Block, add an image
6. From the Block Properties, select an intermediate image size like Thumbnail
7. Add more image blocks for Full Size, Medium, Large, etc..
8. Verify that the srcset and sizes attributes output are correct.

Before the change:

After the change:

[GaryJones]

Will those who are still on WP versions before 5.7, continue to see the same full size image for each named image size (i.e. the Before)?

[mikeyarce]

Thanks for your review @GaryJones! I've addressed the issues and separated out the dimension logic into another function.

Will those who are still on WP versions before 5.7, continue to see the same full size image for each named image size (i.e. the Before)?

I tested this and for versions before 5.7, site's will continue to see the same before full size image for each named image.

[rinatkhaziev]

We're investigating other avenues, in the meantime, we'll keep it open but with the appropriate status.

[mchanDev]

Hi @rinatkhaziev

Is there a work around for this atm?

There is an open ticket here #128167-z that I would like to reply to

[DustinHartzler]

Hi @rinatkhaziev

Just leaving a note that this issue came up in #145657-z.

[github-actions[bot]]

This pull request has been marked stale because it has been open for 60 days with no activity. If there is no activity within 7 days, it will be closed.

This is an automation to keep pull requests manageable and actionable and is not a comment on the quality of this pull request nor on the work done so far. Closed PRs are still valuable to the project and their branches are preserved.