Controlled alignfull padding differently to correct paragraph padding in certain situation. (#4123)

Controlled alignfull padding differently to correct paragraph padding in certain situations.

Refactored 'container' alignment rules

Eliminated 'page-content' class as a means to apply default 'edge'
padding to content.

Introduced 'container-' selection as the means to apply default 'edge'
padding to content.

Removed 'edge' padding from post-content block (it is all handled by
'container-' elements now).

Refactored the "bust out of edge padding" for alignfull elements and
nested 'container-'s.

blockbase/assets/ponyfill.css

@@ -60,22 +60,21 @@ img {
 	padding-right: var(--wp--custom--post-content--padding--right);
 }
 
-.block-editor-block-list__layout.is-root-container > .wp-block[data-align=full],
-.wp-block-post-content > .alignfull {
+.wp-block-group.alignfull,
+*[class*="wp-container-"] {
+	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 {
 	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;
 }
 
-.site-header,
-.post-header,
-.page-content,
-[data-align="full"] p,
-.alignfull p {
-	padding-left: var(--wp--custom--post-content--padding--left);
-	padding-right: var(--wp--custom--post-content--padding--right);
-}
-
 @media (min-width: 480px) {
 	.wp-block[data-align="left"],
 	.wp-block[data-align="right"],

blockbase/block-templates/404.html

@@ -1,7 +1,7 @@
-<!-- wp:template-part {"slug":"header","tagName":"header","layout":{"inherit":true}} /-->
+<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"layout":{"inherit":true},"className":"page-content","tagName":"main"} -->
-<main class="wp-block-group page-content">
+<!-- wp:group {"layout":{"inherit":true},"tagName":"main"} -->
+<main class="wp-block-group">
 
 <!-- wp:heading {"level":1,"fontSize":"large"} -->
 <h1 class="has-large-font-size">Oops! That page can’t be found.</h1>

blockbase/block-templates/header-footer-only.html

@@ -1,7 +1,7 @@
-<!-- wp:template-part {"slug":"header","tagName":"header","layout":{"inherit":true}} /-->
+<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"tagName":"main"} -->
-<main class="wp-block-group post-content">
+<!-- wp:group {"tagName":"main","layout":{"inherit":true}} -->
+<main class="wp-block-group">
 
 <!-- wp:post-content {"layout":{"inherit":true}} /-->
 </main>

blockbase/block-templates/index.html

@@ -1,14 +1,18 @@
-<!-- wp:template-part {"slug":"header","tagName":"header","layout":{"inherit":true}} /-->
+<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:query {"className":"page-content","tagName":"main","layout":{"inherit":true},"queryId":1,"query":{"perPage":10,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","sticky":""}} -->
-<main class="wp-block-query page-content">
+<!-- wp:query {"tagName":"main","queryId":1,"query":{"perPage":10,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","sticky":""}} -->
+<main class="wp-block-query">
 <!-- wp:post-template -->
+<!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group">
 	<!-- wp:post-title {"isLink":true} /-->
 	<!-- wp:post-featured-image {"isLink":true} /-->
 	<!-- wp:post-excerpt /-->
 	<!-- wp:spacer {"height":40} -->
 	<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
 	<!-- /wp:spacer -->
+</div>
+<!-- /wp:group -->
 <!-- /wp:post-template -->
 <!-- wp:group {"layout":{"inherit":true}} -->
 	<div class="wp-block-group">

blockbase/block-templates/search.html

@@ -1,7 +1,7 @@
 <!-- wp:template-part {"slug":"header","tagName":"header","layout":{"inherit":true}} /-->
 
-<!-- wp:group {"layout":{"inherit":true},"className":"page-content","tagName":"main"} -->
-<main class="wp-block-group page-content">
+<!-- wp:group {"layout":{"inherit":true},"tagName":"main"} -->
+<main class="wp-block-group">
 
 <!-- wp:heading -->
 <h2>Results:</h2>

blockbase/block-templates/singular.html

@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header","tagName":"header","layout":{"inherit":true}} /-->
+<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
 <!-- wp:group {"layout":{"inherit":true},"className":"post-header"} -->
 <div class="wp-block-group post-header">
@@ -6,11 +6,11 @@
 </div>
 <!-- /wp:group -->
 
-<!-- wp:group {"tagName":"main"} -->
+<!-- wp:group {"tagName":"main","layout":{"inherit":true}} -->
 <main class="wp-block-group post-content">
 <!-- wp:post-featured-image {"align":"full"} /-->
 
-<!-- wp:post-content {"layout":{"inherit":true}} /-->
+<!-- wp:post-content /-->
 </main>
 <!-- /wp:group -->
 

blockbase/sass/base/_alignment.scss

@@ -5,20 +5,21 @@
 	padding-right: var(--wp--custom--post-content--padding--right);
 }
 
-.block-editor-block-list__layout.is-root-container>.wp-block[data-align=full],
-.wp-block-post-content > .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;
-}
-
-.site-header,
-.post-header,
-.page-content,
-[data-align="full"] p,
-.alignfull p {
+.wp-block-group.alignfull,
+*[class*="wp-container-"] //Anything that inherits layout (container)
+{
+	//give it some padding
 	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
+		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;
+	}
 }
 
 @include break-mobile {

blockbase/theme.json

@@ -381,14 +381,6 @@
 					"background": "var(--wp--custom--color--background)"
 				}
 			},
-			"core/post-content": {
-				"spacing": {
-					"padding": {
-						"left": "var(--wp--custom--post-content--padding--left)",
-						"right": "var(--wp--custom--post-content--padding--right)"
-					}
-				}
-			},
 			"core/post-title": {
 				"typography": {
 					"fontFamily": "var(--wp--custom--heading--typography--font-family)",

mayland-blocks/block-template-parts/header.html

@@ -1,4 +1,8 @@
+<!-- wp:group {"align":"full","className":"site-header"} -->
+<div class="wp-block-group alignfull site-header">
 <!-- wp:site-logo /-->
 <!-- wp:site-title /-->
 <!-- wp:navigation {"orientation":"horizontal","textColor":"foreground-light","itemsJustification":"right","fontSize":"small","isResponsive":true,"__unstableLocation":"primary"} -->
-<!-- /wp:navigation -->
+<!-- /wp:navigation -->
+</div>
+<!-- /wp:group -->

mayland-blocks/block-templates/front-page.html

@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header","align":"full", "tagName":"header","className":"site-header"} /-->
+<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
 <!-- wp:group {"tagName":"main"} -->
 <main class="wp-block-group">

mayland-blocks/block-templates/index.html

@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header","align":"full", "tagName":"header","className":"site-header"} /-->
+<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
 <!-- wp:group {"tagName":"main","layout":{"inherit":true}} -->
 <main class="wp-block-group">

mayland-blocks/block-templates/page.html

@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header","align":"full", "tagName":"header","className":"site-header"} /-->
+<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
 <!-- wp:group {"tagName":"main","layout":{"inherit":true}} -->
 <main class="wp-block-group">

mayland-blocks/block-templates/single.html

@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header","align":"full", "tagName":"header","className":"site-header"} /-->
+<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
 <!-- wp:spacer {"height":32} -->
 <div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div>