Full and wide alignment in Gutenberg

The new WordPress block editor includes two new alignment options.

To take advantage of the new alignment options, your theme must first support them. Include add_theme_support( 'align-wide' ) in your functions.php file.

Full Alignment

The .alignfull option should span the full width of the screen. I typically do this using the following CSS:

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

The margin property can accept up to 4 values. In this case I provided 2 properties so the first ( 32px) is applied to the top and bottom, and the second (calc( 50% - 50vw)) is applied to the left and right.

This tells the browser to calculate 50% of the its container’s width (ex: 900px) and subtract from it 50% of the viewport width (ex: 1600px). This results in a negative margin that pulls the element to the edges of the screen.

Wide Alignment

You have more flexibility with the .alignwide option. It should be wider than the main content area, but not as wide as the full alignment. There are two approaches I usually take:

Percentage Width

This is my default styling option built into my base themes. It copies the full alignment in approach, but instead of stretching the full gap between the browser edge and the content, it only does half.

.alignwide {
	margin: 32px calc(25% - 25vw);
	max-width: 100vw;
	width: 100vw;
}

Max width

I set a maximum width if there are certain design constraints (like the Recommended Reading floating to the right) or you only want the image to reach a certain size.

I’ll make .alignwide and .alignfull use the same CSS at first, but at a certain break point I’ll change .alignwide to a fixed max width and margins.

For the negative left/right margin, I subtract the full page width from the content width and divide by two. Ex: ( 768px – 920px ) / 2

.alignwide,
.alignfull {
	margin: 32px calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

@media (max-width: 920px) {
	.alignwide {
		margin: 32px -76px;
		max-width: 920px;
		width: 920px;
	}
}

You can also put the math directly in the CSS using calc()

.alignwide,
.alignfull {
	margin: 32px calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

@media (max-width: 920px) {
	.alignwide {
		margin: 32px calc( ( 767px - 920px ) / 2 );
		max-width: 920px;
		width: 920px;
	}
}

With SASS

I use SASS variables to store common units like the margins, content width, and breakpoints (see here). To implement the above using my SASS variables:

&.alignwide,
&.alignfull {
	margin: calc( 2 * #{$block-margin} ) calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

@include media(">=medium") {
	&.alignwide {
		margin: calc( 2 * #{$block-margin} ) calc( ( #{$content-width} - #{map-get( $breakpoints, 'medium' ) } ) / 2 );
		max-width: map-get( $breakpoints, 'medium' );
		width: map-get( $breakpoints, 'medium' );
	}
}

If we decide we want the wide images a bit wider, we simply edit the medium breakpoint and all the math automatically updates. Likewise, if we change the block margin, the top/bottom margin also updates.

Consider Sidebars

If your site uses sidebars, make sure you test your styles on a page with a sidebar.

You can either limit the full/wide alignment styles to pages with .full-width-content body class, or use the max-width approach shown above, ensuring the max-width stops before overlapping the sidebar.

I prefer disabling the full/wide alignment styles on pages with sidebars. The CSS is cleaner, and you don’t end up with two different versions of “wide” and “full” alignments.

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk

Reader Interactions

Comments

Leave A Reply