Use Gutenberg Group blocks for full-width containers

With the WordPress Gutenberg editor it is easy to create full-width blocks. We can use them to create rows that span the whole width of a page. Then we can set a background colour or image for that row, while its content aligns with the content of regular (normal width) blocks. This is often used for headers, footers, navigation bars as well as sections that need to stand out.

Prerequisites

We’ll need Group blocks, present in Gutenberg Core since WordPress 5.3. For older versions you’ll need the Gutenberg plug-in.

We will also need theme support for full-width alignment. Check if support is present by examining a Group block:

If the alignment options don’t show up, activate this feature for the theme with the following line in functions.php:

add_theme_support('align-wide');

Editing with Gutenberg

Creating the full-width row in the block editor is now a piece of cake. In fact, we have already done that above for the greatest part.

Create a Group block
Change its alignment to Full Width.

The only thing left is to add a class to the Group block to determine the background. You could do this using the color settings of the Inspector controls. Or set a classname manually:

In the Advanced panel of the Inspector controls, set an additional CSS class my-full-width-container.
Save.

That’s it. The rest is styling.

Stretching to full width

Changing the alignment to Full Width basically adds a CSS class alignfull to the block. There are several ways to style a full-width block to make it actually stretch from the left to the right side of the page. Here I will just set the width to the width of the viewport and position the block relatively.

Relative to what?

The calculation of the relative position depends on the margin and padding of the container. In (default) WordPress themes this wrapper often has class entry-content. Suppose we have the following CSS for the wrapper:

.entry-content {
	padding-left: 15px;
	padding-right: 15px;
    
	margin: 0 1rem;
	max-width: calc(100% - 2rem);
	
	@media only screen and (min-width: 768px) {
		margin: 0 10%;
		max-width: 80%;
	}
	
	@media only screen and (min-width: 1500px) {
		margin: 0 auto;
		max-width: 1200px;
	}		
}

Calculate the left property of the alignfull class by just taking minus the sum of the element’s left margin and padding:

.alignfull {
    left: calc(-1rem - 15px);
    position: relative;
    
    max-width: 100vw;
    width: 100vw;
    
	@media only screen and (min-width: 768px) {
        left: calc(-1.25 * (10% + 15px));
    }

	@media only screen and (min-width: 1500px) {
        left: calc(-50vw + 50%); 
    }
}

That puts the full-width row on the spot where we want it. A problem that may arise is that browsers don’t fully agree whether 100vw is in- or excluding the vertical scrollbar. In Firefox for instance the full-width row would be a little too wide. You might want to add overflow: hidden to a containing element like main to solve this.

Colourful full width

To style the new full-width row, edit the CSS for the class defined in step 3 above.

.my-full-width-container {
    background: rgb(241, 149, 32);
    padding-left: 0;
    padding-right: 0;
}

Align inner container

The Group block very conveniently adds an inner container with class .wp-block-group__inner-container. Match margins and padding of the inner container with those of the regular content blocks, by duplicating the style definitions of .entry-content above for the inner container.

Now child blocks inside the full-width Group block will align with the content in regular blocks.

SCSS version

For completeness here are the styles given above in Sass flavour.

$grid-gutter-width: 30px;
$spacer: 1rem;

%wrap {
	padding-left: $grid-gutter-width / 2;
	padding-right: $grid-gutter-width / 2;
	
	max-width: calc(100% - (2 * #{ $spacer }));
	margin: 0 $spacer;
	
	@include media(tablet) {
		max-width: 80%;
		margin: 0 10%;
	}
	
	@include media(wide) {
		max-width: 1200px;
		margin: 0 auto;
	}		
}

.entry-content {
	@extend %wrap;
}

.alignfull {
    position: relative;
    left: calc(-#{$spacer} - #{$grid-gutter-width}/2);
    width: 100vw;
    max-width: 100vw;
    
    @include media(tablet) {
        left: calc(-1.25 * (10% + #{$grid-gutter-width}/2));
    }

    @include media(wide) {
        left: calc(-50vw + 50%); 
    } 

	.wp-block-group__inner-container {   
		@extend %wrap;
	}
}