Gutenberg Blocks – Wide Alignment and Full-width

The Gutenberg editor introduces some new and interesting alignment options:-

• full-width
• wide-alignment

These options require that your theme explicitly supports them.  See Developer Aside for a deeper discussion on what is needed to support these alignment options.

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, 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.

What Block Types Can Be Full or Wide-Aligned?

Assuming that your theme supports them, the new alignment options are offered for these blocks:-

• Cover Image Block
• Image Block
• Gallery Block
• Pullquote Block
• Video Block
• Table Block
• Columns Block
• Categories Block (fullwidth only)
• Embed Block

Choosing the New Alignment Options

Click to edit the block and you will see the alignment options appear above.

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.

Developer Aside

Here’s what to add to your theme’s functions.php file in order to support full-width and wide-alignment blocks.

<?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;
    }

https://weblines.com.au/gutenberg-blocks-wide-alignment-full-width/