Image Block: Target only smaller screen sizes for image block fix

[laurelfulford]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

This PR fixes issues introduced in #1058 -- those changes were intended to fix visual issues in mobile Safari (gaps between images and their captions), but they are causing some visual issues on desktop with smaller images. Since the original issue only occurs on smaller screens, the best approach seems to be to target those smaller screen sizes win the original fix.

Closes #1065

How to test the changes in this Pull Request:

1. Set up a post with eight smaller images (less than 300px wide) -- they can all be the same image. Add a caption to every other one that is longer, so it would be wider than the image. Align two center, two to the left, and two to the right -- you should end up with an image block with and without a caption for each alignment: none, center, left and right.
2. View on desktop; note some odd alignment or spacing issues with the centered, left and right images -- the centered image caption won't be centered (and the centered image itself won't be centered if AMP is not enabled). The left and right images with captions have them stick out past the images:

Centre-aligned with AMP and caption:

Centre-aligned without AMP:

Left aligned with caption (is flush-left with AMP disabled):

Right aligned with caption (is flush-left with AMP disabled):

3. Apply the PR and run npm run build.
4. Refresh the page; note that the above images now display as expected:

Centred image with caption:

Left-aligned image with caption:

Right-aligned image with caption:

5. View on an iPhone, with AMP enabled (since it greatly increases the odds of the original issue occuring); confirm that the gap image between images and captions can't be reproduced.

Note: There will still be some minor issues with small centred images -- the captions will extend past the edges of the image. I think this is a fair trade off, as that exact issue hasn't been reported yet with the current version of the fix in place, and it will be less likely to happen (since on smaller screen sizes you'd need a dang tiny image to notice it):

One work around would be to centre the caption text in that case, but I think, since it would look out of place unless the original image was quite small -- it's best to leave it left aligned.

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully ran tests with your changes locally?

[adekbadek]

👐

[laurelfulford]

🎉

[matticbot]

🎉 This PR is included in version 1.21.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[matticbot]

🎉 This PR is included in version 1.21.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀