Let Wordpress make images in gallery block responsive / add srcset attribute

[fabianpimminger]

Description

Wordpress makes images with a wp-image-ID class responsive using a srcset attribute. This PR adds the needed class to the images in the gallery block. See #4898 for a similar fix for the image block.

Would help for #1450 because the browser should then only download the appropriate image sizes.

Fixes: #5674
Related: #2900

How has this been tested?

Upload images, create a gallery and view on the front-end. It should have added srcset attributes.

I've also run npm test and npm run lint

Types of changes

My code adds the wp-image-ID class to the images in the gallery block. I also edited the wordpress-out.html test to reflect this change.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.

[fabianpimminger]

For reference, wp_make_content_images_responsive() adds the srcset attributes after it finds an image without srcset attribute and with a wp-image-ID class.

https://developer.wordpress.org/reference/functions/wp_make_content_images_responsive/
https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/

[youknowriad]

LGTM 👍

Thanks, this is a great improvement.

[gravnetic]

Wonderful!

[azaozz]

Nice! This is a good first step but it needs quite a bit more :) See #6177 that @mor10 linked above.

Another thing that can be done right now (before 6177) is to use the "large" image size by default (if it exists), then image.url would point to it instead of the full-size image.

Next step would be to look at the actual width of images and set sizes accordingly, i.e. in a three column gallery they should be 1/3 of the theme width, etc.