wip

WordPress · Oct 12, 2021 · fdfdaa1 · fdfdaa1
1 parent 367df2b
commit fdfdaa1
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 0 deletions.
diff --git a/mu-plugins/blocks/global-header-footer/header.php b/mu-plugins/blocks/global-header-footer/header.php
@@ -34,6 +34,7 @@
 
 	<!-- wp:group {"className":"site-header__search-container"} -->
 	<div class="wp-block-group site-header__search-container">
+		 <!-- remove this after switch it over to new approach -->
 		<!-- wp:html -->
 		<button
 			aria-haspopup="true"
@@ -67,6 +68,23 @@ class="site-header__close-search"
 		<!-- wp:search {"className":"site-header__search-form","label":"Search","placeholder":"Search WordPress.org...","buttonText":"Submit search"} /-->
 	</div> <!-- /wp:group -->
 
+	<!-- The search block is inside a navigation submenu, because that provides the exact functionality the design
+	     calls for. It also provides a consistent experience with the primary navigation menu, with respect to
+	     keyboard navigation, ARIA states, etc. -->
+	<!-- wp:navigation {"tagName":"div","orientation":"vertical","className":"site-header__search_TODO","isResponsive":true} -->
+		<!-- wp:navigation-link {"label":"Search Test","url":"#","kind":"custom","isTopLevelLink":false} -->
+			<!-- `formActionUrl` relies on PR {add url}, until then this will default to internal site search -->
+			<!-- wp:search {"formActionUrl":"https://wordpress.org/search/do-search.php","className":"site-header__search-form","label":"Search","placeholder":"Search WordPress.org...","buttonText":"Submit search"} /-->
+		<!-- /wp:navigation-link -->
+	<!-- /wp:navigation -->
+
+	<!-- don't need it inside a submen? it's enough to be a top level nav item b/c nav block also supports inner blocks?
+	but do you want/need the extra markup?
+
+	either way, will have to make some adjustment, b/c don't want the form to show in the header in desktop, want to it show as a submenu
+
+	-->
+
 	<!-- This is the first of two Get WordPress buttons; the other is in the navigation menu.
 		 Two are needed because they have different DOM hierarchies at different breakpoints. -->
 	<!-- wp:group {"className":"site-header__desktop-get-wordpress-container"} -->

diff --git a/mu-plugins/blocks/global-header-footer/postcss/header/search.pcss b/mu-plugins/blocks/global-header-footer/postcss/header/search.pcss
@@ -1,4 +1,6 @@
 .wp-block-group.site-header .site-header__search-container {
+	display: none; /* migrating to the new approach under nav menu */
+
 	border-left: 1px solid var(--wp--preset--color--darker-grey);
 	border-right: 1px solid var(--wp--preset--color--darker-grey);
 
@@ -12,3 +14,17 @@
 		display: none;
 	}
 }
+
+.wp-block-group.site-header .site-header__search_TODO {
+	border-left: 1px solid var(--wp--preset--color--darker-grey);
+	border-right: 1px solid var(--wp--preset--color--darker-grey);
+
+	@media (--tablet) {
+		border-right: none;
+		padding-bottom: 28px;
+	}
+
+	@media (--tablet) {
+		order: 3;
+	}
+}