How to extend Gutenberg Cover Block past the Container

One of my favourite blocks in the current version of Gutenberg is the “Cover”. It’s perfect to break up content into sections using large full-width images. 

However, if your page template has a container, the cover will stay within that container and while it does look ok, you might want to stretch it past the container all the way to the edge of the browser window. 

It’s a common style of block I need to reproduce while transitioning a site from WPBakery Page Builder to Gutenberg (not something I can recommend yet but I think it’ll be a common thing people will do eventually). Moving away from the shortcode-laden output of WPBakery seems to be more future-proof than trying to live with it for the next few years. But that’s for another post. Let’s get started!

The "cover" block in WordPress' Gutenberg editor
the “cover” block in WordPress’ Gutenberg editor

Adding Theme Support

Are you using a custom theme? Adding theme support will give you a few advanced block settings if you update your theme to support them. One of those settings is the full alignment and wide alignment.

add_theme_support( 'align-wide' );

Your theme will probably need to be updated to support these styles. The block’s wrapper gets the following classes assigned: alignwide or alignfull.

Let’s see how we can achieve that!

Before

Contained Cover Image
.alignfull {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

via https://css-tricks.com/full-width-containers-limited-width-parents/

By default, the image will not scale past 100% because of .wp-block-image having its max-width set to 100%. To override that behaviour for images that are set to be full width, you can add the following CSS:

.wp-block-image.alignfull {
	max-width: inherit;
}

Time needed: 5 minutes.

To extend the image past the container, you can this little bit of CSS to the theme or in the “Edit CSS” section of your Appearance Menu:

  1. Add the below CSS to your “Appearance” Menu, your theme or a CSS plugin

    If you use Appearance → Edit CSS, you can add the code there.
    – or –
    If you want to add it to your theme’s CSS file directly, you can do that too (use a child theme, if appropriate).
    – or –
    If you use a CSS plugin, you could add the code there.

  2. Add a new block to your post

    Add a Cover block to the post and choose “full width” to break your blog out of its container:
    Gutenberg Full Width Toggle

After

Gutenberg Cover Image Full Width
The image now breaks past the container and goes all the way to the edge of the browser window.

Leave a Reply