From 904730823226bfd51eec201952b3968346d9f1dc Mon Sep 17 00:00:00 2001
From: Ian Dunn <ian@iandunn.name>
Date: Mon, 25 Oct 2021 17:24:48 -0700
Subject: [PATCH] Header/Footer: Switch to `overlayMenu` to restore menu
 design.

`isResponsive` was removed in https://github.com/WordPress/gutenberg/pull/35568/, which broke several parts of the design.

See https://github.com/WordPress/wporg-news-2021/issues/53
---
 mu-plugins/blocks/global-header-footer/footer.php      | 10 +++++-----
 mu-plugins/blocks/global-header-footer/header.php      |  4 ++--
 .../global-header-footer/postcss/footer/footer.pcss    |  7 ++++++-
 .../global-header-footer/postcss/header/search.pcss    |  2 +-
 4 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/mu-plugins/blocks/global-header-footer/footer.php b/mu-plugins/blocks/global-header-footer/footer.php
index a12c15e88..0f31809e0 100644
--- a/mu-plugins/blocks/global-header-footer/footer.php
+++ b/mu-plugins/blocks/global-header-footer/footer.php
@@ -10,7 +10,7 @@
 <footer class="wp-block-group global-footer alignfull">
 	<!-- wp:group {"className":"global-footer__navigation-container"} -->
 	<div class="wp-block-group global-footer__navigation-container">
-		<!-- wp:navigation {"orientation":"vertical","className":"global-footer__navigation-important","isResponsive":false} -->
+		<!-- wp:navigation {"orientation":"vertical","className":"global-footer__navigation-important","overlayMenu":"never"} -->
 			<!-- wp:navigation-link {"label":"About","url":"https://wordpress.org/about/","kind":"custom","isTopLevelLink":true} /-->
 			<!-- wp:navigation-link {"label":"Blog","url":"https://wordpress.org/news","kind":"custom","isTopLevelLink":true} /-->
 			<!-- wp:navigation-link {"label":"Hosting","url":"https://wordpress.org/hosting/","kind":"custom","isTopLevelLink":true} /-->
@@ -19,14 +19,14 @@
 			<!-- wp:navigation-link {"label":"Mobile","url":"https://wordpress.org/mobile/","kind":"custom","isTopLevelLink":true} /-->
 		<!-- /wp:navigation -->
 
-		<!-- wp:navigation {"orientation":"vertical","className":"global-footer__navigation-information","isResponsive":false} -->
+		<!-- wp:navigation {"orientation":"vertical","className":"global-footer__navigation-information","overlayMenu":"never"} -->
 			<!-- wp:navigation-link {"label":"Support","url":"https://wordpress.org/support/","kind":"custom","isTopLevelLink":true} /-->
 			<!-- wp:navigation-link {"label":"Developers","url":"https://developer.wordpress.org/","kind":"custom","isTopLevelLink":true} /-->
 			<!-- wp:navigation-link {"label":"Get Involved","url":"https://make.wordpress.org/","kind":"custom","isTopLevelLink":true} /-->
 			<!-- wp:navigation-link {"label":"Learn","url":"https://learn.wordpress.org/","kind":"custom","isTopLevelLink":true} /-->
 		<!-- /wp:navigation -->
 
-		<!-- wp:navigation {"orientation":"vertical","className":"global-footer__navigation-resources","isResponsive":false} -->
+		<!-- wp:navigation {"orientation":"vertical","className":"global-footer__navigation-resources","overlayMenu":"never"} -->
 			<!-- wp:navigation-link {"label":"Showcase","url":"https://wordpress.org/showcase/","kind":"custom","isTopLevelLink":true} /-->
 			<!-- wp:navigation-link {"label":"Plugins","url":"https://wordpress.org/plugins/","kind":"custom","isTopLevelLink":true} /-->
 			<!-- wp:navigation-link {"label":"Themes","url":"https://wordpress.org/themes/","kind":"custom","isTopLevelLink":true} /-->
@@ -34,14 +34,14 @@
 			<!-- wp:navigation-link {"label":"Openverse","url":"https://wordpress.org/openverse/","kind":"custom","isTopLevelLink":true} /-->
 		<!-- /wp:navigation -->
 
-		<!-- wp:navigation {"orientation":"vertical","className":"global-footer__navigation-community","isResponsive":false} -->
+		<!-- wp:navigation {"orientation":"vertical","className":"global-footer__navigation-community","overlayMenu":"never"} -->
 			<!-- wp:navigation-link {"label":"WordCamp","url":"https://central.wordcamp.org/","kind":"custom","isTopLevelLink":true} /-->
 			<!-- wp:navigation-link {"label":"WordPress.TV","url":"https://wordpress.tv/","kind":"custom","isTopLevelLink":true} /-->
 			<!-- wp:navigation-link {"label":"BuddyPress","url":"https://buddypress.org/","kind":"custom","isTopLevelLink":true} /-->
 			<!-- wp:navigation-link {"label":"bbPress","url":"https://bbpress.org/","kind":"custom","isTopLevelLink":true} /-->
 		<!-- /wp:navigation -->
 
-		<!-- wp:navigation {"orientation":"vertical","className":"global-footer__navigation-external","isResponsive":false} -->
+		<!-- wp:navigation {"orientation":"vertical","className":"global-footer__navigation-external","overlayMenu":"never"} -->
 			<!-- wp:navigation-link {"label":"WordPress.com","url":"https://wordpress.com/?ref=wporg-footer","kind":"custom","isTopLevelLink":true} /-->
 			<!-- wp:navigation-link {"label":"Matt","url":"https://ma.tt/","kind":"custom","isTopLevelLink":true} /-->
 			<!-- wp:navigation-link {"label":"Privacy","url":"https://wordpress.org/about/privacy/","kind":"custom","isTopLevelLink":true} /-->
diff --git a/mu-plugins/blocks/global-header-footer/header.php b/mu-plugins/blocks/global-header-footer/header.php
index aeb13b015..d945e68cc 100644
--- a/mu-plugins/blocks/global-header-footer/header.php
+++ b/mu-plugins/blocks/global-header-footer/header.php
@@ -37,7 +37,7 @@
 		calls for. It also provides a consistent experience with the primary navigation menu, with respect to
 		keyboard navigation, ARIA states, etc. It also saves having to write custom code for all the interactions.
 	-->
-	<!-- wp:navigation {"orientation":"vertical","className":"global-header__search","isResponsive":true} -->
+	<!-- wp:navigation {"orientation":"vertical","className":"global-header__search","overlayMenu":"mobile"} -->
 		<!-- wp:navigation-link {"label":"Search","url":"#","kind":"custom","isTopLevelLink":false} -->
 			<!-- wp:html -->
 			<!--
@@ -91,7 +91,7 @@ class="wp-block-search__input"
 		items should be moved to the top level (e.g., Five for the Future), to make them easier to see, and to
 		make the CSS simpler.
 	-->
-	<!-- wp:navigation {"orientation":"horizontal","className":"global-header__navigation","isResponsive":true} -->
+	<!-- wp:navigation {"orientation":"horizontal","className":"global-header__navigation","overlayMenu":"mobile"} -->
 		<!-- wp:navigation-link {"label":"Plugins","url":"https://wordpress.org/plugins/","kind":"custom","isTopLevelLink":true} /-->
 		<!-- wp:navigation-link {"label":"Themes","url":"https://wordpress.org/themes/","kind":"custom","isTopLevelLink":true} /-->
 		<!-- wp:navigation-link {"label":"Patterns","url":"https://wordpress.org/patterns/","kind":"custom","isTopLevelLink":true} /-->
diff --git a/mu-plugins/blocks/global-header-footer/postcss/footer/footer.pcss b/mu-plugins/blocks/global-header-footer/postcss/footer/footer.pcss
index 439da64ad..61b4f7bfe 100644
--- a/mu-plugins/blocks/global-header-footer/postcss/footer/footer.pcss
+++ b/mu-plugins/blocks/global-header-footer/postcss/footer/footer.pcss
@@ -9,9 +9,14 @@
 	& > .global-footer__navigation-container {
 		max-width: 100%;
 		display: grid;
-		grid-gap: 20px;
+		column-gap: 20px;
+		row-gap: 35px;
 
 		/* Create columns automatically, make them equal widths, wrap when needed. */
 		grid-template-columns: repeat( auto-fit, minmax(150px, 1fr) );
 	}
+
+	& .wp-block-navigation__container {
+		gap: 5px;
+	}
 }
diff --git a/mu-plugins/blocks/global-header-footer/postcss/header/search.pcss b/mu-plugins/blocks/global-header-footer/postcss/header/search.pcss
index 1aed7e233..9b57ed60a 100644
--- a/mu-plugins/blocks/global-header-footer/postcss/header/search.pcss
+++ b/mu-plugins/blocks/global-header-footer/postcss/header/search.pcss
@@ -67,7 +67,7 @@
 		}
 
 		& .wp-block-search__input {
-			padding-right: 50px; /* Prevent user input from running into icon. */
+			padding-right: 35px; /* Prevent user input from running into icon. */
 			border: none;
 			background-color: var(--wp--preset--color--white);
 			color: var(--wp--preset--color--dark-grey);