Flexible Content Alignment in Gutenberg

The Gutenberg editor in Wordpress allows for three important alignment layouts: Align Centre, Wide Width, and Full Width (as shown below). There is also Align Left, and Align Right, but I'm not going to go into these on this post. These settings allow you to set certain blocks to be narrower or wider than your standard page width. However, your theme template may not support this without a little help.

The content width on this page is 960px. You can see below that the content width can be set to expand beyond this width. I've added the dashed border to make it easier to see the container size.

To enable block styles support, add the following to your template functions.php file (or child template if you're using one). More details can be found on this at the Wordpress Block Editor Handbook.

add_theme_support( 'wp-block-styles' );  //Add support for Block Styles
add_theme_support( 'responsive-embeds' );  //Add support for responsive embeds.
add_theme_support( 'align-wide' );  //Add support for align-wide and align-full

Next, add the following to your template css file. These settings can be adjusted slightly, but it's a good starting point. Please note, that this may not work with all themes, as they may have other styles in place that override this.

/* place in template css */
/* ------------------------------------------ */

.alignwide {
    margin: 0 calc(50% - 640px);
    max-width: 1280px;
    width: 100vw;
}

.alignfull {
    margin: 0 calc(50% - 50vw);
    max-width: 100vw;
    width: 100vw;
}

@media (max-width: 1280px) {
  .alignwide {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }
}

@media (max-width: 920px) {
  .alignwide {
    margin: 0;
    max-width: 100%;
    width: 100%;
  }
}

Once in place, this will allow you to have different layout widths on the same page.

Note: some blocks allow for alignment settings (such as image, columns etc.). However if you want to adjust the width of a paragraph or header block (for example), add a Group block first, apply the alignment, and then add blocks inside. Frustratingly, the Group block doesn't seem to include Align Centre, but you can do Wide Width, or Full Width.

If you're looking for more layout control on the page, then you may want to consider using the Gutenberg Blocks by Kadence Blocks plugin or Gutenberg Blocks – Ultimate Addons for Gutenberg. Both of these will offer fully support these alignment options.