Update post, page, and index templates (#136)

* Update index template

* Use margins + paddings for titles.

* Tidy up spacing around items.

* Add new default posts grid block pattern, rename older patterns.

* Tidy up single and page templates.

* Add "no separator" variants, add custom templates to theme.json

* Try using responsive variables for most template sizes.

* Remove responsive size from query title.

This space should stay large on smaller screens after all.

* Remove separator from index template.

* Remove unneeded alignment declarations.

* Add back main tag to query.

Co-authored-by: Jeff Ong <[email protected]>

block-template-parts/footer.html

@@ -1,5 +1,5 @@
-<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"max(1.25rem, 5vw)","top":"8rem"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
-<div class="wp-block-group alignwide" style="padding-top:8rem;padding-bottom:max(1.25rem, 5vw)"><!-- wp:site-title {"level":0} /-->
+<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"var(--wp--custom--spacing--small, 1.25rem)","top":"var(--wp--custom--spacing--large, 8rem)"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
+<div class="wp-block-group alignwide" style="padding-top:var(--wp--custom--spacing--large, 8rem);padding-bottom:var(--wp--custom--spacing--small, 1.25rem)"><!-- wp:site-title {"level":0} /-->
 
 <!-- wp:paragraph {"align":"right"} -->
 <p class="has-text-align-right">Proudly Powered by <a href="https://wordpress.org" rel="nofollow">WordPress</a></p>

block-template-parts/header-large-dark.html

@@ -1,5 +1,5 @@
-<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"spacing":{"padding":{"top":"0px","right":"max(1.25rem, 5vw)","left":"max(1.25rem, 5vw)","bottom":"8rem"},"margin":{"bottom":"8rem"}}},"backgroundColor":"foreground","textColor":"background","layout":{"inherit":true}} -->
-<div class="wp-block-group alignfull has-background-color has-foreground-background-color has-text-color has-background has-link-color" style="padding-top:0px;padding-right:max(1.25rem, 5vw);padding-bottom:8rem;padding-left:max(1.25rem, 5vw);margin-bottom:8rem"><!-- wp:template-part {"slug":"header","tagName":"header","layout":{"inherit":true},"align":"wide"} /-->
+<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"spacing":{"padding":{"top":"0px","right":"var(--wp--custom--spacing--small, 1.25rem)","left":"var(--wp--custom--spacing--small, 1.25rem)","bottom":"var(--wp--custom--spacing--large, 8rem)"},"margin":{"bottom":"var(--wp--custom--spacing--large, 8rem)"}}},"backgroundColor":"foreground","textColor":"background","layout":{"inherit":true}} -->
+<div class="wp-block-group alignfull has-background-color has-foreground-background-color has-text-color has-background has-link-color" style="padding-top:0px;padding-right:var(--wp--custom--spacing--small, 1.25rem);padding-bottom:var(--wp--custom--spacing--large, 8rem);padding-left:var(--wp--custom--spacing--small, 1.25rem);margin-bottom:var(--wp--custom--spacing--large, 8rem)"><!-- wp:template-part {"slug":"header","tagName":"header","layout":{"inherit":true},"align":"wide"} /-->
 
 <!-- wp:site-tagline {"align":"wide","style":{"typography":{"fontFamily":"var:preset|font-family|source-serif-pro","fontWeight":"300","fontSize":"clamp(4rem, 8vw, 6.25rem)","lineHeight":"1.15"}}} /--></div>
 <!-- /wp:group -->

block-template-parts/header.html

@@ -1,5 +1,5 @@
-<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"8rem","top":"max(1.25rem, 5vw)"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
-<div class="wp-block-group alignwide" style="padding-top:max(1.25rem, 5vw);padding-bottom:8rem"><!-- wp:group {"layout":{"type":"flex"}} -->
+<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"var(--wp--custom--spacing--large, 8rem)","top":"var(--wp--custom--spacing--small, 1.25rem)"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
+<div class="wp-block-group alignwide" style="padding-top:var(--wp--custom--spacing--small, 1.25rem);padding-bottom:var(--wp--custom--spacing--large, 8rem)"><!-- wp:group {"layout":{"type":"flex"}} -->
 <div class="wp-block-group">
 <!-- wp:site-logo {"width":64} /-->
 

block-templates/404.html

@@ -1,7 +1,7 @@
-<!-- wp:template-part {"slug":"header","tagName":"header","style":{"spacing":{"padding":{"right":"max(1.25rem, 5vw)","left":"max(1.25rem, 5vw)"}}},"layout":{"inherit":true}} /-->
+<!-- wp:template-part {"slug":"header","tagName":"header","style":{"spacing":{"padding":{"right":"var(--wp--custom--spacing--small, 1.25rem)","left":"var(--wp--custom--spacing--small, 1.25rem)"}}},"layout":{"inherit":true}} /-->
 
-<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"right":"max(1.25rem, 5vw)","left":"max(1.25rem, 5vw)"}}}} -->
-<main class="wp-block-group" style="padding-right:max(1.25rem, 5vw);padding-left:max(1.25rem, 5vw)"><!-- wp:group {"layout":{"inherit":true}} -->
+<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"right":"var(--wp--custom--spacing--small, 1.25rem)","left":"var(--wp--custom--spacing--small, 1.25rem)"}}}} -->
+<main class="wp-block-group" style="padding-right:var(--wp--custom--spacing--small, 1.25rem);padding-left:var(--wp--custom--spacing--small, 1.25rem)"><!-- wp:group {"layout":{"inherit":true}} -->
 <div class="wp-block-group"><!-- wp:heading {"style":{"typography":{"fontSize":"clamp(4rem, 40vw, 20rem)","fontWeight":"200","lineHeight":"0"}},"className":"has-text-align-center"} -->
 <h2 class="has-text-align-center" style="font-size:clamp(4rem, 40vw, 20rem);font-weight:200;line-height:0">404</h2>
 <!-- /wp:heading -->
@@ -18,4 +18,4 @@ <h2 class="has-text-align-center" style="font-size:clamp(4rem, 40vw, 20rem);font
 <!-- /wp:group --></main>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer","style":{"spacing":{"padding":{"right":"max(1.25rem, 5vw)","left":"max(1.25rem, 5vw)"}}},"layout":{"inherit":true}} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer","style":{"spacing":{"padding":{"right":"var(--wp--custom--spacing--small, 1.25rem)","left":"var(--wp--custom--spacing--small, 1.25rem)"}}},"layout":{"inherit":true}} /-->

block-templates/index.html

@@ -1,20 +1,36 @@
-<!-- wp:template-part {"slug":"header","tagName":"header","style":{"spacing":{"padding":{"right":"max(1.25rem, 5vw)","left":"max(1.25rem, 5vw)"}}},"layout":{"inherit":true}} /-->
+<!-- wp:template-part {"slug":"header","tagName":"header","style":{"spacing":{"padding":{"right":"var(--wp--custom--spacing--small, 1.25rem)","left":"var(--wp--custom--spacing--small, 1.25rem)"}}},"layout":{"inherit":true}} /-->
 
-<!-- wp:group {"style":{"spacing":{"padding":{"right":"max(1.25rem, 5vw)","left":"max(1.25rem, 5vw)"}}}} -->
-<div class="wp-block-group" style="padding-right:max(1.25rem, 5vw);padding-left:max(1.25rem, 5vw)"><!-- wp:query {"queryId":1,"query":{"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","sticky":"","perPage":12},"tagName":"main","displayLayout":{"type":"flex","columns":3},"layout":{"inherit":true}} -->
+<!-- wp:group {"style":{"spacing":{"padding":{"right":"var(--wp--custom--spacing--small, 1.25rem)","left":"var(--wp--custom--spacing--small, 1.25rem)"}}}} -->
+<div class="wp-block-group" style="padding-right:var(--wp--custom--spacing--small, 1.25rem);padding-left:var(--wp--custom--spacing--small, 1.25rem)">
+
+<!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group"><!-- wp:query-title {"type":"archive","align":"wide","style":{"typography":{"fontSize":"clamp(3rem, 6vw, 4rem)"},"spacing":{"margin":{"bottom":"6rem"}}}} /--></div>
+<!-- /wp:group -->
+
+<!-- wp:query {"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true},"layout":{"inherit":true},"tagName":"main"} -->
 <main class="wp-block-query"><!-- wp:post-template {"align":"wide"} -->
-<!-- wp:post-featured-image {"isLink":true,"width":"100%","height":"318px"} /-->
+<!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group"><!-- wp:post-title {"isLink":true,"align":"wide","style":{"typography":{"fontStyle":"normal","fontWeight":"300"}},"fontSize":"huge"} /-->
 
-<!-- wp:post-title {"isLink":true,"fontSize":"large"} /-->
+<!-- wp:post-featured-image {"isLink":true,"align":"wide","style":{"spacing":{"margin":{"top":"calc(1.75 * var(--wp--style--block-gap))"}}}} /-->
 
-<!-- wp:post-excerpt /-->
+<!-- wp:columns {"align":"wide"} -->
+<div class="wp-block-columns alignwide"><!-- wp:column {"width":"650px"} -->
+<div class="wp-block-column" style="flex-basis:650px"><!-- wp:post-excerpt /-->
 
-<!-- wp:post-date {"format":"F j, Y","isLink":true,"fontSize":"small"} /-->
-<!-- /wp:post-template -->
+<!-- wp:post-date {"isLink":true,"format":"F j, Y","style":{"typography":{"fontStyle":"italic","fontWeight":"400"}},"fontSize":"small"} /--></div>
+<!-- /wp:column -->
 
-<!-- wp:separator {"align":"wide","className":"is-style-wide"} -->
-<hr class="wp-block-separator alignwide is-style-wide"/>
-<!-- /wp:separator -->
+<!-- wp:column {"width":""} -->
+<div class="wp-block-column"></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->
+
+<!-- wp:spacer {"height":112} -->
+<div style="height:112px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+<!-- /wp:group -->
+<!-- /wp:post-template -->
 
 <!-- wp:query-pagination {"paginationArrow":"arrow","align":"wide","layout":{"type":"flex","justifyContent":"space-between"}} -->
 <!-- wp:query-pagination-previous {"fontSize":"small"} /-->
@@ -26,4 +42,4 @@
 <!-- /wp:query --></div>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer","style":{"spacing":{"padding":{"right":"max(1.25rem, 5vw)","left":"max(1.25rem, 5vw)"}}},"layout":{"inherit":true}} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer","style":{"spacing":{"padding":{"right":"var(--wp--custom--spacing--small, 1.25rem)","left":"var(--wp--custom--spacing--small, 1.25rem)"}}},"layout":{"inherit":true}} /-->

block-templates/page-home.html

@@ -1,9 +1,9 @@
 <!-- wp:template-part {"slug":"header-large-dark","tagName":"header"} /-->
 
-<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"right":"max(1.25rem, 5vw)","left":"max(1.25rem, 5vw)"}}}} -->
-<main class="wp-block-group" style="padding-right:max(1.25rem, 5vw);padding-left:max(1.25rem, 5vw)">
+<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"right":"var(--wp--custom--spacing--small, 1.25rem)","left":"var(--wp--custom--spacing--small, 1.25rem)"}}}} -->
+<main class="wp-block-group" style="padding-right:var(--wp--custom--spacing--small, 1.25rem);padding-left:var(--wp--custom--spacing--small, 1.25rem)">
 <!-- wp:post-content {"layout":{"inherit":true}} /-->
 </main>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer","style":{"spacing":{"padding":{"right":"max(1.25rem, 5vw)","left":"max(1.25rem, 5vw)"}}},"layout":{"inherit":true}} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer","style":{"spacing":{"padding":{"right":"var(--wp--custom--spacing--small, 1.25rem)","left":"var(--wp--custom--spacing--small, 1.25rem)"}}},"layout":{"inherit":true}} /-->

block-templates/page-no-separators.html

@@ -0,0 +1,13 @@
+<!-- wp:template-part {"slug":"header","tagName":"header","style":{"spacing":{"padding":{"right":"var(--wp--custom--spacing--small, 1.25rem)","left":"var(--wp--custom--spacing--small, 1.25rem)"}}},"layout":{"inherit":true}} /-->
+
+<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"right":"var(--wp--custom--spacing--small, 1.25rem)","left":"var(--wp--custom--spacing--small, 1.25rem)"}}}} -->
+<main class="wp-block-group" style="padding-right:var(--wp--custom--spacing--small, 1.25rem);padding-left:var(--wp--custom--spacing--small, 1.25rem)"><!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group"><!-- wp:post-title {"align":"wide","style":{"spacing":{"margin":{"bottom":"var(--wp--custom--spacing--medium, 6rem)"}}}} /-->
+
+<!-- wp:post-featured-image {"align":"wide","style":{"spacing":{"margin":{"bottom":"var(--wp--custom--spacing--medium, 6rem)"}}}} /--></div>
+<!-- /wp:group -->
+
+<!-- wp:post-content {"layout":{"inherit":true}} /--></main>
+<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"footer","tagName":"footer","style":{"spacing":{"padding":{"right":"var(--wp--custom--spacing--small, 1.25rem)","left":"var(--wp--custom--spacing--small, 1.25rem)"}}},"layout":{"inherit":true}} /-->

block-templates/page.html

@@ -1,21 +1,21 @@
-<!-- wp:template-part {"slug":"header","tagName":"header","style":{"spacing":{"padding":{"right":"max(1.25rem, 5vw)","left":"max(1.25rem, 5vw)"}}},"layout":{"inherit":true}} /-->
+<!-- wp:template-part {"slug":"header","tagName":"header","style":{"spacing":{"padding":{"right":"var(--wp--custom--spacing--small, 1.25rem)","left":"var(--wp--custom--spacing--small, 1.25rem)"}}},"layout":{"inherit":true}} /-->
 
-<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"right":"max(1.25rem, 5vw)","left":"max(1.25rem, 5vw)"}}}} -->
-<main class="wp-block-group" style="padding-right:max(1.25rem, 5vw);padding-left:max(1.25rem, 5vw)"><!-- wp:group {"layout":{"inherit":true}} -->
-<div class="wp-block-group"><!-- wp:post-title {"align":"wide"} /-->
+<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"right":"var(--wp--custom--spacing--small, 1.25rem)","left":"var(--wp--custom--spacing--small, 1.25rem)"}}}} -->
+<main class="wp-block-group" style="padding-right:var(--wp--custom--spacing--small, 1.25rem);padding-left:var(--wp--custom--spacing--small, 1.25rem)"><!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group"><!-- wp:post-title {"align":"wide","style":{"spacing":{"margin":{"bottom":"var(--wp--custom--spacing--medium, 6rem)"}}}} /-->
 
-<!-- wp:post-featured-image {"align":"wide"} /-->
+<!-- wp:post-featured-image {"align":"wide","style":{"spacing":{"margin":{"bottom":"var(--wp--custom--spacing--medium, 6rem)"}}}} /-->
 
 <!-- wp:separator {"align":"wide","className":"is-style-wide"} -->
 <hr class="wp-block-separator alignwide is-style-wide"/>
 <!-- /wp:separator --></div>
 <!-- /wp:group -->
 
-<!-- wp:spacer {"height":64} -->
-<div style="height:64px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- wp:spacer {"height":32} -->
+<div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:post-content {"layout":{"inherit":true}} /--></main>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer","style":{"spacing":{"padding":{"right":"max(1.25rem, 5vw)","left":"max(1.25rem, 5vw)"}}},"layout":{"inherit":true}} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer","style":{"spacing":{"padding":{"right":"var(--wp--custom--spacing--small, 1.25rem)","left":"var(--wp--custom--spacing--small, 1.25rem)"}}},"layout":{"inherit":true}} /-->

block-templates/single-no-separators.html

@@ -0,0 +1,35 @@
+<!-- wp:template-part {"slug":"header","tagName":"header","style":{"spacing":{"padding":{"right":"var(--wp--custom--spacing--small, 1.25rem)","left":"var(--wp--custom--spacing--small, 1.25rem)"}}},"layout":{"inherit":true}} /-->
+
+<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"right":"var(--wp--custom--spacing--small, 1.25rem)","left":"var(--wp--custom--spacing--small, 1.25rem)"}}}} -->
+<main class="wp-block-group" style="padding-right:var(--wp--custom--spacing--small, 1.25rem);padding-left:var(--wp--custom--spacing--small, 1.25rem)"><!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group"><!-- wp:post-title {"align":"wide","style":{"spacing":{"margin":{"bottom":"var(--wp--custom--spacing--medium, 6rem)"}}}} /-->
+
+<!-- wp:post-featured-image {"align":"wide","style":{"spacing":{"margin":{"bottom":"var(--wp--custom--spacing--medium, 6rem)"}}}} /--></div>
+<!-- /wp:group -->
+
+<!-- wp:post-content {"layout":{"inherit":true}} /-->
+
+<!-- wp:spacer {"height":32} -->
+<div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group"><!-- wp:group {"layout":{"type":"flex"}} -->
+<div class="wp-block-group"><!-- wp:post-date {"format":"F j, Y","style":{"typography":{"fontStyle":"italic","fontWeight":"400"}},"fontSize":"small"} /-->
+
+<!-- wp:post-author {"showAvatar":false,"fontSize":"small"} /-->
+
+<!-- wp:post-terms {"term":"category","fontSize":"small"} /-->
+
+<!-- wp:post-terms {"term":"post_tag","fontSize":"small"} /--></div>
+<!-- /wp:group -->
+
+<!-- wp:spacer {"height":32} -->
+<div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:post-comments /--></div>
+<!-- /wp:group --></main>
+<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"footer","tagName":"footer","style":{"spacing":{"padding":{"right":"var(--wp--custom--spacing--small, 1.25rem)","left":"var(--wp--custom--spacing--small, 1.25rem)"}}},"layout":{"inherit":true}} /-->