WordPress Block Alignment Classes with Support for Nested Group Blocks

nested-block-alignments.css

.block-container > *, /* [1] */
.wp-block-group__inner-container > * { /* [2] */
	max-width: 46.25rem;
	margin-left: 1.25rem;
	margin-right: 1.25rem;

	@media (min-width: 48.75em) { /* [3] */
		margin-left: auto;
		margin-right: auto;
	}
}

.has-background .wp-block-group__inner-container > * {
	max-width: 46.25rem;
	margin-left: auto;
	margin-right: auto;
}

:root .alignwide { /* [4] */
	max-width: 61.25rem;

	@media (min-width: 63.75em) { /* [3] */
		margin-left: auto;
		margin-right: auto;
	}
}

:root .alignfull { /* [4] */
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.has-background {
	padding: 1.25rem;
}

.has-background .alignfull {
	margin-left: -1.25rem;
	margin-right: -1.25rem;
}

/*
 * FOOTNOTES:
 * 
 * [1] For more on this general approach to managing alignments, see https://themehybrid.com/weblog/block-containers-and-wide-full-alignment. Your `.block-container` class might be something like `main .entry-content`
 * [2] Depending on the blocks you use, you may need to add additional special cases that are similar to group (e.g. Cover, Media & Text, etc.)
 * [3] breakpoint = {max-width} + ( {margin} * 2 )
 * [4] :root is to win specificity battles
 */