DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for WordPress Header Image Invisible due to Zero Height after Update to 6.1
Ingo Steinke
Ingo Steinke

Posted on • Updated on

WordPress Header Image Invisible due to Zero Height after Update to 6.1

After my customer's web hoster updated WordPress from 6.0.2 to 6.1, the responsive hero header images were not visible anymore. Comparing the HTML source code and CSS styles, we found the problem and the solution.

After I posted the problem on StackOverflow, unsurprisingly, apart from the obvious and correct suggestion to ask it on wordpress.stackexchange.com, instead of answers it attracted downvotes without any further comments, so I realized DEV, as a more helpful and inclusive community, might be a better place to share our insights.

"The Problem: Missing Header Images"

Our hero header images were no longer visible in a full-site-editing enabled block theme (originally based on Block Base) as their computed height changed zero pixels.

Changing the style from height: 100% to height: auto made the images appear again, but only partially.

When comparing the markup, class names, and applied styles, I first failed to see the difference, apart from the fact that height: 100% now computes to zero height and the image position seems to have changed too.

A new Container Class: is-layout-constrained

There is a new container class, .is-layout-constrained which should not affect the image height as I understood.

A new relative Image Wrapper

As the image has position: absolute, this might be due to a change to a parent container. And it is!

Our next positioned parent is the wrapping <figure> element figure.wp-block-post-featured-image around the actual image. This figure element defaults to position: relative in WordPress 6.1, so it serves as a new nearest positioned ancestor (as described in MDN's Absolute positioning article).

The following CSS is present only after updating to WordPress 6.1:

.wp-block-post-featured-image {
    /* position: relative; */
}
Enter fullscreen mode Exit fullscreen mode

This breaks images set to cover as a hero image like this:

__computed_styles {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
Enter fullscreen mode Exit fullscreen mode

A possible solution is to revert the image wrapper to the previous state by explicitly setting the position back to static. I added both the parent header and the actual figure element just to make sure to override the default style by giving the new rule a greater specificity than the original one:

header figure.wp-block-post-featured-image {
  position: static;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
ingosteinke profile image
Ingo Steinke • Edited on

Similar surprise some weeks later: the site logo is gone! Either somebody editing something, but maybe the WordPress block <!-- wp:site-logo is no longer supported after upgrading to WordPress 6.1?

I will probably never know, as I don't care! After another empty google result
searching for wordpress block "wp:site-logo" 6.1.1

Your search - wordpress block "wp:site-logo" 6.1.1 - did not match any documents.

Without the quotes, the usual irrelevant stuff and ads. Thanks, I've had enough!

I decided to simply hard-code the logo in our theme.

Sorry, WordPress community, but that's just another reason to finish my little series about using WordPress as a developer with some recommendations what to use instead.

Create an Account!

πŸ‘€ Just want to lurk?

That's fine, you can still create an account and turn on features like 🌚 dark mode.