Try/consolidate headers (#5145)

* consolidate header styles designed for child themes into Blockbase which child themes can use as header/footer options.
* Refactor header spacing mechanism to use a spacer in a template part
* Refactor header layouts to allow for full-width background colors.
* Tweak navigation styles leveraged by headers to align with design intentions
* Various other header and navigation tweaks.
* Affects all Blockbase children

Co-authored-by: Maggie <[email protected]>
Co-authored-by: Ben Dwyer <[email protected]>

arbutus/block-templates/archive.html

@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+<!-- wp:template-part {"slug":"header-rounded-logo","tagName":"header"} /-->
 
 <!-- wp:query {"tagName":"main","layout":{"inherit":true}} -->
 <main class="wp-block-query">

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

@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+<!-- wp:template-part {"slug":"header-rounded-logo","tagName":"header"} /-->
 
 <!-- wp:group {"tagName":"main"} -->
 <main class="wp-block-group">

arbutus/block-templates/index.html

@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+<!-- wp:template-part {"slug":"header-rounded-logo","tagName":"header"} /-->
 
 <!-- wp:query {"tagName":"main","layout":{"inherit":true}} -->
 <main class="wp-block-query">

arbutus/block-templates/page.html

@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+<!-- wp:template-part {"slug":"header-rounded-logo","tagName":"header"} /-->
 
 <!-- wp:group {"tagName":"main"} -->
 <main class="wp-block-group"><!-- wp:post-featured-image {"align":"full"} /-->
@@ -10,4 +10,4 @@
 <div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer-container"} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer-container"} /-->

arbutus/block-templates/single.html

@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+<!-- wp:template-part {"slug":"header-rounded-logo","tagName":"header"} /-->
 
 <!-- wp:group {"tagName":"main"} -->
 <main class="wp-block-group"><!-- wp:post-featured-image {"align":"full"} /-->
@@ -21,4 +21,4 @@
 <!-- wp:post-comments /--></div>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer-container"} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer-container"} /-->

arbutus/theme.json

@@ -41,6 +41,9 @@
 				"typography": {
 					"fontWeight": 600
 				}
+			},
+			"gap": {
+				"vertical": "min(40px, 5vw)"
 			}
 		},
 		"typography": {
@@ -64,6 +67,16 @@
 	},
 	"styles": {
 		"blocks": {
+			"core/site-tagline": {
+				"typography": {
+					"fontSize": "var(--wp--preset--font-size--small)"
+				}
+			},
+			"core/site-title": {
+				"typography": {
+					"fontSize": "var(--wp--preset--font-size--medium)"
+				}
+			},
 			"core/post-title": {
 				"typography": {
 					"fontSize": "48px"

blockbase/block-template-parts/header-centered.html

@@ -0,0 +1,24 @@
+<!-- wp:group {"className":"gapless-group","layout":{"inherit":"true"}} -->
+<div class="wp-block-group gapless-group">
+
+<!-- wp:group {"align":"full","className":"site-header gapless-group fullwidth"} -->
+<div class="wp-block-group alignfull site-header gapless-group fullwidth">
+
+<!-- wp:spacer {"height":60} -->
+<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:site-logo {"align":"center","width":128} /-->
+<!-- wp:site-title {"textAlign":"center","style":{"spacing":{"padding":{"top":"30px","bottom":"20px"}},"typography":{"fontSize":"55px"}}} /-->
+<!-- wp:site-tagline {"textAlign":"center","fontSize":"small"} /-->
+<!-- wp:spacer {"height":20} -->
+<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+<!-- wp:navigation {"__unstableLocation":"primary","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"center","orientation":"horizontal"}} /-->
+
+<!-- wp:template-part {"slug":"header-spacer","theme":"themes/seedlet-blocks"} /-->
+
+</div>
+<!-- /wp:group -->
+</div>
+<!-- /wp:group -->

blockbase/block-template-parts/header-linear.html

@@ -0,0 +1,27 @@
+<!-- wp:group {"className":"gapless-group","layout":{"inherit":"true"}} -->
+<div class="wp-block-group gapless-group">
+<!-- wp:group {"align":"full","className":"site-header site-header-linear","layout":{"type":"flex","justifyContent":"space-between"},"style":{"spacing":{"padding":{"bottom":"var(--wp--custom--gap--vertical)","top":"var(--wp--custom--gap--vertical)"}}}} -->
+<div class="wp-block-group site-header site-header-linear alignfull" style="padding-bottom:var(--wp--custom--gap--vertical);padding-top:var(--wp--custom--gap--vertical)">
+
+	<!-- wp:group {"className":"site-brand","layout":{"type":"flex"}} -->
+	<div class="wp-block-group site-brand">
+		<!-- wp:site-logo {"width":64} /-->
+
+		<!-- wp:group {"className":"site-words-stack-small","layout":{"type":"flex"}} -->
+		<div class="wp-block-group site-words-stack-small">
+			<!-- wp:site-title /-->
+			<!-- wp:site-tagline {"style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} /-->
+		</div>
+		<!-- /wp:group -->
+	</div>
+	<!-- /wp:group -->
+
+	<!-- wp:navigation {"className":"blockbase-responsive-navigation-linear","__unstableLocation":"primary","__unstableSocialLinks":"social","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"}}}} /-->
+
+</div>
+<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"header-spacer"} /-->
+
+</div>
+<!-- /wp:group -->