Header/Footer: Switch to overlayMenu to restore menu design.

`isResponsive` was removed in WordPress/gutenberg#35568, which broke several parts of the design.

See WordPress/wporg-news-2021#53

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,29 +19,29 @@
 			<!-- 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} /-->
 			<!-- wp:navigation-link {"label":"Patterns","url":"https://wordpress.org/patterns/","kind":"custom","isTopLevelLink":true} /-->
 			<!-- 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} /-->

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} /-->

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;
+	}
 }

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);