Blockbase: revise padding (#3968)

* Quadrat: Fix mobile spacing

* reset indentation

* reset indentation

* move template rules into their own file

* Use classes to add padding around the header, post titles + featured images.

* Use page-content class on query, use excerpt block instead of post-content.

* Add page-content class to alignments and templates.

* Add a post-header class.

* Remove padding on the div.

Co-authored-by: Ben Dwyer <ben@scruffian.com>

blockbase/assets/ponyfill.css

@@ -60,6 +60,9 @@ img {
 	width: calc( 100% + var(--wp--custom--post-content--padding--left) + var(--wp--custom--post-content--padding--right));
 }
 
+.site-header,
+.post-header,
+.page-content,
 .alignfull p {
 	padding-left: var(--wp--custom--post-content--padding--left);
 	padding-right: var(--wp--custom--post-content--padding--right);

blockbase/block-template-parts/header.html

@@ -1,5 +1,5 @@
-<!-- wp:group {"align":"full","tagName":"header","style":{"spacing":{"padding":{"right":"35px","left":"35px"}}},"className":"site-header"} -->
-<div class="wp-block-group alignfull site-header" style="padding-right:35px;padding-left:35px">
+<!-- wp:group {"align":"full","className":"site-header"} -->
+<div class="wp-block-group alignfull site-header">
 	<!-- wp:site-title /-->
 	<!-- wp:navigation {"isResponsive":true} /-->
 </div>

blockbase/block-templates/404.html

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

blockbase/block-templates/index.html

@@ -1,18 +1,11 @@
 <!-- wp:template-part {"slug":"header","tagName":"header","layout":{"inherit":true}} /-->
 
-<!-- wp:query {"queryId":1,"query":{"perPage":10,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","sticky":""}} -->
-<div class="wp-block-query">
+<!-- wp:query {"className":"page-content","layout":{"inherit":true},"queryId":1,"query":{"perPage":10,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","sticky":""}} -->
+<div class="wp-block-query page-content">
 <!-- wp:query-loop -->
-
-<!-- wp:group {"layout":{"inherit":true}} -->
-<div class="wp-block-group">
-<!-- wp:post-title {"isLink":true} /-->
-<!-- wp:post-featured-image /-->
-</div>
-<!-- /wp:group -->
-
-<!-- wp:post-content {"layout":{"inherit":true}} /-->
-
+	<!-- wp:post-title {"isLink":true} /-->
+	<!-- wp:post-featured-image {"isLink":true} /-->
+	<!-- wp:post-excerpt /-->
 <!-- /wp:query-loop -->
 <!-- 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}} -->
-<div class="wp-block-group">
+<!-- wp:group {"layout":{"inherit":true},"className":"page-content"} -->
+<div class="wp-block-group page-content">
 
 <!-- wp:heading -->
 <h2>Results:</h2>

blockbase/block-templates/singular.html

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

blockbase/sass/base/_alignment.scss

@@ -4,6 +4,9 @@
 	width: calc( 100% + var(--wp--custom--post-content--padding--left) + var(--wp--custom--post-content--padding--right) )
 }
 
+.site-header,
+.post-header,
+.page-content,
 .alignfull p {
 	padding-left: var(--wp--custom--post-content--padding--left);
 	padding-right: var(--wp--custom--post-content--padding--right);

blockbase/theme.json

@@ -159,8 +159,8 @@
 			},
 			"post-content": {
 				"padding": {
-					"left": "var(--wp--custom--margin--horizontal)",
-					"right": "var(--wp--custom--margin--horizontal)"
+					"left": "20px",
+					"right": "20px"
 				}
 			},
 			"pullquote": {