From ee1995d3970487832dfc9261b30b85c094a115a1 Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Mon, 14 Feb 2022 13:18:57 -0500
Subject: [PATCH] Search: Use search block with icon button (#155)

* Search: Use markup from "button inside" and "icon button" search

* Ensure the focus style is visible

* Remove unused attribute
---
 .../blocks/global-header-footer/blocks.php    | 20 +++++
 .../blocks/global-header-footer/header.php    | 53 ++----------
 .../postcss/header/search.pcss                | 82 +++++++++----------
 3 files changed, 67 insertions(+), 88 deletions(-)

diff --git a/mu-plugins/blocks/global-header-footer/blocks.php b/mu-plugins/blocks/global-header-footer/blocks.php
index 42515d0c2..c60c88dd9 100644
--- a/mu-plugins/blocks/global-header-footer/blocks.php
+++ b/mu-plugins/blocks/global-header-footer/blocks.php
@@ -16,6 +16,7 @@
 add_action( 'wp_head', __NAMESPACE__ . '\preload_google_fonts' );
 add_filter( 'style_loader_src', __NAMESPACE__ . '\update_google_fonts_url', 10, 2 );
 add_filter( 'render_block_core/navigation-link', __NAMESPACE__ . '\swap_submenu_arrow_svg' );
+add_filter( 'render_block_core/search', __NAMESPACE__ . '\swap_header_search_action', 10, 2 );
 
 /**
  * Register block types
@@ -1084,3 +1085,22 @@ function( $val, $key ) use ( &$urls ) {
 function swap_submenu_arrow_svg( $block_content ) {
 	return str_replace( block_core_navigation_link_render_submenu_icon(), "<svg width='10' height='7' viewBox='0 0 10 7' stroke-width='1.2' xmlns='http://www.w3.org/2000/svg'><path d='M0.416667 1.33325L5 5.49992L9.58331 1.33325'></path></svg>", $block_content );
 }
+
+/**
+ * Replace the search action url with the custom attribute.
+ *
+ * @param string $block_content The block content about to be appended.
+ * @param array  $block         The block details.
+ * @return string The filtered block content.
+ */
+function swap_header_search_action( $block_content, $block ) {
+	if ( ! empty( $block['attrs']['formAction'] ) ) {
+		$block_content = str_replace(
+			'action="' . esc_url( home_url( '/' ) ) . '"',
+			'action="' . esc_url( $block['attrs']['formAction'] ) . '"',
+			$block_content
+		);
+	}
+
+	return $block_content;
+}
diff --git a/mu-plugins/blocks/global-header-footer/header.php b/mu-plugins/blocks/global-header-footer/header.php
index 12dbd21c1..b9e34fec1 100644
--- a/mu-plugins/blocks/global-header-footer/header.php
+++ b/mu-plugins/blocks/global-header-footer/header.php
@@ -18,6 +18,14 @@
 	$container_class .= ' global-header__has-locale-title';
 }
 
+$search_args = array(
+	'label' => _x( 'Search', 'button label', 'wporg' ),
+	'placeholder' => _x( 'Search WP.org...', 'input field placeholder', 'wporg' ),
+	'buttonPosition' => 'button-inside',
+	'buttonUseIcon' => true,
+	'formAction' => 'https://wordpress.org/search/do-search.php',
+);
+
 ?>
 
 <!-- wp:group {"tagName":"header","align":"full","className":"<?php echo esc_attr( $container_class ); ?>"} -->
@@ -89,51 +97,8 @@
 	<!-- /wp:navigation -->
 
 	<?php if ( $show_search ) : ?>
-	<!--
-		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. It also saves having to write custom code for all the interactions.
-	-->
 	<!-- wp:navigation {"orientation":"vertical","className":"global-header__search","overlayMenu":"always"} -->
-		<!-- wp:html -->
-		<!--
-			This markup is forked from the `wp:search` block. The only reason we're not using that, is because the
-			`action` URL can't be customized.
-
-			@link https://github.com/WordPress/gutenberg/issues/35572
-
-			The only things that changed were:
-
-			1) The instance ID was changed to `99`, to make it likely to be unique.
-			2) Internationalizing the labels. See https://github.com/WordPress/gutenberg/issues/36061 and
-			   related issues for a possible future alternative.
-
-			If that issue is ever resolved, we should be able to replace this with the Search block, without having
-			to change any CSS.
-		-->
-		<form
-			role="search"
-			method="get"
-			action="https://wordpress.org/search/do-search.php"
-			class="wp-block-search__button-outside wp-block-search__text-button global-header__search-form wp-block-search"
-		>
-			<label for="wp-block-search__input-99" class="wp-block-search__label">
-				<?php echo esc_html_x( 'Search', 'button label', 'wporg' ); ?>
-			</label>
-			<div class="wp-block-search__inside-wrapper">
-				<input
-					type="search"
-					id="wp-block-search__input-99"
-					class="wp-block-search__input"
-					name="s"
-					value=""
-					placeholder="<?php echo esc_attr_x( 'Search WP.org...', 'input field placeholder', 'wporg' ); ?>"
-					required=""
-				>
-				<button type="submit" class="wp-block-search__button" aria-label="<?php echo esc_attr_x( 'Submit search', 'button label', 'wporg' ); ?>"></button>
-			</div>
-		</form>
-		<!-- /wp:html -->
+		<!-- wp:search <?php echo wp_json_encode( $search_args ); ?> /-->
 	<!-- /wp:navigation -->
 	<?php endif; ?>
 
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 7b5829813..75444b272 100644
--- a/mu-plugins/blocks/global-header-footer/postcss/header/search.pcss
+++ b/mu-plugins/blocks/global-header-footer/postcss/header/search.pcss
@@ -27,6 +27,10 @@
 			padding-top: 16px;
 			background-position: center;
 		}
+
+		&:focus {
+			outline: 1px dotted currentColor;
+		}
 	}
 
 	& .wp-block-navigation__responsive-container-open {
@@ -62,17 +66,25 @@
 		}
 	}
 
-	& .global-header__search-form {
+	& .wp-block-search {
 		margin-top: 0;
 		width: 100%;
 
 		@media (--tablet) {
 			padding: 20px;
-			width: auto;
+		}
+
+		& .wp-block-search__inside-wrapper {
+			padding: 0;
+			border: none;
+			border-radius: 2px;
+			background-color: var(--wp--preset--color--white);
+			color: var(--wp--preset--color--black);
+			font-size: inherit;
 		}
 
 		& .wp-block-search__label {
-			display: inline-block;
+			display: block;
 			margin-bottom: 20px;
 			font-size: 21px;
 
@@ -92,63 +104,45 @@
 			}
 		}
 
-		& .wp-block-search__inside-wrapper {
-			position: relative;
-
-			&:focus-within {
-				outline: 1px dotted currentColor;
-			}
-		}
-
 		& .wp-block-search__input {
-			width: 100%;
-			padding: var(--wp--custom--form--padding);
-			padding-right: 50px; /* Prevent user input from running into icon. */
-			border: none;
-			border-radius: 2px;
-			background-color: var(--wp--preset--color--white);
-			color: var(--wp--preset--color--black);
-			font-size: inherit;
 			-webkit-appearance: none; /* Remove duplicate magnifying glass icon on Safari-mobile. */
+			padding: var(--wp--custom--form--padding);
+			box-shadow: none;
 
 			@media (--tablet) {
-				padding-right: 35px; /* Prevent user input from running into icon. */
-				padding-top: calc(0.5 * var(--wp--custom--form--padding));
-				padding-bottom: calc(0.5 * var(--wp--custom--form--padding));
-			}
-
-			&:focus {
-				outline: none;
+				padding: calc(var(--wp--custom--form--padding) * 0.5) var(--wp--custom--form--padding);
 			}
 
 			&::placeholder {
 				color: #6a6a6a;
 				opacity: 1;
 			}
+
+			&:focus {
+				outline: revert;
+			}
 		}
 
 		& .wp-block-search__button {
-			position: absolute;
-			right: 0;
-			top: 0;
-			width: 20px;
-			height: 100%;
-			mask-image: url(../images/search.svg);
-			mask-size: 20px auto;
-			mask-repeat: no-repeat;
-			mask-position: center;
-			background-color: var(--wp--preset--color--dark-grey);
-			margin: 0 30px;
-			padding: 0;
+			padding: 8px 12px;
+			background-color: transparent;
+			color: var(--wp--preset--color--black);
 
-			@media (--tablet) {
-				width: 13px;
-				mask-size: 13px auto;
-				margin: 0 12px;
+			& svg {
+				fill: currentColor;
+				height: 32px;
+				width: 32px;
+
+				@media (--tablet) {
+					min-height: 20px;
+					height: 20px;
+					min-width: 20px;
+					width: 20px;
+				}
 			}
 
-			&:hover {
-				cursor: pointer;
+			&:focus {
+				outline: revert;
 			}
 		}
 	}