Block Editor – Wide Alignment and Full-width

previously published as “Gutenberg Blocks – Wide Alignment and Full-width”

The Block Editor (Gutenberg) introduces some new and interesting alignment options:-

  • wide-alignment
  • full-width

These options require that your theme explicitly supports them.  See Developer Aside for a deeper discussion on what is needed to support the wide-alignment and full-width options.

Wide alignment and full width options demonstrated on a web page.

What Block Types Can Be Full or Wide-Aligned?

Assuming that your theme supports them, the full-width and wide-alignment options are offered for these blocks:-

  • Cover Image Block
  • Image Block
  • Gallery Block
  • Pullquote Block
  • Video Block
  • Table Block
  • Columns Block
  • Group/Row Block
  • Categories Block
  • Embed Block

Choosing Full or Wide-Alignment

Click to edit the block, then click on the alignment icon in the block controls bar.

Choosing alignment options in the block control bar

If available, wide and full alignment options will be visible in the alignment dropdown.

selecting wide-alignment or full-width for a block

New Classes

Choosing one of the new alignment options gives the block an additional class of either .alignwide or .alignfull.

The intention is that wide-aligned blocks will stick out from normal content on either side.  And full-width blocks will stretch the entire width of the browser window (while normal content remains with margins on either side).

Clearly .alignwide and .alignfull need to be properly handled in the stylesheet of the theme for each type of block.

What Does Full-Width Mean with a Sidebar?

Since the use of wide-aligned and full-width may not be entirely sensible on a page with a sidebar (and this post is sometimes displayed with a sidebar), here is a demonstration of wide-aligned and full-width content on a single-column page.

Websites with sidebars have gone out of fashion and are becoming less common to see; it’s probable that the introduction of these features to the widely used WordPress software will exaggerate that trend.


Developer Aside

Block Theme or Theme with theme.json File

For a theme which uses a theme.json file, if the theme.json includes layout size settings, the Block Editor itself should take care of displaying the full and wide-aligned items appropriately.

Layout size settings in theme.json should look something like this:-

"settings": {

        ...
	"layout": {
		"contentSize": "700px",
		"wideSize": "1000px"
	},
        ...
}

Note: This relies on theme styles following the pattern of recent WordPress themes. That is, the theme does not specify fixed content widths on the body or outer content wrappers, but applies them to the inner content instead. Here is a simplified version of such styling:-

body .main-content > * {
    max-width: var(--wp--style--global--content-size);
    margin-left: auto;
    margin-right: auto;
}
body .main-content > .alignwide {
    max-width: var(--wp--style--global--wide-size);
}
body .main-content > .fullwidth {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

Use of theme.json will cause (something similar to) this styling to be included by default, when layout.contentSize and layout.wideSize are set. Thus full and wide-alignment should be displayed correctly, as long as the theme’s stylesheet does not override this styling.

Classic Editor Theme

For a theme without a theme.json file, here’s what to add to your theme’s functions.php file in order to support full-width and wide-alignment blocks. See WordPress help for this feature.

<?php
/**
 * Register support for Gutenberg wide images in your theme
 */
function mytheme_setup() {
  add_theme_support( 'align-wide' );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

And of course you’ll have to ensure that the theme’s CSS styling handles them appropriately.  For example, the CSS styles below allow wide-aligned and full-width content to fill outside the bounds of the containing element. 

    .entry-content .alignwide {
        margin-left  : -80px;
        margin-right : -80px;
    }
    .entry-content .alignfull {
        margin-left  : calc( -100vw / 2 + 100% / 2 );
        margin-right : calc( -100vw / 2 + 100% / 2 );
        max-width    : 100vw;
    }
    .alignfull img {
        width: 100vw;
    }