Skatepark: add the header (#4354)

* Create the scaffolding for header template part.

* Use intrinsic design layouts for the primary header container.

* Simplify flex wrapping rules.

* Comments for everylayout.dev pages.

* Use the Gutenberg flex layout.

* Refine header styles and translate the menu label.

* Add site logo.

* Use css var instead of baked color.

* Move flex layout to group so we can reuse templates from blockbase.

* Comment why flex grow is needed.

* Use font-weight support in Gutenberg.

* Remove menu label in favor of adding it in Gutenberg.

* Remove hard coded nav links.

skatepark/assets/theme.css

@@ -240,4 +240,36 @@ a:not(.ab-item):not(.screen-reader-shortcut):focus {
 	text-decoration: none;
 }
 
+header.wp-block-template-part > .wp-block-group {
+	align-items: flex-end;
+	justify-content: space-between;
+	flex-wrap: wrap-reverse;
+}
+
+header.wp-block-template-part > .wp-block-group > * {
+	flex-grow: 1;
+}
+
+header.wp-block-template-part > .wp-block-group > * > * {
+	margin-top: 20px;
+	margin-bottom: 20px;
+}
+
+header.wp-block-template-part > .wp-block-group .wp-block-social-links.is-style-logos-only {
+	margin-right: calc( -1 * ( 8px + 0.25em ));
+}
+
+header.wp-block-template-part > .wp-block-group .wp-block-social-links.is-style-logos-only > .wp-social-link {
+	padding: 0;
+}
+
+@media (max-width: 599px) {
+	.nav-links {
+		display: flex;
+		justify-content: space-between;
+		width: 100%;
+		border-bottom: 2px solid var(--wp--custom--color--primary);
+	}
+}
+
 /*# sourceMappingURL=theme.css.map */

skatepark/block-template-parts/header.html

@@ -0,0 +1,23 @@
+<!-- wp:group { "layout":{"type":"flex"},"align":"full"} -->
+<div class="wp-block-group">
+<!-- wp:group -->
+<div class="wp-block-group">
+<!-- wp:site-logo /-->
+<!-- wp:site-title {"style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"900"}},"fontSize":"large"} /-->
+<!-- wp:site-tagline {"fontSize":"small","style":{"typography":{"fontWeight":"500"}}} /--></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"className":"nav-links"} -->
+<div class="wp-block-group nav-links"><!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary","style":{"typography":{"fontStyle":"normal","fontWeight":"900","textTransform":"uppercase"}},"fontSize":"small"} -->
+<!-- /wp:navigation -->
+
+<!-- wp:social-links {"iconColor":"primary","iconColorValue":"var(--wp--custom--color--primary)","className":"items-justified-right is-style-logos-only"} -->
+<ul class="wp-block-social-links has-icon-color items-justified-right is-style-logos-only"><!-- wp:social-link {"url":"twitter.com","service":"twitter"} /-->
+
+<!-- wp:social-link {"url":"facebook.com","service":"facebook"} /-->
+
+<!-- wp:social-link {"url":"instagram.com","service":"instagram"} /--></ul>
+<!-- /wp:social-links --></div>
+<!-- /wp:group -->
+</div>
+<!-- /wp:group -->

skatepark/block-templates/singular.html

@@ -0,0 +1,21 @@
+<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+
+<!-- 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"} /-->

skatepark/child-theme.json

@@ -235,6 +235,11 @@
 					"letterSpacing": "0.05em",
 					"textTransform": "uppercase"
 				}
+			},
+			"core/navigation": {
+				"typography": {
+					"letterSpacing": "0.05em"
+				}
 			}
 		},
 		"elements": {

skatepark/sass/templates/_header.scss

@@ -0,0 +1,28 @@
+header.wp-block-template-part > .wp-block-group {
+	align-items: flex-end; // Needed until theme.json layout lets me specify
+	justify-content: space-between; // Apply a cluster (flex?) layout
+	flex-wrap: wrap-reverse;
+	> * {
+		flex-grow: 1; // Needed to maintain alignment when the containers stack
+		> * { // Apply a stack layout (page 69 of the every-layout.dev PDF) 
+			margin-top: 20px;
+			margin-bottom: 20px;
+		}
+	}
+
+	.wp-block-social-links.is-style-logos-only {
+		margin-right: calc( -1 * ( 8px + 0.25em ) ); // Visually align social links to the right
+		> .wp-social-link {
+			padding: 0; // Needed to override Gutenberg default padding on this block style variation
+		}
+	}
+}
+
+@include break-small-only(){
+	.nav-links {
+		display: flex;
+		justify-content: space-between;
+		width: 100%;
+		border-bottom: 2px solid var(--wp--custom--color--primary);
+	}
+}

skatepark/sass/theme.scss

@@ -5,3 +5,4 @@
 @import "blocks/search";
 @import "block-patterns/pre-footer";
 @import "elements/links";
+@import "templates/header";

skatepark/theme.json

@@ -430,7 +430,8 @@
 			},
 			"core/navigation": {
 				"typography": {
-					"fontSize": "var(--wp--preset--font-size--normal)"
+					"fontSize": "var(--wp--preset--font-size--normal)",
+					"letterSpacing": "0.05em"
 				}
 			},
 			"core/post-title": {