Categories
Gutenberg Wordpress

Use Gutenberg Group blocks for full-width containers

With the WordPress Gutenberg editor it is easy to create full-width blocks. If it isn’t already, we can activate this feature for the theme with the following line in functions.php:

add_theme_support('align-wide');

Combined with Group blocks, this allows us to create a full-width section where the inner content aligns with the content in blocks with regular width. The full-width containers can be used to show an alternative background color or image. Very useful for headers, footers, navigation bars etc.

The group block is present in Gutenberg Core since WordPress 5.3.

Step by step

  1. Create a Group block that will serve as our container.
  2. Make the block full-width.
  3. In the Advanced panel of the Inspector controls, set an additional CSS class, for example my-full-width-container.
  4. Use this class to style the full-width container.
.my-full-width-container {
    background: red;
    padding-left: 0;
    padding-right: 0;
} 
  1. 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, for example:
.wp-block-group__inner-container {         
    max-width: 80%;        
    margin: 0 10%;        
    padding: 0 60px;    
}

Now we can put children blocks inside the full-width Group block that will align with the content in regular blocks.

Leave a Reply

Your email address will not be published. Required fields are marked *