Quadrat: revise post header and meta (#3824)

* Revise post header and meta.

* Reorder CSS

* Use pseudo elementls the dot is rendered.

* Make h1 font size a custom variable.

* Fix missing paren bug.

* Hack to hide the pipe dividers between post tags.

* Revise navigation type size + base type size to use preset.

* Display none to make the pseudo element go away.

* Update quadrat/block-template-parts/single.html

Co-authored-by: Kjell Reigstad <kjell.reigstad@automattic.com>

* Update quadrat/block-template-parts/single.html

Co-authored-by: Kjell Reigstad <kjell.reigstad@automattic.com>

* Update quadrat/block-template-parts/single.html

Co-authored-by: Kjell Reigstad <kjell.reigstad@automattic.com>

Co-authored-by: Ben Dwyer <ben@scruffian.com>
Co-authored-by: Kjell Reigstad <kjell.reigstad@automattic.com>

quadrat/assets/theme.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /**
  * Breakpoints & Media Queries
  */
@@ -179,6 +180,35 @@ a:focus {
 	overflow: inherit;
 }
 
+.post-meta {
+	align-items: center;
+	justify-content: center;
+}
+
+.post-meta .wp-block-post-date::before {
+	display: none;
+}
+
+.post-meta > *,
+.post-meta .wp-block-post-date {
+	margin: 0 8px;
+}
+
+.post-meta .wp-block-post-terms {
+	margin-left: 0;
+	color: transparent;
+}
+
+.post-meta .wp-block-post-terms::before {
+	color: var(--wp--custom--color--foreground);
+	content: "·";
+	margin-right: 8px;
+}
+
+.post-meta .wp-block-post-terms a {
+	color: var(--wp--custom--color--foreground);
+}
+
 .wp-block-post-featured-image {
 	margin-top: 0;
 }

quadrat/block-template-parts/single.html

@@ -1,15 +1,26 @@
-<!-- wp:post-date {"textAlign":"center","fontSize":"tiny"} /-->
-<!-- wp:post-tags {"textAlign":"center","fontSize":"tiny"} /-->
+<!-- wp:spacer -->
+<div style="height:170px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
 
-<!-- wp:group {"layout":{"inherit":true},"style":{"spacing":{"padding":{"top":"30px","right":"20px","bottom":"30px","left":"20px"}}}} -->
-<div class="wp-block-group" style="padding-top:30px;padding-right:20px;padding-bottom:30px;padding-left:20px">
+<!-- wp:group {"className":"post-meta"} -->
+<div class="wp-block-group post-meta">
+	<!-- wp:post-date {"textAlign":"center","fontSize":"tiny"} /-->
+	<!-- wp:post-terms {"term":"category","textAlign":"center","fontSize":"tiny"} /-->
+</div>
+<!-- /wp:group -->
 
-	<!-- wp:post-title {"textAlign":"center","level":1} /-->
+<!-- wp:group {"layout":{"inherit":true},"style":{"spacing":{"padding":{"top":"30px","right":"20px","bottom":"60px","left":"20px"}}}} -->
+<div class="wp-block-group" style="padding-top:30px;padding-right:20px;padding-bottom:30px;padding-left:20px">
+	<!-- wp:post-title {"textAlign":"center","level":1,"align":"wide"} /-->
 </div>
 <!-- /wp:group -->
 
 <!-- wp:post-featured-image {"align":"full"} /-->
 
+<!-- wp:spacer {"height":60} -->
+<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
 <!-- wp:post-content {"layout":{"inherit":true}} /-->
 
 <!-- wp:spacer {"height":150} -->
@@ -34,4 +45,4 @@
 	<!-- /wp:columns -->
 
 </div>
-<!-- /wp:group -->
+<!-- /wp:group -->

quadrat/child-experimental-theme.json

@@ -59,6 +59,9 @@
 			"heading": {
 				"typography": {
 					"fontWeight": "500"
+				},
+				"h1": {
+					"fontSize":"min(max(48px, 7vw), 80px)"
 				}
 			},
 			"line-height": {
@@ -91,7 +94,7 @@
 					"margin": "0 .2em .2em 0",
 					"typography": {
 						"fontSize": "var(--wp--preset--font-size--huge)",
-						"fontWeight": "300"
+						"fontWeight": "400"
 					}
 				}
 			},
@@ -199,9 +202,9 @@
 			},
 			"core/post-title": {
 				"typography": {
-					"fontSize": "min(max(36px, 5vw), 65px)",
-					"fontWeight": "500",
-					"lineHeight": "var(--wp--custom--line-height--headings--h2)"
+					"fontSize": "var(--wp--custom--heading--h1--font-size)",
+					"fontWeight": "var(--wp--custom--heading--typography--font-weight)",
+					"lineHeight": "var(--wp--custom--line-height--headings--h1)"
 				}
 			},
 			"core/quote": {
@@ -233,12 +236,17 @@
 					"fontSize": "20px",
 					"fontWeight": 800
 				}
+			},
+			"core/navigation": {
+				"typography": {
+					"fontSize": "20px"
+				}
 			}
 		},
 		"elements": {
 			"h1": {
 				"typography": {
-					"fontSize": "min(max(48px, 7vw), 80px)",
+					"fontSize": "var(--wp--custom--heading--h1--font-size)",
 					"lineHeight": "var(--wp--custom--line-height--headings--h1)"
 				}
 			},
@@ -279,8 +287,8 @@
 			}
 		},
 		"typography": {
-			"fontSize": "18px",
-			"fontWeight": "300",
+			"fontSize": "var(--wp--preset--font-size--normal)",
+			"fontWeight": "400",
 			"lineHeight": "var(--wp--custom--line-height--body)"
 		}
 	}

quadrat/experimental-theme.json

@@ -119,6 +119,9 @@
 				"typography": {
 					"fontWeight": "500",
 					"lineHeight": 1.125
+				},
+				"h1": {
+					"fontSize": "min(max(48px, 7vw), 80px)"
 				}
 			},
 			"list": {
@@ -182,7 +185,7 @@
 					"typography": {
 						"fontFamily": "var(--wp--preset--font-family--base)",
 						"fontSize": "var(--wp--preset--font-size--huge)",
-						"fontWeight": "300"
+						"fontWeight": "400"
 					}
 				}
 			},
@@ -375,7 +378,7 @@
 			},
 			"core/navigation": {
 				"typography": {
-					"fontSize": "var(--wp--preset--font-size--small)"
+					"fontSize": "20px"
 				}
 			},
 			"core/post-content": {
@@ -388,9 +391,9 @@
 			},
 			"core/post-title": {
 				"typography": {
-					"fontSize": "min(max(36px, 5vw), 65px)",
-					"lineHeight": "var(--wp--custom--line-height--headings--h2)",
-					"fontWeight": "500"
+					"fontSize": "var(--wp--custom--heading--h1--font-size)",
+					"lineHeight": "var(--wp--custom--line-height--headings--h1)",
+					"fontWeight": "var(--wp--custom--heading--typography--font-weight)"
 				}
 			},
 			"core/post-date": {
@@ -471,7 +474,7 @@
 		"elements": {
 			"h1": {
 				"typography": {
-					"fontSize": "min(max(48px, 7vw), 80px)",
+					"fontSize": "var(--wp--custom--heading--h1--font-size)",
 					"lineHeight": "var(--wp--custom--line-height--headings--h1)"
 				}
 			},
@@ -514,8 +517,8 @@
 		"typography": {
 			"lineHeight": "var(--wp--custom--line-height--body)",
 			"fontFamily": "var(--wp--preset--font-family--base)",
-			"fontSize": "18px",
-			"fontWeight": "300"
+			"fontSize": "var(--wp--preset--font-size--normal)",
+			"fontWeight": "400"
 		}
 	}
 }

quadrat/sass/_meta.scss

@@ -0,0 +1,28 @@
+.post-meta {
+	align-items: center;
+	justify-content: center;
+
+	.wp-block-post-date::before {
+		display: none;
+	}
+
+	> *,
+	.wp-block-post-date {
+		margin: 0 8px;
+	}
+
+	.wp-block-post-terms {
+		margin-left: 0;
+		&::before {
+			color: var(--wp--custom--color--foreground);
+			content: "·";
+			margin-right: 8px;
+		}
+
+		// Needed while https://github.com/WordPress/gutenberg/issues/31710 is sorted.
+		color: transparent;
+		a {
+			color: var(--wp--custom--color--foreground);
+		}
+	}
+}

quadrat/sass/theme.scss

@@ -11,6 +11,7 @@
 @import "block-patterns/headlines";
 @import "elements/links";
 @import "header";
+@import "meta";
 
 .wp-block-post-featured-image {
 	margin-top: 0;