Post Featured Image dimension settings not displaying properly on smaller screens

[Thelmachido]

Description

If you set dimension settings for the featured images within the Query Loop the featured images are not reduced to scale on smaller screens. For example, I set the featured image size to 520px in Height and 370px in width.

I expected the content within the block to be displayed properly and for images to be reduced in scale when the screen size is smaller.

This was reported in forums: https://wordpress.org/support/topic/query-loop-images-overlap-when-reszing-window/

Step-by-step reproduction instructions

1. Add the Query Loop block to a page
2. Add the post-featured image block
3. Change the dimension settings for the featured image to 520px by 370px
4. Check the page on a smaller screen e.g 768px by 1024px

You will see that the content inside the query loop will extend to the right and the images will be overlapping.

Screenshots, screen recording, code snippet

Environment info

• Gutenberg version 15.3.1
• WP 6.1.1
• TT3 theme

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

[ndiego]

I am able to replicate this issue in WP 6.1.1 and 6.2 RC1 with and without Gutenberg enabled. I appears there is a missing max-width: 100%; somewhere. I will look into a solution this week.

[ndiego]

This appears to be a larger issue due to the way width and height are applied to the Featured Image block. A similar issue was discovered in #49561 (comment) and also in #48892.

From what I am seeing, there are a couple of things going on here. First, the placeholder in the Editor does not render properly when custom dimensions are applied.

The placeholder does not match what actually appears on the frontend. In the screenshot below, the image is not 1000px, but is rendering correctly since the block is constrained to "Content" width.

Next, the Featured Image block is no longer responsive on smaller screens. Notice how it is overflowing the container in the screenshot below. This is because the block has a width of 1000px and a max-width equal to the defined "Content" size, which is larger than the screen size.

While I don't believe there is an actual bug here since this is just how CSS works (other than the placeholder not resembling the frontend), this implementation of height and width settings is quite unintuitive and, in many situations, unusable.

[annezazu]

Adding this to the 6.2.1 board in particular to resolve the placeholder issue as that is important to address. In talking with @richtabor, it became clear that the root problem is around the experience of using height/width controls, including the direction of aspect ratio which is being shaped here: #47963 (comment) Noting for future reference!

[ntsekouras]

I opened a draft PR here. Some of this sizing issues were introduced here for aspect ratio. There are many conditions about when to add what style, so maybe @ajlende has more insights about the fixes.

[ntsekouras]

It seems there are some nuances that need more thought on how to handle them(see #49641 (comment)) and I've create a PR to revert the maxSize previous attempt. So I'm reopening this one.

[Thelmachido]

This was also reported recently on the following forum issue:

https://wordpress.org/support/topic/featured-image-in-a-post-not-responsive-doesnt-resize-on-mobile/

[jordesign]

This is still replicable in WP6.4 beta 4.

@annezazu this dropped off 6.2 due to prioritisation - but just wanted to see if it has importance for 6.4?

[annezazu]

I'm afraid it's too late for 6.4. I'll add to the 6.5 part of the board for consideration and the polish board for now. Thanks for the ping!