Refactored to simplify base alignment styles to better target incoming Gutenberg changes.

blank-canvas-blocks/assets/ponyfill.css

@@ -81,92 +81,26 @@ body {
 	margin-bottom: var(--wp--custom--margin--vertical);
 }
 
-.wp-site-blocks {
-	padding: 0 var(--wp--custom--margin--horizontal);
-}
-
-.wp-block {
-	max-width: var(--wp--custom--width--default);
-}
-
-.wp-block[data-align=wide] {
-	max-width: var(--wp--custom--width--wide);
-}
-
-.wp-block[data-align=full] {
-	max-width: none;
-}
-
-.wp-block-group .wp-block-group,
+.wp-site-blocks *[class*="__inner-container"] > .wp-block-group,
 .wp-site-blocks > *:not(.wp-block-post-content):not(.wp-block-template-part),
 .wp-site-blocks .wp-block-post-content > * {
 	max-width: var(--wp--custom--width--default);
 	margin-left: auto;
 	margin-right: auto;
+	padding: 0 var(--wp--custom--margin--horizontal);
 }
 
+.wp-site-blocks *[class*="__inner-container"] > .alignwide,
 .wp-site-blocks .alignwide {
 	width: var(--wp--custom--width--wide);
 	max-width: 100%;
-	margin-left: auto;
-	margin-right: auto;
 }
 
+.wp-site-blocks *[class*="__inner-container"] > .alignfull,
 .wp-site-blocks .alignfull {
-	transform: translateX(calc(0px - var(--wp--custom--margin--horizontal)));
-	width: calc(100% + (2 * var(--wp--custom--margin--horizontal)));
-	max-width: calc(100% + (2 * var(--wp--custom--margin--horizontal)));
-	margin-left: 0;
-	margin-right: 0;
-	box-sizing: content-box;
-}
-
-.wp-site-blocks *[class*="__inner-container"] .alignfull {
-	box-sizing: border-box;
-	transform: unset;
-	width: 100%;
-}
-
-.aligncenter {
-	text-align: center;
-}
-
-@media only screen and (min-width: 482px) {
-	.block-editor-block-list__layout .alignleft,
-	.block-editor-block-list__layout .alignright,
-	.wp-site-blocks .alignleft,
-	.wp-site-blocks .alignright {
-		max-width: calc(var(--wp--custom--width--default) / 2);
-	}
-	.wp-site-blocks .alignleft {
-		/*rtl:ignore*/
-		float: left;
-	}
-	.wp-site-blocks .alignright {
-		/*rtl:ignore*/
-		float: right;
-	}
-	.block-editor-block-list__layout > .alignleft,
-	.block-editor-block-list__layout > .alignright,
-	.wp-site-blocks .wp-block-post-content > .alignleft,
-	.wp-site-blocks .wp-block-post-content > .alignright {
-		--content-width: min( 100% - var(--wp--custom--margin--horizontal) * 2, var(--wp--custom--width--default) );
-		--alignment-margin: calc( ( 100% - var(--content-width ) ) / 2 );
-	}
-	.block-editor-block-list__layout > .alignleft,
-	.wp-site-blocks .wp-block-post-content > .alignleft {
-		/*rtl:ignore*/
-		margin-left: var(--alignment-margin);
-		/*rtl:ignore*/
-		margin-right: var(--wp--custom--margin--horizontal);
-	}
-	.block-editor-block-list__layout > .alignright,
-	.wp-site-blocks .wp-block-post-content > .alignright {
-		/*rtl:ignore*/
-		margin-left: var(--wp--custom--margin--horizontal);
-		/*rtl:ignore*/
-		margin-right: var(--alignment-margin);
-	}
+	max-width: unset;
+	margin-left: unset;
+	margin-right: unset;
 }
 
 ::selection {
@@ -406,11 +340,7 @@ p.has-drop-cap:not(:focus):first-letter {
 	font-style: var(--wp--custom--quote--citation--typography--font-style);
 }
 
-.wp-block-group.has-background {
-	padding: unset;
-}
-
-.wp-block-group.has-background .wp-block-group__inner-container {
+.wp-block-group.has-background:not([class*="block-editor-block"]) {
 	padding: var(--wp--custom--margin--vertical) var(--wp--custom--margin--horizontal);
 }
 

blank-canvas-blocks/sass/base/_alignment.scss

@@ -18,114 +18,27 @@ body {
 	margin-bottom: var(--wp--custom--margin--vertical);
 }
 
-// Ensure horizontal padding on the page
-.wp-site-blocks {
-	padding: 0 var(--wp--custom--margin--horizontal);
-}
-
-.wp-block { // For the editor.
-	max-width: var(--wp--custom--width--default);
-}
-
-.wp-block[data-align=wide] { // For the editor.
-	max-width: var(--wp--custom--width--wide);
-}
-
-.wp-block[data-align=full] { // For the editor.
-	max-width: none;
-}
-
 // This is the default with of blocks on the page with not assign alignwide or alignfull
-.wp-block-group .wp-block-group, // When a group is in a group return alignment to default
+.wp-site-blocks *[class*="__inner-container"] > .wp-block-group,
 .wp-site-blocks > *:not(.wp-block-post-content):not(.wp-block-template-part),
 .wp-site-blocks .wp-block-post-content > * {
 	max-width: var(--wp--custom--width--default);
 	margin-left: auto;
 	margin-right: auto;
+ 	padding: 0 var(--wp--custom--margin--horizontal);
 }
 
 // Align the block to be on the "wider" side of things
+.wp-site-blocks *[class*="__inner-container"] > .alignwide,
 .wp-site-blocks .alignwide {
 	width: var(--wp--custom--width--wide);
 	max-width: 100%;
-	margin-left: auto;
-	margin-right: auto;
 }
 
-// The block or template part should span the full width of the page
+// The block should span the full width of the page
+.wp-site-blocks *[class*="__inner-container"] > .alignfull,
 .wp-site-blocks .alignfull {
-	transform: translateX(calc(0px - var(--wp--custom--margin--horizontal)));
-	width: calc(100% + (2 * var(--wp--custom--margin--horizontal)));
-	max-width: calc(100% + (2 * var(--wp--custom--margin--horizontal)));
-	margin-left: 0;
-	margin-right: 0;
-	box-sizing: content-box;
-}
-
-// If a block is inside of a container and set to alignfull
-// then it should be as wide as the container it's in, however wide that is.
-.wp-site-blocks *[class*="__inner-container"] .alignfull {
-	box-sizing: border-box;
-	transform: unset;
-	width: 100%;
-}
-
-// Align Center
-.aligncenter {
-	text-align: center;
-}
-
-// Align Left and Right
-@include media(mobile) {
-	.block-editor-block-list__layout .alignleft,
-	.block-editor-block-list__layout .alignright,
-	.wp-site-blocks .alignleft,
-	.wp-site-blocks .alignright {
-		max-width: calc(var(--wp--custom--width--default) / 2);
-	}
-
-	// Align Left
-	.wp-site-blocks .alignleft {
-		/*rtl:ignore*/
-		float: left;
-	}
-
-	// Align Right
-	.wp-site-blocks .alignright {
-		/*rtl:ignore*/
-		float: right;
-	}
-
-	// When alignments are applied to top level blocks
-	// we need to add more left/right margin as the block is full width.
-	.block-editor-block-list__layout > .alignleft, // For the editor.
-	.block-editor-block-list__layout > .alignright, // For the editor.
-	.wp-site-blocks .wp-block-post-content > .alignleft,
-	.wp-site-blocks .wp-block-post-content > .alignright {
-		// Content width is the lesser of the viewport width (subtracting margins)
-		// or the default site width.
-		// This variable is only used for this element.
-		--content-width: min( 100% - var(--wp--custom--margin--horizontal) * 2, var(--wp--custom--width--default) );
-		// The alignment margin is the viewport, subtract the content and divide by two
-		// Then subtract the block padding
-		--alignment-margin: calc( ( 100% - var(--content-width ) ) / 2 );
-	}
-
-	// Align Left
-	.block-editor-block-list__layout > .alignleft, // For the editor.
-	.wp-site-blocks .wp-block-post-content > .alignleft {
-		/*rtl:ignore*/
-		margin-left: var(--alignment-margin);
-		/*rtl:ignore*/
-		margin-right: var(--wp--custom--margin--horizontal);
-	}
-
-	// Align Right
-	.block-editor-block-list__layout > .alignright, // For the editor.
-	.wp-site-blocks .wp-block-post-content > .alignright {
-		/*rtl:ignore*/
-		margin-left: var(--wp--custom--margin--horizontal);
-		/*rtl:ignore*/
-		margin-right: var(--alignment-margin);
-	}
+	max-width: unset;
+	margin-left: unset;
+	margin-right: unset;
 }

blank-canvas-blocks/sass/blocks/_group.scss

@@ -1,9 +1,6 @@
 // NOTE: Gutenberg sets a padding value by default for groups with a background.
-// However when this top level element has padding applied it mucks up the alignment
-// calculations, so it's removed and set instead (to a configurable value) on the inner-container instead.
-.wp-block-group.has-background {
-	padding: unset;
-	.wp-block-group__inner-container {
-		padding: var(--wp--custom--margin--vertical) var(--wp--custom--margin--horizontal);
-	}
+// However this isn't customizable so that's being overwritten here.
+// Unfortunately it borks up the editor padding so the :not() is for the editor.
+.wp-block-group.has-background:not([class*="block-editor-block"]) {
+	padding: var(--wp--custom--margin--vertical) var(--wp--custom--margin--horizontal);
 }