Rainfall: address header and footer improvements (#6305)

* Make header and footer full width

* Make all text in footer uppercase

* Allow footer content to wrap at smaller screens

* Style navigation overlay

* Style overlay menu trigger

* Add header/footer tag names

* Replace footer links with nav block

* Tweak footer nav styling

* Style current menu item; add GB issues

* remove link color from group

Co-authored-by: Ben Dwyer <ben@scruffian.com>

rainfall/parts/footer.html

@@ -1,19 +1,9 @@
 <!-- wp:group {"layout":{"inherit":"true"}} -->
-<div class="wp-block-group"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"30px","bottom":"60px"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
-<div class="wp-block-group alignwide" style="padding-top:30px;padding-bottom:60px"><!-- wp:site-title {"textAlign":"left","fontSize":"small"} /-->
+<div class="wp-block-group"><!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"30px","bottom":"60px"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
+<div class="wp-block-group alignfull" style="padding-top:30px;padding-bottom:60px"><!-- wp:site-title {"textAlign":"left","style":{"typography":{"textTransform":"uppercase"}},"fontSize":"small"} /-->
 
-<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
-<div class="wp-block-group"><!-- wp:paragraph -->
-<p><a href="https://facebook.com/">Facebook</a></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph {"align":"right"} -->
-<p class="has-text-align-right"><a href="https://instagram.com/">Instagram</a></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph {"align":"center"} -->
-<p class="has-text-align-center"><a href="https://twitter.com/">Twitter</a></p>
-<!-- /wp:paragraph --></div>
+<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap","orientation":"horizontal"}} -->
+<div class="wp-block-group"><!-- wp:navigation {"overlayMenu":"never","layout":{"type":"flex","justifyContent":"left"},"style":{"typography":{"textTransform":"uppercase"}}} /--></div>
 <!-- /wp:group --></div>
 <!-- /wp:group --></div>
 <!-- /wp:group -->

rainfall/parts/header.html

@@ -1,8 +1,8 @@
 <!-- wp:group {"layout":{"inherit":"true"}} -->
-<div class="wp-block-group"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"30px","top":"30px"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
-<div class="wp-block-group alignwide" style="padding-top:30px;padding-bottom:30px"><!-- wp:site-title {"style":{"typography":{"textTransform":"uppercase"}},"fontSize":"small"} /-->
+<div class="wp-block-group"><!-- wp:group {"align":"full","style":{"spacing":{"padding":{"bottom":"30px","top":"30px"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
+<div class="wp-block-group alignfull" style="padding-top:30px;padding-bottom:30px"><!-- wp:site-title {"style":{"typography":{"textTransform":"uppercase"}},"fontSize":"small"} /-->
 
-<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"},"blockGap":"2.87rem"}}} /--></div>
+<!-- wp:navigation {"hasIcon":false,"overlayBackgroundColor":"black","overlayTextColor":"white","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"},"blockGap":"2.87rem"},"typography":{"textTransform":"uppercase"}}} /--></div>
 <!-- /wp:group -->
 
 <!-- wp:spacer {"height":"60px"} -->

rainfall/style.css

@@ -96,3 +96,31 @@ body > .is-root-container > .wp-block-template-part > .wp-block-cover,
 	margin-right: auto !important;
 	width: inherit;
 }
+
+/* Footer Navigation */
+footer .wp-block-navigation__container {
+	row-gap: 1rem;
+}
+
+/** Navigation Current Menu Item
+ * Needed until this is addressed: https://github.com/WordPress/gutenberg/issues/42299
+ */
+.wp-block-navigation-item.current-menu-item > a {
+	font-weight: 700;
+}
+
+/** Navigation Overlay
+ * Needed until this is addressed: https://github.com/WordPress/gutenberg/issues/39142
+ */
+.wp-block-navigation__responsive-container.is-menu-open ul {
+	font-size: var(--wp--preset--font-size--x-large) !important;
+	gap: 0 !important;
+}
+
+.wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation__submenu-container {
+	padding-top: 0;
+}
+
+.wp-block-navigation__responsive-container-open {
+	text-transform: uppercase;
+}

rainfall/templates/404.html

@@ -1,6 +1,6 @@
 <!-- wp:group {"backgroundColor":"light-orange"} -->
 <div class="wp-block-group has-light-orange-background-color has-background">
-    <!-- wp:template-part {"slug":"header"} /-->
+    <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 </div>
 <!-- /wp:group -->
 
@@ -10,4 +10,4 @@
 </main>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer"} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

rainfall/templates/index.html

@@ -1,5 +1,5 @@
-<!-- wp:group {"style":{"elements":{"link":{"color":{"text":"var:preset|color|black"}}}},"backgroundColor":"light-orange","textColor":"black"} -->
-<div class="wp-block-group has-black-color has-light-orange-background-color has-text-color has-background has-link-color"><!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+<!-- wp:group {"backgroundColor":"light-orange"} -->
+<div class="wp-block-group has-light-orange-background-color has-background"><!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
 <!-- wp:group {"layout":{"inherit":true}} -->
 <div class="wp-block-group"><!-- wp:group {"align":"wide"} -->
@@ -22,4 +22,4 @@
 
 <!-- wp:template-part {"slug":"query"} /-->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

rainfall/templates/page-header-black.html

@@ -40,4 +40,4 @@
 <!-- /wp:columns --></div>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer"} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

rainfall/templates/page-no-sidebar.html

@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header"} /-->
+<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
 <!-- wp:group {"layout":{"inherit":true}} -->
 <div class="wp-block-group"><!-- wp:group {"align":"full"} -->
@@ -33,4 +33,4 @@
 </div>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer"} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

rainfall/templates/page.html

@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header"} /-->
+<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
 <!-- wp:group {"layout":{"inherit":true}} -->
 <div class="wp-block-group"><!-- wp:group {"align":"full"} -->
@@ -38,4 +38,4 @@
 <!-- /wp:columns --></div>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer"} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

rainfall/templates/single.html

@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header"} /-->
+<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
 <!-- wp:group {"layout":{"inherit":true}} -->
 <div class="wp-block-group"><!-- wp:group {"align":"full"} -->
@@ -106,9 +106,9 @@
 <div class="wp-block-group"></div>
 <!-- /wp:group -->
 
-<!-- wp:columns {"align":"wide"} -->
-<div class="wp-block-columns alignwide"><!-- wp:column -->
-<div class="wp-block-column"><!-- wp:template-part {"slug":"footer"} /--></div>
+<!-- wp:columns {"align":"full"} -->
+<div class="wp-block-columns alignfull"><!-- wp:column -->
+<div class="wp-block-column"><!-- wp:template-part {"slug":"footer","tagName":"footer"} /--></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns --></div>
 <!-- /wp:group -->