Image: hardcoded `vertical alignment: bottom` makes it impossible to correctly align images #69255

hanneslsm · 2025-02-19T19:32:30Z

Description

In #35466 was the vertical-align: bottom; to all images introduced.
The issue with this though is that when for example creating a header with a logo (image block) it's impossible to correctly align the logo in the middle aka with the rest of the block.

What it should be:

What it is:

It was only possible to create the "should be" example by adding the following code to my theme:

.wp-block-image img{
 vertical-align: middle;
}

The vertical align of the image should take into consideration what the alignment settings of the enclosing row are.

Step-by-step reproduction instructions

Create a group / row
add an image that not as heigh as the text. For example you can use the logo example from here: Site Logo: Remove (max-)height attributes #69253
add text
try to center align the image (which is not possible)

Screenshots, screen recording, code snippet

Example Block Markup

<!-- wp:group {"className":"is-style-section-base-2","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group is-style-section-base-2" style="padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)"><!-- wp:group {"align":"wide","className":"is-style-section-base","style":{"spacing":{"padding":{"bottom":"var:preset|spacing|30","top":"var:preset|spacing|30","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}},"border":{"radius":"8px","width":"1px"}},"borderColor":"base-4","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group alignwide is-style-section-base has-border-color has-base-4-border-color" style="border-width:1px;border-radius:8px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><!-- wp:image {"lightbox":{"enabled":false},"id":416,"width":"200px","sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":"0px"},"spacing":{"margin":{"top":"0","bottom":"0","left":"0","right":"0"}}}} -->
<figure class="wp-block-image size-full is-resized has-custom-border" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0"><img src="http://localhost:8881/wp-content/uploads/2025/02/logo.png" alt="" class="wp-image-416" style="border-radius:0px;width:200px"/></figure>
<!-- /wp:image -->

<!-- wp:navigation {"ref":4,"style":{"spacing":{"margin":{"top":"0"}}},"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"}} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -→

Environment info

WP 6.7.2
GB 20.3

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

Please confirm which theme type you used for testing.

Block
Classic
Hybrid (e.g. classic with theme.json)
Not sure

The text was updated successfully, but these errors were encountered:

aialvi · 2025-02-20T07:23:05Z

Hi @hanneslsm. I can take a look and try to reproduce the issue from my end.

coder-rancho · 2025-02-20T17:02:19Z

#35466 overriden the changes introduced by #35273 with an argument that if we set line-height: 0 then the caption will look congested. I reverted back to the previous changes as line height for captions are already taken care of.

t-hamano · 2025-02-21T05:05:45Z

line height for captions are already taken care of.

Where did you get this? As far as I've tested #69267, line-height:0 applies to captions too:

trunk	PR #69267

There are three things to consider here:

If line-height is applied to the site, the caption should inherit it:

Example theme.json

{
	"$schema": "../../schemas/json/theme.json",
	"version": 3,
	"styles": {
		"typography": {
			"lineHeight": "1.5"
		}
	}
}

If the line-height for the caption is defined, it should be applied:

Example theme.json

{
	"$schema": "../../schemas/json/theme.json",
	"version": 3,
	"styles": {
		"typography": {
			"lineHeight": "1.5"
		},
		"elements": {
			"caption": {
				"typography": {
					"lineHeight": "2"
				}
			}
		}
	}
}

It's possible that the Image block itself has a line-height applied to it. In this case, that value should be applied to the caption.

Example theme.json

{
	"$schema": "../../schemas/json/theme.json",
	"version": 3,
	"styles": {
		"typography": {
			"lineHeight": "1.5"
		},
		"blocks": {
			"core/image": {
				"typography": {
					"lineHeight": "2"
				}
			}
		}
	}
}

We need to find a way how to position images correctly while still respecting these scenarios.

coder-rancho · 2025-02-21T05:40:06Z

You can see the below screenshot. line-height for caption is already taken care of

t-hamano · 2025-02-21T05:50:58Z

@coder-rancho What theme are you checking? Some themes may apply line-height to captions, others may not.

coder-rancho · 2025-02-21T06:00:11Z

You're right, I was using twenty-twenty-five theme. When I switched to empty theme, the line-height is removed.

coder-rancho · 2025-02-21T06:52:21Z

I've two fixes for this problem:

Only apply line-height: 0 if there is no caption:

.wp-block-image {
  &:not(:has(figcaption)) {
    line-height: 0;
  }
}

Limitation: It'll not be supported by older browsers.

Apply line-height to the caption:

.wp-block-image {
  line-height: 0;

  figcaption {
    line-height: normal;
  }
}

Limitation: It might override styles in theme.

What do you suggest? I'll update #69267 with the suggested changes.

stokesman · 2025-02-22T16:56:08Z

I suggest a different approach: styling the img with display: block (and removing vertical-align). That was considered in #35466 (comment) and discarded with a thought it could be problematic. It appears it wasn’t tested. I don’t think it would be problematic. The img is already wrapped in a figure which is block (by base UA styles). It’s only sibling is potentially a figcaption and that too is block. That means img won’t be inline with siblings or ancestors and thus no reason to leave its display unspecified (inline).

t-hamano · 2025-02-23T07:03:48Z

styling the img with display: block (and removing vertical-align)

I also thought this was the best approach, but I discovered there was one problem. That is, when an image is linked. In this case, the a element has display:inline-block.

trunk	Apply `display:block` to the `img` element and delete `vertical-align: bottom`

Perhaps we also need the following styles?

/ * Selector for block theme */
.wp-block-image > a,
/* Selector for classic theme */
.wp-block-image > figure > a {
    vertical-align: top;
}

Another approach I've considered is to use the browser's default line-height for captions:

diff

diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss
index 117045f7dc..469ca7e5be 100644
--- a/packages/block-library/src/image/style.scss
+++ b/packages/block-library/src/image/style.scss
@@ -1,4 +1,5 @@
 .wp-block-image {
+       line-height: 0;
 
        > a,
        > figure > a {
@@ -8,7 +9,6 @@
        img {
                height: auto;
                max-width: 100%;
-               vertical-align: bottom;
                box-sizing: border-box;
 
                @media not (prefers-reduced-motion) {
@@ -101,6 +101,7 @@
        // so we supply the styles so as to not appear broken or unstyled in those themes.
        :where(figcaption) {
                @include caption-style();
+               line-height: normal;
        }
 
        // The following variation is deprecated.

This has CSS specificity 0-1-0, so it should be possible to override it with caption styles defined in theme.json or global styles.

stokesman · 2025-02-23T16:48:26Z

I also thought this was the best approach, but I discovered there was one problem. That is, when an image is linked. In this case, the a element has display:inline-block.

That’s a great catch Aki. I checked the history of that and found it was added in #62556 which answered my question on why the a wasn’t made display: block #62556 (review) – its width would then not fit to the image when the image is less than the content width. Yet it can be display: block and its width still fit to the image so I think it’s worth trying.

Make img and a display: block

This uses justify-self to keep the width of the a from expanding to the container. It could be width: fit-content instead. The former seems to be supported a little earlier in browsers.

diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss
index 117045f7dc..0975265f69 100644
--- a/packages/block-library/src/image/style.scss
+++ b/packages/block-library/src/image/style.scss
@@ -2,13 +2,14 @@
 
 	> a,
 	> figure > a {
-		display: inline-block;
+		display: block;
+		justify-self: start;
 	}
 
 	img {
 		height: auto;
 		max-width: 100%;
-		vertical-align: bottom;
+		display: block;
 		box-sizing: border-box;
 
 		@media not (prefers-reduced-motion) {
@@ -43,11 +44,6 @@
 		text-align: center;
 	}
 
-	&.alignfull > a,
-	&.alignwide > a {
-		width: 100%;
-	}
-
 	&.alignfull img,
 	&.alignwide img {
 		height: auto;

t-hamano · 2025-02-26T04:24:53Z

Thanks for the feedback!

I don't have a strong opinion on whether justify-self: start or width: fit-content should be used,
but I prefer the more stable justify-self: start.

P.S. I found one regression that might be related to this issue: #69316

t-hamano · 2025-02-26T04:47:34Z

-	&.alignfull > a,
-	&.alignwide > a {
-		width: 100%;
-	}

This style cannot be removed because if you apply wide or full width to the linked image, the image width may be narrower than the figure element width:

stokesman · 2025-02-28T21:53:33Z

This style cannot be removed

Great catch Aki! Indeed it’s necessary.

Just wanted to note that before #68666 merged, this issue was something only seen on the front end—the alignment in the editor was different. Now it’s the same which should avoid surprise. I still agree we should remove the vertical-align rule of course.

editor before	front end	editor after

hanneslsm added the [Type] Bug An existing feature does not function as intended label Feb 19, 2025

t-hamano added the [Block] Image Affects the Image Block label Feb 20, 2025

coder-rancho linked a pull request Feb 20, 2025 that will close this issue

fix: Remove empty space from figure tag and fix img tag alignment. #69267

Open

github-actions bot added the [Status] In Progress Tracking issues with work in progress label Feb 20, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Image: hardcoded `vertical alignment: bottom` makes it impossible to correctly align images #69255

Image: hardcoded `vertical alignment: bottom` makes it impossible to correctly align images #69255

hanneslsm commented Feb 19, 2025 •

edited

Loading

aialvi commented Feb 20, 2025 •

edited

Loading

coder-rancho commented Feb 20, 2025

t-hamano commented Feb 21, 2025

coder-rancho commented Feb 21, 2025

t-hamano commented Feb 21, 2025

coder-rancho commented Feb 21, 2025 •

edited

Loading

coder-rancho commented Feb 21, 2025

stokesman commented Feb 22, 2025

t-hamano commented Feb 23, 2025

stokesman commented Feb 23, 2025

t-hamano commented Feb 26, 2025

t-hamano commented Feb 26, 2025

stokesman commented Feb 28, 2025

Image: hardcoded vertical alignment: bottom makes it impossible to correctly align images #69255

Image: hardcoded vertical alignment: bottom makes it impossible to correctly align images #69255

Comments

hanneslsm commented Feb 19, 2025 • edited Loading

Description

Step-by-step reproduction instructions

Screenshots, screen recording, code snippet

Environment info

Please confirm that you have searched existing issues in the repo.

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Please confirm which theme type you used for testing.

aialvi commented Feb 20, 2025 • edited Loading

coder-rancho commented Feb 20, 2025

t-hamano commented Feb 21, 2025

coder-rancho commented Feb 21, 2025

t-hamano commented Feb 21, 2025

coder-rancho commented Feb 21, 2025 • edited Loading

coder-rancho commented Feb 21, 2025

stokesman commented Feb 22, 2025

t-hamano commented Feb 23, 2025

stokesman commented Feb 23, 2025

t-hamano commented Feb 26, 2025

t-hamano commented Feb 26, 2025

stokesman commented Feb 28, 2025

Image: hardcoded `vertical alignment: bottom` makes it impossible to correctly align images #69255

Image: hardcoded `vertical alignment: bottom` makes it impossible to correctly align images #69255

hanneslsm commented Feb 19, 2025 •

edited

Loading

aialvi commented Feb 20, 2025 •

edited

Loading

coder-rancho commented Feb 21, 2025 •

edited

Loading