Default Image CSS overwriting Image Sizing

[bbertucc]

Description

When I add image sizing in the block editor, the sizing is overwritten by .wp-block-image img and html :where(img[class*=wp-image-]) CSS, which sets height: auto;.

Step-by-step reproduction instructions

Using 2023 theme and Gutenberg plugin, add a manual image size (ie-"59px") to an image. Publish the post and, when previewing the page, the image will not be resized.

Screenshots, screen recording, code snippet

When inspecting the image, this is what's seen

Environment info

• WP 6.1.1
• Gutenberg 15.1.1
• Twenty-Twenty Three 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

[kathrynwp]

Hi @bbertucc - thanks for the report and the testing steps.

So far I have not been able to replicate the issue: on my end, the image block is resized as expected both in preview and after publication.

Tested with

WP 6.1.1
Gutenberg 15.2.4 active or inactive
No other plugins active
Twenty Twenty-Three 1.3

Screencast

tt3-image-block.mov

@bbertucc Could you please let me know the following:

• Are you still able to replicate with Gutenberg either inactive, or updated to version 15.2.4?
• When you say "add a manual image size" are you resizing the image in the same way I am in the screencast, namely by adding a value in the "Width" block in the Image block settings in the right-hand panel?

Thanks!

[kathrynwp]

@bbertucc - Related to this issue:

#48295

Could you please let me know if your issue only occurs when the Image block is within a Row block (or another block), or does it also occur when the Image block is not nested within another block?

[bbertucc]

Hey @kathrynwp - The problem only occurs inside a column block. Also note: the problem only shows up on the published version, not when editing.

[kathrynwp]

The problem only occurs inside a column block

@bbertucc - thanks so much for confirming so quickly.

I still haven't been able to replicate this in WP 6.1.1 with Gutenberg 15.2.4 either active or inactive, as you can see in this screencast where I resize images within a Columns block:

column-image.mov

Could you please test again under the following conditions and let me know how it goes:

• Update Gutenberg to 15.2.4 - do you still see the issue?
• Deactivate Gutenberg - do you still see the issue?
• Deactivate all your plugins temporarily - do you still see the issue? You can use the Health Check plugin's troubleshooting mode for this, which will not change your live site. If the problem goes away, reactivate your plugins one by one (while still in troubleshooting mode) to find the culprit.

Could you please also provide a screencast so I can see exactly in what way you're resizing the images? Thanks!

[shreyasikhar]

Hello @kathrynwp and @bbertucc,

I am able to reproduce this issue. Please check the below screencast.

image-height-bug.mov

The issue is because the CSS height: 300px on <img> gets overridden with height: auto due to higher specificity.

[kathrynwp]

Thanks, @shreyasikhar - that's the clue I needed.

I was able to replicate the issue when changing the height value on the image block. When changing the width value alone, the bug is not present.

[kathrynwp]

Was also able to replicate in Twenty Seventeen, so the bug is not limited to classic themes.

Can also replicate with WP 6.2-RC1-55510, no plugins active.

[ironprogrammer]

I can also reproduce this issue in WordPress 6.1.1 and 6.2-RC1 with no other plugins active.

[talldan]

I could reproduce this one back as far as WordPress 5.9, so it seems like it has been a problem for a long time.

I think this PR might be the first to introduce an issue - CSS: Add a reset for image heights. It added the height: auto style.

But it seems like these two PRs also added additional height: auto styles:

• Images: Try moving responsive rule to common.scss. #38399
• Image: Restore baseline responsiveness in the block. #39340

In general I think the image block's interface could do with some work, because you can set a single dimension that should cause an image to lose its aspect ratio, but visually the image always keeps its aspect ratio until you actually modify both dimensions. It may be better to have a specific option for aspect ratio locking, which by default is enabled (so changing the height also changes the width).

[annezazu]

Since this seems to be a longer standing issue and not directly related to problems in the 6.2 cycle, moving to 6.2.1 for consideration there. Big thanks to everyone for testing and reporting up!

[merijnponzo]

In the gutenberg editor it works because the image height is set on the parent element

<div style="position: relative; user-select: auto; width: auto; height: 600px; max-width: 1450px; max-height: 967.139px; min-width: 29.9854px; min-height: 20px; box-sizing: border-box; flex-shrink: 0;" class="components-resizable-box__container has-show-handle"><img ....

But in the frontend the height is set on the image itself

<img  ....  height="600px">

So only when i uncheck the heights, the height from my core/image input is respected:

Since the minHeight dimension is currently not supported for images there is no way the get fixed image height unless i would crop my image the another ratio?

Or i have to wrap my image within a group with a minheight