wp-block-cover not functioning as expected

[henrikwirth]

wp-block-cover not functioning as expected

[henrikwirth]

Seems like the markup moved from background-image to an actual image. You will have to adjust your styling.

On what gatsby-source-wordpress version are you?

[henrikwirth]

@avidsapp I just tested it. Actually it is due to the WordPress update from 5.6 to 5.7. Gutenberg changed the markup. Therefore you will need to adjust your styling to match the new markup.

Maybe they also updated it in the new twenty twenty theme. You might be able to find styling related to it here: https://themes.trac.wordpress.org/browser/twentytwenty/1.7/style.css?rev=144394

[avidsapp]

I was hoping there was an easier solution. I guess I'll bend the styling to my will in that case. Thanks.

[avidsapp]

The following code added to style-php.css resolves the issue. A banner-background class must be added to the cover block from the wp dashboard.

/* COVER BLOCK FIX */
.wp-block-cover.alignfull.has-background-dim.banner-background {
  padding: 0px !important;
}
.wp-block-cover.alignfull.has-background-dim.banner-background > .wp-block-cover__image-background {
  position: unset !important;
  overflow: visible !important;
}
.wp-block-cover.alignfull.has-background-dim.banner-background > .wp-block-cover__image-background > span {
  display: contents !important;
}
.wp-block-cover.alignfull.has-background-dim.banner-background > .wp-block-cover__image-background > picture > img {
  object-fit: cover !important;
}