New WordPress alignment classes introduced by Gutenberg

wp-alignment-classes.css

/* -------------------------------------------------------------
# Variables
------------------------------------------------------------- */

$site_maxwidth: 72rem; // Maximum width the entire site should not exceed
$site_maxwidth-text: 40rem; // Maximum width the main content text should not exceed
$spacing_horizontal: 1rem; // General horizontal padding

/* -------------------------------------------------------------
# General Styles
------------------------------------------------------------- */

.site {
	display: block;
	margin-right: auto;
	margin-left: auto;
	padding-right: $spacing_horizontal;
	padding-left: $spacing_horizontal;
	max-width: $site_maxwidth;
}

body.no-sidebar .entry-header,
body.no-sidebar .entry-content,
body.no-sidebar .entry-footer {
	display: block;
	margin-right: auto;
	margin-left: auto;
	max-width: $site_maxwidth-text;
}

/* -------------------------------------------------------------
# Alignment Styles
------------------------------------------------------------- */

.alignleft {
	display: inline;
	float: left;
	margin-right: $spacing_horizontal;
}

.alignright {
	display: inline;
	float: right;
	margin-left: $spacing_horizontal;
}

.aligncenter {
	display: block;
	margin-right: auto;
	margin-left: auto;
	clear: both;
}

.alignwide {
	display: block;

	body.no-sidebar .entry-content & {
		@media (min-width: ($site_maxwidth-text + $spacing_horizontal * 2)) {
			margin-right: calc(-100vw / 2 + #{$site_maxwidth-text} / 2 + #{$spacing_horizontal});
			margin-left: calc(-100vw / 2 + #{$site_maxwidth-text} / 2 + #{$spacing_horizontal});
		}

		@media (min-width: ($site_maxwidth)) {
			margin-right: (- ($site_maxwidth - $site_maxwidth-text) / 2 + $spacing_horizontal);
			margin-left: (- ($site_maxwidth - $site_maxwidth-text) / 2 + $spacing_horizontal);
		}
	}
}

.alignfull {
	display: block;
	
	body.no-sidebar & {
		margin-right: (- $spacing_horizontal);
		margin-left: (- $spacing_horizontal);
	}

	body.no-sidebar .entry-content & {
		@media (min-width: ($site_maxwidth-text + $spacing_horizontal * 2)) {
			margin-right: calc(-100vw / 2 + #{$site_maxwidth-text} / 2);
			margin-left: calc(-100vw / 2 + #{$site_maxwidth-text} / 2);
		}
	}
}

New WordPress alignment classes

What is this?

Gutenberg currently uses two new alignment classes .alignwide and .alignfull which are an addition to the .alignleft, .alignright and .aligncenter classes we are already familiar with in WordPress. Those new classes will very likely become a standard at some point. The rules in this Gist provide basic styles for all of them.

Note it's Sass, not actually CSS like the Gist file extension might falsely indicate.

Usage and Behavior

These styles are based on the assumption that you wrap your entire site's content in a .site div and limit the maximum width of it to a certain value that no content, except special fullwidth content, should exceed (see $site_maxwidth).
In addition to that, you should limit the maximum width of the actual post content even further, which is useful anyway so that lines don't get too long and reading flow stays good (see $site_maxwidth-text).

The two new alignment classes Gutenberg uses are styled as follows:

• .alignwide content keeps the regular padding, but scales wider than the regular width for post content ($site_maxwidth-text). It is still capped at the maximum width of the site (`$site_maxwidth).
• .alignfull content gets rid of the regular padding, and always scales as wide as the full document width. So it even ignores the common maximum width of the site ($site_maxwidth).

Note that the styles for .alignwide and .alignfull classes require the post content to not have any other content beside it (for example a sidebar). They will not receive any special treatment if there is a sidebar or any other content. Apply a .no-sidebar class to your body in order for the rules to become effective.