Adjusted Group Alignment especially for nested groups (#3449)

* Adjusted Group Alignment especially for nested groups

Co-authored-by: Jeff Ong <jonger4@gmail.com>

blank-canvas-blocks/assets/ponyfill.css

@@ -97,6 +97,7 @@ body {
 	max-width: none;
 }
 
+.wp-block-group .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);
@@ -120,6 +121,12 @@ body {
 	box-sizing: content-box;
 }
 
+.wp-site-blocks *[class*="__inner-container"] .alignfull {
+	box-sizing: border-box;
+	transform: unset;
+	width: 100%;
+}
+
 .aligncenter {
 	text-align: center;
 }
@@ -399,6 +406,10 @@ 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 {
 	padding: var(--wp--custom--margin--vertical) var(--wp--custom--margin--horizontal);
 }

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

@@ -36,6 +36,7 @@ body {
 }
 
 // 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 > *:not(.wp-block-post-content):not(.wp-block-template-part),
 .wp-site-blocks .wp-block-post-content > * {
 	max-width: var(--wp--custom--width--default);
@@ -61,6 +62,14 @@ body {
 	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;

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

@@ -1,7 +1,9 @@
-.wp-block-group {
-	&.has-background {
-		.wp-block-group__inner-container {
-			padding: var(--wp--custom--margin--vertical) var(--wp--custom--margin--horizontal);
-		}
+// 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);
 	}
 }