Merge pull request #142 from Automattic/fix/whitespace-on-mobile

Fix templates on mobile
Automattic · Dec 5, 2022 · ed2d264 · ed2d264
2 parents 07aff11 + e4d6b2c
commit ed2d264
Show file tree

Hide file tree

Showing 18 changed files with 63 additions and 71 deletions.
diff --git a/parts/header.html b/parts/header.html
@@ -1,5 +1,5 @@
-<!-- wp:group {"style":{"spacing":{"padding":{"right":"20px","left":"20px"}}},"layout":{"inherit":"true","type":"constrained","contentSize":"1000px"}} -->
-<div class="wp-block-group" style="padding-right:20px;padding-left:20px"><!-- wp:group {"layout":{"type":"flex","justifyContent":"space-between"}} -->
+<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:group {"layout":{"type":"flex","justifyContent":"space-between"}} -->
 <div class="wp-block-group"><!-- wp:group {"layout":{"type":"flex"}} -->
 <div class="wp-block-group"><!-- wp:site-logo {"width":64} /-->
 

diff --git a/patterns/footer.php b/patterns/footer.php
@@ -7,8 +7,8 @@
  */
 ?>
 
-<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"80px","bottom":"0px","right":"20px","left":"20px"}},"border":{"top":{"width":"1px"}}},"layout":{"type":"constrained","contentSize":"1000px"}} -->
-<div class="wp-block-group alignfull" style="border-top-width:1px;padding-top:80px;padding-right:20px;padding-bottom:0px;padding-left:20px"><!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"40px","left":"40px"}}}} -->
+<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"80px","bottom":"0px"}},"border":{"top":{"width":"1px"}}},"layout":{"type":"constrained","contentSize":"1000px"}} -->
+<div class="wp-block-group alignfull" style="border-top-width:1px;padding-top:80px;padding-bottom:0px"><!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"40px","left":"40px"}}}} -->
 <div class="wp-block-columns"><!-- wp:column {"width":"81.7%","style":{"typography":{"lineHeight":"1.3"}}} -->
 <div class="wp-block-column" style="line-height:1.3;flex-basis:81.7%"><!-- wp:columns {"style":{"border":{"left":{"width":"1px"}},"spacing":{"padding":{"left":"20px"},"blockGap":{"top":"10px","left":"20px"}}},"className":"course-footer-links-vertical-space"} -->
 <div class="wp-block-columns course-footer-links-vertical-space" style="border-left-width:1px;padding-left:20px"><!-- wp:column {"verticalAlignment":"center","width":"128px"} -->

diff --git a/style.css b/style.css
@@ -371,12 +371,6 @@ body.page-template-page-wide-width footer .wp-block-group {
 	margin-block-end: 0;
 }
 
-/* Add some padding to the header */
-.page-template-page-wide-width header {
-	padding-left: clamp(1.25rem,((2vw - 0.75rem) * 10) , 6.25rem);
-	padding-right: clamp(1.25rem,((2vw - 0.75rem) * 10) , 6.25rem);
-}
-
 /*
 * Sensei-specific styles
 */

diff --git a/templates/404.html b/templates/404.html
@@ -1,7 +1,7 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"tagName":"main","layout":{"inherit":true,"type":"constrained"},"style":{"spacing":{"blockGap":"var:preset|spacing|50","margin":{"left":"20px","right":"20px","bottom":"80px"}}}} -->
-<main class="wp-block-group" style="margin-right:20px;margin-bottom:80px;margin-left:20px">
+<!-- wp:group {"tagName":"main","layout":{"inherit":true,"type":"constrained"},"style":{"spacing":{"blockGap":"var:preset|spacing|50","margin":{"bottom":"80px"}}}} -->
+<main class="wp-block-group" style="margin-bottom:80px;">
 
 	<!-- wp:pattern {"slug":"course/404"} /-->
 

diff --git a/templates/archive.html b/templates/archive.html
@@ -1,7 +1,7 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"style":{"spacing":{"margin":{"left":"20px","right":"20px","bottom":"80px"}}},"layout":{"type":"constrained","contentSize":"1000px","wideSize":"1200px"}} -->
-<div class="wp-block-group" style="margin-right:20px;margin-bottom:80px;margin-left:20px">
+<!-- wp:group {"style":{"spacing":{"margin":{"bottom":"80px"}}},"layout":{"type":"constrained","contentSize":"1000px","wideSize":"1200px"}} -->
+<div class="wp-block-group" style="margin-bottom:80px">
 	<!-- wp:query {"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"taxQuery":null,"parents":[]},"tagName":"main","displayLayout":{"type":"flex","columns":3},"layout":{"type":"default"}} -->
 	<main class="wp-block-query">
 		<!-- wp:query-title {"type":"archive","showPrefix":false,"style":{"spacing":{"margin":{"bottom":"5rem"}}}} /-->

diff --git a/templates/index.html b/templates/index.html
@@ -1,7 +1,7 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"style":{"spacing":{"margin":{"left":"20px","right":"20px","bottom":"80px"}}},"layout":{"type":"constrained"}} -->
-<div class="wp-block-group" style="margin-right:20px;margin-bottom:80px;margin-left:20px">
+<!-- wp:group {"style":{"spacing":{"margin":{"bottom":"80px"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group" style="margin-bottom:80px">
 	<!-- wp:query {"tagName":"main","layout":{"inherit":true}} -->
 	<main class="wp-block-query">
 		<!-- wp:post-template -->

diff --git a/templates/page.html b/templates/page.html
@@ -1,10 +1,9 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"tagName":"main","style":{"spacing":{"blockGap":"0","padding":{"top":"0","right":"0","bottom":"0","left":"0"}}},"layout":{"type":"constrained","contentSize":"1000px"}} -->
-<main class="wp-block-group" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
-  <!-- wp:group {"style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"blockGap":"0","margin":{"top":"0","bottom":"0"}}},"layout":{"inherit":true,"type":"constrained","contentSize":"1000px"}} -->
-  <div class="wp-block-group"
-    style="margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
+<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"bottom":"80px"}}},"layout":{"type":"constrained","contentSize":"1000px"}} -->
+<main class="wp-block-group" style="margin-bottom:80px">
+  <!-- wp:group {"layout":{"inherit":true,"type":"constrained","contentSize":"1000px"}} -->
+  <div class="wp-block-group">
     <!-- wp:post-title {"level":1,"align":"wide","style":{"spacing":{"margin":{"bottom":"2.5rem"}}}} /-->
   </div>
   <!-- /wp:group -->

diff --git a/templates/search.html b/templates/search.html
@@ -1,7 +1,7 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"style":{"spacing":{"margin":{"right":"20px","left":"20px","bottom":"80px"}}},"layout":{"type":"constrained","contentSize":"1000px","wideSize":"1200px"}} -->
-<div class="wp-block-group" style="margin-right:20px;margin-bottom:80px;margin-left:20px">
+<!-- wp:group {"style":{"spacing":{"margin":{"bottom":"80px"}}},"layout":{"type":"constrained","contentSize":"1000px","wideSize":"1200px"}} -->
+<div class="wp-block-group" style="margin-bottom:80px">
   <!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"5rem","left":"5rem"}}}} -->
   <div class="wp-block-columns">
     <!-- wp:column {"width":"61.4%","style":{"spacing":{"blockGap":"0rem"}},"layout":{"type":"constrained"}} -->

diff --git a/templates/single-column-featured-no-title.html b/templates/single-column-featured-no-title.html
@@ -1,10 +1,9 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"tagName":"main","style":{"spacing":{"blockGap":"0","padding":{"top":"0","right":"0","bottom":"0","left":"0"}}}} -->
-<main class="wp-block-group" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
-  <!-- wp:group {"style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"blockGap":"0","margin":{"top":"0","bottom":"0"}}},"layout":{"inherit":true,"type":"constrained","contentSize":"1000px"}} -->
-  <div class="wp-block-group"
-    style="margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
+<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"bottom":"80px"}}}} -->
+<main class="wp-block-group" style="margin-bottom:80px">
+  <!-- wp:group {"style":{"layout":{"inherit":true,"type":"constrained","contentSize":"1000px"}} -->
+  <div class="wp-block-group">
     <!-- wp:post-featured-image /-->
   </div>
   <!-- /wp:group -->
@@ -75,4 +74,4 @@
 </main>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
diff --git a/templates/single-column-featured-title.html b/templates/single-column-featured-title.html
@@ -1,10 +1,9 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"tagName":"main","style":{"spacing":{"blockGap":"0","padding":{"top":"0","right":"0","bottom":"0","left":"0"}}},"layout":{"type":"constrained","contentSize":"1000px"}} -->
-<main class="wp-block-group" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
-  <!-- wp:group {"style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"blockGap":"0","margin":{"top":"0","bottom":"0"}}},"layout":{"inherit":true,"type":"constrained","contentSize":"1000px"}} -->
-  <div class="wp-block-group"
-    style="margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
+<!-- wp:group {"tagName":"main","style":{"spacing":{"margin:{"bottom":"80px"}}},"layout":{"type":"constrained","contentSize":"1000px"}} -->
+<main class="wp-block-group" style="margin-bottom:80px;">
+  <!-- wp:group {"layout":{"inherit":true,"type":"constrained","contentSize":"1000px"}} -->
+  <div class="wp-block-group">
     <!-- wp:post-title {"level":1,"align":"wide","style":{"spacing":{"margin":{"bottom":"5rem"}}}} /-->
 
     <!-- wp:post-featured-image /-->
@@ -77,4 +76,4 @@
 </main>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
diff --git a/templates/single-column-no-featured-no-title.html b/templates/single-column-no-featured-no-title.html
@@ -1,7 +1,7 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"tagName":"main","style":{"spacing":{"blockGap":"0","padding":{"top":"0","right":"0","bottom":"0","left":"0"}}},"layout":{"type":"constrained","contentSize":"1000px"}} -->
-<main class="wp-block-group" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
+<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"bottom":"80px"}}},"layout":{"type":"constrained","contentSize":"1000px"}} -->
+<main class="wp-block-group" style="margin-bottom:80px;">
   <!-- wp:post-content {"layout":{"inherit":true,"contentSize":"1000px"}} /-->
 
   <!-- wp:group {"layout":{"inherit":true,"type":"constrained"}} -->
@@ -68,4 +68,4 @@
 </main>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
diff --git a/templates/single-column-no-featured-title.html b/templates/single-column-no-featured-title.html
@@ -1,10 +1,9 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"tagName":"main","style":{"spacing":{"blockGap":"0","padding":{"top":"0","right":"0","bottom":"0","left":"0"}}},"layout":{"type":"constrained","contentSize":"1000px"}} -->
-<main class="wp-block-group" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
-  <!-- wp:group {"style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"blockGap":"0","margin":{"top":"0","bottom":"0"}}},"layout":{"inherit":true,"type":"constrained","contentSize":"1000px"}} -->
-  <div class="wp-block-group"
-    style="margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
+<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"bottom":"80px"}}},"layout":{"type":"constrained","contentSize":"1000px"}} -->
+<main class="wp-block-group" style="margin-bottom:80px;">
+  <!-- wp:group {"layout":{"inherit":true,"type":"constrained","contentSize":"1000px"}} -->
+  <div class="wp-block-group">
     <!-- wp:post-title {"level":1,"align":"wide","style":{"spacing":{"margin":{"bottom":"5rem"}}}} /-->
   </div>
   <!-- /wp:group -->
@@ -75,4 +74,4 @@
 </main>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
diff --git a/templates/single-course.html b/templates/single-course.html
@@ -1,9 +1,9 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
-<!-- wp:group {"tagName":"main","style":{"spacing":{"blockGap":"0","padding":{"top":"0","right":"0","bottom":"0","left":"0"}}}} -->
-<main class="wp-block-group" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
-  <!-- wp:group {"style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"blockGap":"0","margin":{"top":"0","bottom":"0"}}},"layout":{"inherit":true,"type":"constrained","contentSize":"1000px"}} -->
-  <div class="wp-block-group"
-    style="margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
+
+<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"bottom":"80px"}}}} -->
+<main class="wp-block-group" style="margin-bottom:80px;">
+  <!-- wp:group {"layout":{"inherit":true,"type":"constrained","contentSize":"1000px"}} -->
+  <div class="wp-block-group">
     <!-- wp:post-title {"level":1,"align":"wide","style":{"spacing":{"margin":{"bottom":"5rem"}}}} /-->
   </div>
   <!-- /wp:group -->
@@ -74,4 +74,4 @@
 </main>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
diff --git a/templates/single.html b/templates/single.html
@@ -1,7 +1,7 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"style":{"spacing":{"margin":{"left":"20px","right":"20px","bottom":"80px"}}},"layout":{"type":"constrained","contentSize":"1000px","wideSize":"1000px"}} -->
-<div class="wp-block-group" style="margin-right:20px;margin-bottom:80px;margin-left:20px">
+<!-- wp:group {"style":{"spacing":{"margin":{"bottom":"80px"}}},"layout":{"type":"constrained","contentSize":"1000px","wideSize":"1000px"}} -->
+<div class="wp-block-group" style="margin-bottom:80px">
 
 <!-- wp:group {"layout":{"type":"constrained","contentSize":"666px","justifyContent":"left"}} -->
 <div class="wp-block-group"><!-- wp:post-title {"level":1,"align":"wide","style":{"typography":{"textTransform":"uppercase"}}} /--></div>

diff --git a/templates/wide-featured-no-title.html b/templates/wide-featured-no-title.html
@@ -1,11 +1,9 @@
-
-
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
-<!-- wp:group {"tagName":"main","style":{"spacing":{"blockGap":"0","padding":{"top":"0","right":"0","bottom":"0","left":"0"}}}} -->
-<main class="wp-block-group" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
-  <!-- wp:group {"style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"blockGap":"0","margin":{"top":"0","bottom":"0"}}},"layout":{"inherit":true,"type":"constrained","contentSize":"1000px"}} -->
-  <div class="wp-block-group"
-    style="margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
+
+<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"bottom":"80px"}}}} -->
+<main class="wp-block-group" style="margin-bottom:80px;">
+  <!-- wp:group {"layout":{"inherit":true,"type":"constrained","contentSize":"1000px"}} -->
+  <div class="wp-block-group">
     <!-- wp:post-featured-image /-->
   </div>
   <!-- /wp:group -->
@@ -76,4 +74,4 @@
 </main>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
diff --git a/templates/wide-featured-title.html b/templates/wide-featured-title.html
@@ -1,10 +1,9 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"tagName":"main","style":{"spacing":{"blockGap":"0","padding":{"top":"0","right":"0","bottom":"0","left":"0"}}}} -->
-<main class="wp-block-group" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
-  <!-- wp:group {"style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"blockGap":"0","margin":{"top":"0","bottom":"0"}}},"layout":{"inherit":true,"type":"constrained","contentSize":"1000px"}} -->
-  <div class="wp-block-group"
-    style="margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
+<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"bottom":"80px"}}}} -->
+<main class="wp-block-group" style="margin-bottom:80px;">
+  <!-- wp:group {"layout":{"inherit":true,"type":"constrained","contentSize":"1000px"}} -->
+  <div class="wp-block-group">
     <!-- wp:post-title {"level":1,"align":"wide","style":{"spacing":{"margin":{"bottom":"5rem"}}}} /-->
 
     <!-- wp:post-featured-image /-->
@@ -77,4 +76,4 @@
 </main>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
diff --git a/templates/wide-no-featured-no-title.html b/templates/wide-no-featured-no-title.html
@@ -1,7 +1,7 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"tagName":"main","style":{"spacing":{"blockGap":"0","padding":{"top":"0","right":"0","bottom":"0","left":"0"}}}} -->
-<main class="wp-block-group" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
+<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"bottom":"80px"}}}} -->
+<main class="wp-block-group" style="margin-bottom:80px;">
   <!-- wp:post-content {"layout":{"inherit":true}} /-->
 
   <!-- wp:group {"layout":{"inherit":true,"type":"constrained"}} -->
@@ -68,4 +68,4 @@
 </main>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
diff --git a/theme.json b/theme.json
@@ -337,7 +337,8 @@
 					"slug": "xxx-large"
 				}
 			]
-		}
+		},
+		"useRootPaddingAwareAlignments": true
 	},
 	"styles": {
 		"blocks": {
@@ -897,7 +898,11 @@
 			}
 		},
 		"spacing": {
-			"blockGap": "2.5rem"
+			"blockGap": "2.5rem",
+			"padding": {
+				"right": "1.25rem",
+				"left": "1.25rem"
+			}
 		},
 		"typography": {
 			"fontFamily": "var(--wp--preset--font-family--body)",