Cover block content not overlaying

Hi @lorensimon! I have noticed you are working with a Twenty Twenty-Three child theme.

Could you activate the parent theme for a moment and-retest this? I wonder if this could be an issue with the customization you made.

Thank you!

 I tried and it does not change. I also eliminated all custom CSS but still no difference. The only way it works is if I start from a fresh WordPress installation with the standard theme.

Hi @lorensimon from what you have described it seems there is something on this particular site that is causing this issue. In this case, I would suggest troubleshooting the site while it’s on the parent theme.

Please attempt to disable all plugins including Gutenberg. If the problem goes away, enable them one by one to identify the source of your troubles.
If you are worried about how your site will look when you deactivate the plugin, you can use the Health Check plugin to troubleshoot your site Health Check

It sounds like you took all the good troubleshooting steps… very frustrating indeed.

Ok, so I tried to replicate the layout on a test site and it seems to work fine:

The markup for the above (copied from the editor) would be this:

<!-- wp:cover {"url":"https://gutenbergcore.mystagingwebsite.com/wp-content/uploads/2022/10/6e261ba9-67ef-3f60-b56c-3b06a3480d0b.jpg","id":6040,"dimRatio":50} -->
<div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><img class="wp-block-cover__image-background wp-image-6040" alt="" src="https://gutenbergcore.mystagingwebsite.com/wp-content/uploads/2022/10/6e261ba9-67ef-3f60-b56c-3b06a3480d0b.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"textAlign":"center","backgroundColor":"cyan-bluish-gray"} -->
<h2 class="wp-block-heading has-text-align-center has-cyan-bluish-gray-background-color has-background">Text to the Right</h2>
<!-- /wp:heading --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:cover -->

I then copied the public markup from your site, pasted on my test site using a Custom HTML block and it indeed looks broken:

Here’s the really weird part, if I combine the two cover blocks (the one I copied from your site and the one I re-created manually on mine), your block looks ok!!

I see three things we could try:

• Remove your cover block and add it from scratch (you have probably tried this already but it is worth a shot).
• If the problem persists, try copy pasting the code I shared above to see it that one looks good on your site.
• If MY cover block also looks broken on your site, could you please share the full HTML code for YOUR cover block (you can copy the entire block via the editor and use a “Code Block” to paste it here).

I’m really curious, let’s see if we can figure this one out together!