Use the Gutenberg flex layout.

Automattic · Aug 4, 2021 · f3b4de4 · f3b4de4
1 parent 8f941d0
commit f3b4de4
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 10 deletions.
diff --git a/skatepark/assets/theme.css b/skatepark/assets/theme.css
diff --git a/skatepark/block-templates/index.html b/skatepark/block-templates/index.html
@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+<!-- wp:template-part {"slug":"header","tagName":"header","layout":{"type":"flex"},"align":"full"} /-->
 
 <!-- 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">

diff --git a/skatepark/block-templates/singular.html b/skatepark/block-templates/singular.html
@@ -0,0 +1,21 @@
+<!-- wp:template-part {"slug":"header","tagName":"header","layout":{"type":"flex"},"align":"full"} /-->
+
+<!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group">
+<!-- wp:post-title /-->
+</div>
+<!-- /wp:group -->
+
+<!-- wp:group {"tagName":"main"} -->
+<main class="wp-block-group">
+<!-- wp:post-featured-image {"align":"full"} /-->
+
+<!-- wp:post-content {"layout":{"inherit":true}} /-->
+</main>
+<!-- /wp:group -->
+
+<!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group"><!-- wp:post-comments /--></div>
+<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"footer","tagName":"footer","layout":{"inherit":true},"className":"site-footer-container"} /-->
diff --git a/skatepark/sass/templates/_header.scss b/skatepark/sass/templates/_header.scss
@@ -1,10 +1,6 @@
 header {
-	display: flex; // Apply a cluster layout (page 109 of the every-layout.dev PDF)
-	justify-content: space-between;
-	align-items: center;
+	justify-content: space-between; // Apply a cluster (flex?) layout
 	flex-wrap: wrap-reverse;
-	padding-right: var(--wp--custom--post-content--padding--right);
-	padding-left: var(--wp--custom--post-content--padding--left);
 	> * { 
 		flex-grow: 1;
 		> * { // Apply a stack layout (page 69 of the every-layout.dev PDF)