Payton (work in progress) (#4887)

* Add custom block templates and template parts.
* Update the custom colors, typography, and block settings.
* Update header design.
* Update the default blog template.
* Update styling of post meta, separators, and post navigation links.

payton/assets/theme.css

@@ -1,5 +1,90 @@
+@charset "UTF-8";
+.wp-block-separator {
+	border-width: 0 0 2px 0;
+}
+
 .wp-block-separator.is-style-wide {
 	border-width: 0 0 2px 0;
 }
 
+.wp-block-post-navigation-link {
+	color: var(--wp--custom--color--tertiary);
+	border-top: 2px solid;
+	display: flex;
+	padding-top: 1em;
+}
+
+.post-navigation-link-next {
+	flex-direction: row-reverse;
+}
+
+.post-navigation-link-next a {
+	margin-right: 0.5em;
+}
+
+.post-navigation-link-previous a {
+	margin-left: 0.5em;
+}
+
+.next-prev-links .wp-block-column,
+.next-prev-links .wp-block-column:not(:only-child) {
+	flex-basis: 40% !important;
+}
+
+.next-prev-links .wp-block-column:not(:first-child),
+.next-prev-links .wp-block-column:not(:only-child):not(:first-child) {
+	margin-left: 20%;
+}
+
+.post-meta {
+	align-items: center;
+	justify-content: center;
+}
+
+.wp-block-group .post-meta {
+	gap: calc( var(--wp--custom--gap--baseline) + 1px);
+}
+
+.post-meta > *:not(:first-child):before {
+	align-items: center;
+	background: transparent;
+	color: var(--wp--custom--color--foreground);
+	content: "·";
+	display: flex;
+	margin-right: 0;
+	-webkit-mask-image: none;
+	mask-image: none;
+}
+
+.post-meta > *:first-child:before {
+	content: none;
+}
+
+.post-meta > * > * {
+	color: var(--wp--custom--color--foreground);
+	font-size: var(--wp--custom--font-sizes--tiny);
+}
+
+.post-meta .wp-block-post-author__content {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
+.post-meta .wp-block-post-author__name {
+	line-height: 1;
+}
+
+.post-meta .wp-block-post-author__avatar {
+	margin-right: 0.5em;
+	align-items: center;
+	display: flex;
+}
+
+.post-meta .wp-block-post-author__avatar .avatar {
+	border-radius: 50%;
+	height: 1.25em;
+	width: 1.25em;
+}
+
 /*# sourceMappingURL=theme.css.map */

payton/block-template-parts/footer.html

@@ -0,0 +1,9 @@
+<!-- wp:group {"className":"site-footer","style":{"spacing":{"padding":{"top":"30px","bottom":"30px"}}}} -->
+<div class="wp-block-group site-footer" style="padding-top:30px;padding-bottom: 30px">
+
+<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} -->
+<p class="has-text-align-center" style="font-size:var(--wp--custom--font-sizes--tiny);">Proudly Powered by <a href="https://wordpress.org" rel="nofollow">WordPress</a></p>
+<!-- /wp:paragraph -->
+
+</div>
+<!-- /wp:group -->

payton/block-template-parts/header.html

@@ -1,8 +1,19 @@
-<!-- wp:group {"className":"site-header","layout":{"type":"flex"},"style":{"spacing":{"padding":{"bottom":"40px"}}}} -->
-<div class="wp-block-group site-header" style="padding-bottom:40px">
-	<!-- wp:site-logo /-->
-	<!-- wp:site-title /-->
-	<!-- wp:site-tagline {"style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} /-->
-	<!-- wp:navigation {"className":"is-style-blockbase-navigation-improved-responsive","itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary","__unstableSocialLinks":"social"} /-->
-</div>
-<!-- /wp:group -->
+<!-- wp:group {"tagName":"header","style":{"spacing":{"padding":{"top":"10px"}}},"className":"site-header"} -->
+<header class="wp-block-group site-header" style="padding-top:10px">
+	<!-- wp:navigation {"itemsJustification":"center","isResponsive":true,"__unstableLocation":"primary","style":{"typography":{"fontFamily":"var:preset|font-family|overpass"}},"fontSize":"small"} -->
+	<!-- /wp:navigation -->
+
+	<!-- wp:separator {"color":"tertiary","align":"full","className":"is-style-wide"} -->
+	<hr class="wp-block-separator alignfull has-text-color has-background has-tertiary-background-color has-tertiary-color is-style-wide"/>
+	<!-- /wp:separator -->
+
+	<!-- wp:group {"style":{"spacing":{"padding":{"top":"6vh","bottom":"6vh"}}}} -->
+	<div class="wp-block-group" style="padding-top:6vh;padding-bottom:6vh">
+		<!-- wp:site-logo {"align":"center"} /-->
+
+		<!-- wp:site-title {"textAlign":"center","style":{"spacing":{"padding":{"bottom":"12px"}}},"fontSize":"large"} /-->
+
+		<!-- wp:site-tagline {"textAlign":"center","fontSize":"small"} /--></div>
+	<!-- /wp:group -->
+</header>
+<!-- /wp:group -->

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

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

payton/block-templates/index.html

@@ -1,31 +1,41 @@
-<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+<!-- wp:template-part {"slug":"header"} /-->
 
-<!-- wp:query {"tagName":"main"} -->
+<!-- wp:query {"tagName":"main","layout":{"inherit":true},"query":{"perPage":5,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","sticky":"","inherit":true}} -->
 <main class="wp-block-query">
-<!-- wp:post-template -->
-<!-- wp:group {"layout":{"inherit":true}} -->
-<div class="wp-block-group">
-	<!-- wp:post-title {"textAlign":"center","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:separator {"color":"tertiary"} -->
+	<hr class="wp-block-separator has-text-color has-background has-tertiary-background-color has-tertiary-color"/>
+	<!-- /wp:separator -->
+
+	<!-- wp:spacer {"height":30} -->
+	<div style="height:30px" 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">
-	<!-- wp:query-pagination -->
-	<div class="wp-block-query-pagination"><!-- wp:query-pagination-previous /-->
 
-		<!-- wp:query-pagination-numbers /-->
 
-		<!-- wp:query-pagination-next /--></div>
-	<!-- /wp:query-pagination -->
-	</div>
-	<!-- /wp:group -->
+	<!-- wp:post-template {"align":"wide"} -->
+		<!-- wp:group -->
+		<div class="wp-block-group">
+		<!-- wp:post-date {"isLink":false,"textAlign":"center","style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} /-->
+		<!-- wp:post-title {"isLink":true, "level": 3, "textAlign":"center"} /-->
+		<!-- wp:group {"layout":{"inherit":true}} -->
+		<div class="wp-block-group">
+		<!-- wp:post-featured-image {"isLink":true} /-->
+		<!-- wp:post-excerpt /-->
+		</div>
+		<!-- /wp:group -->
+		<!-- wp:spacer {"height":60} -->
+		<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
+		<!-- /wp:spacer -->
+		</div>
+		<!-- /wp:group -->
+	<!-- /wp:post-template -->
+
+	<!-- wp:query-pagination {"align":"wide","paginationArrow":"arrow"} -->
+	<div class="wp-block-query-pagination alignwide">
+	<!-- wp:query-pagination-previous /-->
+	<!-- wp:query-pagination-numbers /-->
+	<!-- wp:query-pagination-next /-->
+	</div><!-- /wp:query-pagination -->
 </main>
 <!-- /wp:query -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer","layout":{"inherit":true},"className":"site-footer-container"} /-->
+<!-- wp:template-part {"slug":"footer","className":"site-footer-container"} /-->

payton/block-templates/page.html

@@ -0,0 +1,28 @@
+<!-- wp:template-part {"slug":"header"} /-->
+
+<!-- wp:group {"style":{"spacing":{"padding":{"right":"20px","left":"20px"}}},"layout":{"inherit":true}} -->
+<div class="wp-block-group" style="padding-right:20px;padding-left:20px">
+	<!-- wp:separator {"color":"tertiary"} -->
+	<hr class="wp-block-separator has-text-color has-background has-tertiary-background-color has-tertiary-color"/>
+	<!-- /wp:separator -->
+
+	<!-- wp:spacer {"height":30} -->
+	<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- /wp:spacer -->
+
+	<!-- wp:post-title {"textAlign":"center","level":1} /-->
+	<!-- wp:post-featured-image /-->
+</div>
+<!-- /wp:group -->
+
+<!-- wp:group {"tagName":"main"} -->
+<main class="wp-block-group">
+	<!-- 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","className":"site-footer-container"} /-->

payton/block-templates/single.html

@@ -0,0 +1,65 @@
+<!-- wp:template-part {"slug":"header"} /-->
+
+<!-- wp:group {"tagName":"main"} -->
+<main class="wp-block-group">
+
+	<!-- wp:separator {"color":"tertiary"} -->
+	<hr class="wp-block-separator has-text-color has-background has-tertiary-background-color has-tertiary-color"/>
+	<!-- /wp:separator -->
+
+	<!-- wp:spacer {"height":30} -->
+	<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- /wp:spacer -->
+
+	<!-- wp:group {"className":"post-meta","layout":{"type":"flex"}} -->
+	<div class="wp-block-group post-meta">
+		<!-- wp:post-date {"textAlign":"center","isLink":true,"style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} /-->
+		<!-- wp:post-terms {"term":"category","textAlign":"center","style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} /-->
+	</div>
+	<!-- /wp:group -->
+
+	<!-- wp:group {"layout":{"inherit":true}} -->
+	<div class="wp-block-group">
+		<!-- wp:post-title {"textAlign":"center","level":1,"align":"wide"} /-->
+		<!-- wp:post-featured-image {"align":"wide"} /-->
+	</div>
+	<!-- /wp:group -->
+
+
+	<!-- wp:spacer {"height":30} -->
+	<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- /wp:spacer -->
+
+	<!-- wp:post-content {"layout":{"inherit":true}} /-->
+
+	<!-- wp:spacer {"height":150} -->
+	<div style="height:150px" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- /wp:spacer -->
+
+	<!-- wp:group {"layout":{"inherit":true}} -->
+	<div class="wp-block-group">
+		<!-- wp:columns {"align":"wide","className":"next-prev-links"} -->
+		<div class="wp-block-columns alignwide next-prev-links">
+			<!-- wp:column -->
+			<div class="wp-block-column">
+				<!-- wp:post-navigation-link {"type":"previous","label":"←","showTitle":true} /-->
+			</div>
+			<!-- /wp:column -->
+			<!-- wp:column -->
+			<div class="wp-block-column">
+				<!-- wp:post-navigation-link {"textAlign":"right","label":"→","showTitle":true} /-->
+			</div>
+			<!-- /wp:column -->
+		</div>
+		<!-- /wp:columns -->
+		<!-- wp:spacer {"height":150} -->
+		<div style="height:150px" aria-hidden="true" class="wp-block-spacer"></div>
+		<!-- /wp:spacer -->
+		<!-- wp:post-comments /-->
+	</div>
+	<!-- /wp:group -->
+
+</main>
+<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"footer","className":"site-footer-container"} /-->

payton/child-theme.json

@@ -16,7 +16,7 @@
                 },
                 {
                     "slug": "foreground",
-                    "color": "#747577",
+                    "color": "#323232",
                     "name": "Foreground"
                 },
                 {
@@ -103,7 +103,7 @@
 			"core/post-title": {
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--overpass)",
-					"fontSize": "min(max(24px, 5vw), 48px)",
+					"fontSize": "36px",
 					"fontWeight": "700",
 					"lineHeight": 1.2
 				},
@@ -112,7 +112,7 @@
 				},
 				"spacing": {
 					"margin": {
-						"bottom": "0.5em"
+						"bottom": "1em"
 					}
 				}
 			},
@@ -125,37 +125,43 @@
         "elements": {
             "h1": {
                 "typography": {
-                    "fontFamily": "var(--wp--preset--font-family--overpass)"
+                    "fontFamily": "var(--wp--preset--font-family--overpass)",
+                    "fontSize": "36px"
                 }
             },
             "h2": {
                 "typography": {
-                    "fontFamily": "var(--wp--preset--font-family--overpass)"
+                    "fontFamily": "var(--wp--preset--font-family--overpass)",
+                    "fontSize": "30px"
                 }
             },
             "h3": {
                 "typography": {
-                    "fontFamily": "var(--wp--preset--font-family--overpass)"
+                    "fontFamily": "var(--wp--preset--font-family--overpass)",
+                    "fontSize": "24px"
                 }
             },
             "h4": {
                 "typography": {
-                    "fontFamily": "var(--wp--preset--font-family--overpass)"
+                    "fontFamily": "var(--wp--preset--font-family--overpass)",
+                    "fontSize": "18px"
                 }
             },
             "h5": {
                 "typography": {
-                    "fontFamily": "var(--wp--preset--font-family--overpass)"
+                    "fontFamily": "var(--wp--preset--font-family--overpass)",
+                    "fontSize": "16px"
                 }
             },
             "h6": {
                 "typography": {
-                    "fontFamily": "var(--wp--preset--font-family--overpass)"
+                    "fontFamily": "var(--wp--preset--font-family--overpass)",
+                    "fontSize": "16px"
                 }
             }
         },
 		"spacing": {
-			"blockGap": "0.5em"
+			"blockGap": "1em"
 		},
 		"typography": {
 			"fontFamily": "var(--wp--preset--font-family--source-serif-pro)",

payton/sass/blocks/_post-navigation-link.scss

@@ -0,0 +1,28 @@
+.wp-block-post-navigation-link {
+	color: var(--wp--custom--color--tertiary);
+	border-top: 2px solid;
+	display: flex;
+	padding-top: 1em;
+}
+.post-navigation-link-next {
+	flex-direction: row-reverse;
+	a {
+		margin-right: 0.5em;
+	}
+}
+.post-navigation-link-previous {
+	a {
+		margin-left: 0.5em;
+	}
+}
+
+.next-prev-links {
+	.wp-block-column,
+	.wp-block-column:not(:only-child) {
+		flex-basis: 40% !important; // This is needed to override the collapsing columns in Gutenberg
+
+		&:not(:first-child) {
+			margin-left: 20%;
+		}
+	}
+}

payton/sass/blocks/_separator.scss

@@ -1,4 +1,6 @@
 .wp-block-separator {
+	border-width: 0 0 2px 0;
+
 	&.is-style-wide {
 		border-width: 0 0 2px 0;
 	}

payton/sass/templates/_meta.scss

@@ -0,0 +1,55 @@
+.post-meta {
+	align-items: center;
+	justify-content: center;
+
+	.wp-block-group & {
+		// 1px needed to account for the separator
+		gap: calc( var(--wp--custom--gap--baseline) + 1px);
+	}
+
+	> * {
+		&:not(:first-child):before {
+			align-items: center;
+			background: transparent;
+			color: var(--wp--custom--color--foreground);
+			content: "·";
+			display: flex;
+			margin-right: 0;
+			-webkit-mask-image: none;
+			mask-image: none;
+		}
+
+		&:first-child:before {
+			// Hide the date icon. This should be configurable in Blockbase:
+			// https://github.com/Automattic/themes/issues/4704
+			content: none;
+		}
+
+		> * {
+			color: var(--wp--custom--color--foreground);
+			font-size: var(--wp--custom--font-sizes--tiny);
+		}
+	}
+
+	.wp-block-post-author__content {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	.wp-block-post-author__name {
+		line-height: 1;
+	}
+
+	.wp-block-post-author__avatar {
+		margin-right: 0.5em;
+		align-items: center;
+		display: flex;
+
+		.avatar {
+			border-radius: 50%;
+			height: 1.25em;
+			width: 1.25em;
+		}
+	}
+}

payton/sass/theme.scss

@@ -1 +1,3 @@
 @import "blocks/separator";
+@import "blocks/post-navigation-link";
+@import "templates/meta";

payton/style.css

@@ -7,11 +7,11 @@ Description:
 Requires at least: 5.7
 Tested up to: 5.7
 Requires PHP: 5.7
-Version: 0.0.3
+Version: 0.0.1
 License: GNU General Public License v2 or later
 License URI:
 Template: blockbase
 Text Domain: payton
 Tags: editor-style, auto-loading-homepage
 
-*/
+*/

payton/theme.json

@@ -37,7 +37,6 @@
 			"customWidth": true
 		},
 		"color": {
-			"gradients": [],
 			"palette": [
 				{
 					"slug": "primary",
@@ -51,7 +50,7 @@
 				},
 				{
 					"slug": "foreground",
-					"color": "#747577",
+					"color": "#323232",
 					"name": "Foreground"
 				},
 				{
@@ -293,8 +292,8 @@
 			},
 			"separator": {
 				"opacity": 1,
-				"margin": "var(--wp--custom--gap--vertical) auto",
-				"width": "150px"
+				"width": "150px",
+				"margin": "var(--wp--custom--gap--vertical) auto"
 			},
 			"table": {
 				"figcaption": {
@@ -424,12 +423,12 @@
 			"core/post-title": {
 				"spacing": {
 					"margin": {
-						"bottom": "0.5em"
+						"bottom": "1em"
 					}
 				},
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--overpass)",
-					"fontSize": "min(max(24px, 5vw), 48px)",
+					"fontSize": "36px",
 					"lineHeight": 1.2,
 					"fontWeight": "700"
 				},
@@ -474,6 +473,12 @@
 					"width": "0 0 1px 0"
 				}
 			},
+			"core/site-title": {
+				"typography": {
+					"fontSize": "var(--wp--preset--font-size--normal)",
+					"fontWeight": 700
+				}
+			},
 			"core/quote": {
 				"border": {
 					"color": "var(--wp--custom--color--primary)",
@@ -495,12 +500,6 @@
 					"fontSize": "var(--wp--preset--font-size--normal)",
 					"fontStyle": "normal"
 				}
-			},
-			"core/site-title": {
-				"typography": {
-					"fontSize": "var(--wp--preset--font-size--normal)",
-					"fontWeight": 700
-				}
 			}
 		},
 		"color": {
@@ -513,7 +512,7 @@
 					"fontFamily": "var(--wp--preset--font-family--overpass)",
 					"fontWeight": "var(--wp--custom--heading--typography--font-weight)",
 					"lineHeight": "var(--wp--custom--heading--typography--line-height)",
-					"fontSize": "48px"
+					"fontSize": "36px"
 				},
 				"spacing": {
 					"margin": {
@@ -527,7 +526,7 @@
 					"fontFamily": "var(--wp--preset--font-family--overpass)",
 					"fontWeight": "var(--wp--custom--heading--typography--font-weight)",
 					"lineHeight": "var(--wp--custom--heading--typography--line-height)",
-					"fontSize": "32px"
+					"fontSize": "30px"
 				},
 				"spacing": {
 					"margin": {
@@ -541,7 +540,7 @@
 					"fontFamily": "var(--wp--preset--font-family--overpass)",
 					"fontWeight": "var(--wp--custom--heading--typography--font-weight)",
 					"lineHeight": "var(--wp--custom--heading--typography--line-height)",
-					"fontSize": "var(--wp--preset--font-size--large)"
+					"fontSize": "24px"
 				},
 				"spacing": {
 					"margin": {
@@ -555,7 +554,7 @@
 					"fontFamily": "var(--wp--preset--font-family--overpass)",
 					"fontWeight": "var(--wp--custom--heading--typography--font-weight)",
 					"lineHeight": "var(--wp--custom--heading--typography--line-height)",
-					"fontSize": "var(--wp--preset--font-size--medium)"
+					"fontSize": "18px"
 				},
 				"spacing": {
 					"margin": {
@@ -569,7 +568,7 @@
 					"fontFamily": "var(--wp--preset--font-family--overpass)",
 					"fontWeight": "var(--wp--custom--heading--typography--font-weight)",
 					"lineHeight": "var(--wp--custom--heading--typography--line-height)",
-					"fontSize": "var(--wp--preset--font-size--normal)"
+					"fontSize": "16px"
 				},
 				"spacing": {
 					"margin": {
@@ -583,7 +582,7 @@
 					"fontFamily": "var(--wp--preset--font-family--overpass)",
 					"fontWeight": "var(--wp--custom--heading--typography--font-weight)",
 					"lineHeight": "var(--wp--custom--heading--typography--line-height)",
-					"fontSize": "var(--wp--preset--font-size--small)"
+					"fontSize": "16px"
 				},
 				"spacing": {
 					"margin": {