Another attempt at alignments (#4459)

Another attempt at alignments.  With this change alignment rules no longer depend on trying to discern "inherit width" containers and instead installs a gutter on the top-level container.  Any element that is "full width" is "busted out" of those gutters (with negative margins) and if those containers are groups themselves (group block, columns block or template parts) they also express those same gutter margins internally.

blockbase/assets/ponyfill.css

@@ -55,19 +55,36 @@ img {
 /**
  * These are default block editor widths in case the theme doesn't provide them.
  */
-.wp-block-group.alignfull,
-*[class*="wp-container-"] {
+.wp-site-blocks {
 	padding-left: var(--wp--custom--post-content--padding--left);
 	padding-right: var(--wp--custom--post-content--padding--right);
 }
 
-.wp-block-group.alignfull *[class*="wp-container-"],
-.wp-block-group.alignfull > .alignfull,
-*[class*="wp-container-"] *[class*="wp-container-"],
-*[class*="wp-container-"] > .alignfull {
+.wp-site-blocks .alignfull {
 	margin-left: calc(-1 * var(--wp--custom--post-content--padding--left)) !important;
 	margin-right: calc(-1 * var(--wp--custom--post-content--padding--right)) !important;
-	width: calc( 100% + var(--wp--custom--post-content--padding--left) + var(--wp--custom--post-content--padding--right)) !important;
+	width: unset;
+}
+
+.wp-site-blocks .alignfull.wp-block-template-part, .wp-site-blocks .alignfull.wp-block-columns, .wp-site-blocks .alignfull.wp-block-group {
+	padding-left: var(--wp--custom--post-content--padding--left);
+	padding-right: var(--wp--custom--post-content--padding--right);
+}
+
+.is-root-container {
+	padding-left: var(--wp--custom--post-content--padding--left);
+	padding-right: var(--wp--custom--post-content--padding--right);
+}
+
+.is-root-container .wp-block[data-align="full"] {
+	margin-left: calc(-1 * var(--wp--custom--post-content--padding--left)) !important;
+	margin-right: calc(-1 * var(--wp--custom--post-content--padding--right)) !important;
+	width: unset;
+}
+
+.is-root-container .wp-block[data-align="full"] > .wp-block-group {
+	padding-left: var(--wp--custom--post-content--padding--left);
+	padding-right: var(--wp--custom--post-content--padding--right);
 }
 
 @media (min-width: 480px) {

blockbase/sass/base/_alignment.scss

@@ -1,17 +1,36 @@
-.wp-block-group.alignfull,
-*[class*="wp-container-"] //Anything that inherits layout (container)
-{
-	//give it some padding
+//FRONTEND
+.wp-site-blocks { // top level of the view
+	//In this situation we want to introduce a standardized gap between content and the edge of the screen.
 	padding-left: var(--wp--custom--post-content--padding--left);
 	padding-right: var(--wp--custom--post-content--padding--right);
+	.alignfull {
+		// these elements we want to "bust out" of the gap created above 
+		margin-left: calc(-1 * var(--wp--custom--post-content--padding--left)) !important;
+		margin-right: calc(-1 * var(--wp--custom--post-content--padding--right)) !important;
+		width: unset;
+		// however any containers that "bust out" should re-apply that gap but this time using padding instead of margins.
+		&.wp-block-template-part,
+		&.wp-block-columns,
+		&.wp-block-group {
+	 		padding-left: var(--wp--custom--post-content--padding--left);
+	 		padding-right: var(--wp--custom--post-content--padding--right);
+		}
+	}
+}
 
-	//Any nested containers, and anything that is alignfull
-	*[class*="wp-container-"], // Any nested containers
-	> .alignfull { // Any direct descendant that is alignfull
-		// bust out of the container's padding
+// EDITOR (NOTE: It PROBABLY would be OK to bring these together to "simplify" the stylesheet.  However the selectors are quite different
+// and it's a lot easier to understand and ensure intent separated in this way.
+.is-root-container { //top level of the editor
+	padding-left: var(--wp--custom--post-content--padding--left);
+	padding-right: var(--wp--custom--post-content--padding--right);
+	.wp-block[data-align="full"] { //blocks configured to be "align full" in "editorspeak"
 		margin-left: calc(-1 * var(--wp--custom--post-content--padding--left)) !important;
 		margin-right: calc(-1 * var(--wp--custom--post-content--padding--right)) !important;
-		width: calc( 100% + var(--wp--custom--post-content--padding--left) + var(--wp--custom--post-content--padding--right) ) !important;
+		width: unset;
+		>.wp-block-group {
+	 		padding-left: var(--wp--custom--post-content--padding--left);
+	 		padding-right: var(--wp--custom--post-content--padding--right);
+		}
 	}
 }