From 862f5719bd61745b1642b76289fab4e68b148265 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 24 Mar 2021 11:01:03 +0100
Subject: [PATCH] Make the search block editor match the frontend

---
 packages/block-library/src/editor.scss        |  1 -
 packages/block-library/src/reset.scss         | 36 +++++++++++++++++++
 packages/block-library/src/search/edit.js     | 26 ++++++++------
 packages/block-library/src/search/editor.scss | 24 -------------
 packages/block-library/src/search/style.scss  |  2 +-
 5 files changed, 53 insertions(+), 36 deletions(-)
 delete mode 100644 packages/block-library/src/search/editor.scss

diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
index 41234b75cca7e..ccdd055b4ff53 100644
--- a/packages/block-library/src/editor.scss
+++ b/packages/block-library/src/editor.scss
@@ -34,7 +34,6 @@
 @import "./pullquote/editor.scss";
 @import "./quote/editor.scss";
 @import "./rss/editor.scss";
-@import "./search/editor.scss";
 @import "./separator/editor.scss";
 @import "./shortcode/editor.scss";
 @import "./site-logo/editor.scss";
diff --git a/packages/block-library/src/reset.scss b/packages/block-library/src/reset.scss
index 934545ad1b806..3bc1ccd373703 100644
--- a/packages/block-library/src/reset.scss
+++ b/packages/block-library/src/reset.scss
@@ -98,4 +98,40 @@
 		line-height: revert;
 		font-weight: revert;
 	}
+
+	select,
+	input,
+	textarea,
+	button {
+		font-family: system-ui;
+		all: revert;
+	}
+
+	// For these I prefer to only override the WP-Admin defined styles and not "all"
+	// To minimize the risk to impact block styles as much as possible.
+	input[type="checkbox"],
+	input[type="color"],
+	input[type="date"],
+	input[type="datetime-local"],
+	input[type="datetime"],
+	input[type="email"],
+	input[type="month"],
+	input[type="number"],
+	input[type="password"],
+	input[type="radio"],
+	input[type="search"],
+	input[type="tel"],
+	input[type="text"],
+	input[type="time"],
+	input[type="url"],
+	input[type="week"],
+	input,
+	select,
+	textarea {
+		&:focus {
+			border: revert;
+			box-shadow: revert;
+			outline: revert;
+		}
+	}
 }
diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js
index 91923b3a78ee7..b66cbd8be5d8b 100644
--- a/packages/block-library/src/search/edit.js
+++ b/packages/block-library/src/search/edit.js
@@ -121,6 +121,7 @@ export default function SearchEdit( {
 	const renderTextField = () => {
 		return (
 			<input
+				type="search"
 				className="wp-block-search__input"
 				aria-label={ __( 'Optional placeholder text' ) }
 				// We hide the placeholder field's placeholder when there is a value. This
@@ -148,16 +149,21 @@ export default function SearchEdit( {
 				) }
 
 				{ ! buttonUseIcon && (
-					<RichText
-						className="wp-block-search__button"
-						aria-label={ __( 'Button text' ) }
-						placeholder={ __( 'Add button text…' ) }
-						withoutInteractiveFormatting
-						value={ buttonText }
-						onChange={ ( html ) =>
-							setAttributes( { buttonText: html } )
-						}
-					/>
+					// This rule only makes sense for UI not blocks.
+					// eslint-disable-next-line react/forbid-elements
+					<button type="submit" className="wp-block-search__button">
+						<RichText
+							tagName="span"
+							style={ { display: 'inline-block' } }
+							aria-label={ __( 'Button text' ) }
+							placeholder={ __( 'Add button text…' ) }
+							withoutInteractiveFormatting
+							value={ buttonText }
+							onChange={ ( html ) =>
+								setAttributes( { buttonText: html } )
+							}
+						/>
+					</button>
 				) }
 			</>
 		);
diff --git a/packages/block-library/src/search/editor.scss b/packages/block-library/src/search/editor.scss
deleted file mode 100644
index 8f1bc15c57a6e..0000000000000
--- a/packages/block-library/src/search/editor.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.wp-block-search {
-	.wp-block-search__input {
-		padding: $grid-unit-10;
-	}
-
-	&.wp-block-search__button-inside .wp-block-search__inside-wrapper {
-		padding: $grid-unit-05;
-	}
-
-	.wp-block-search__button {
-		height: auto;
-		border-radius: initial;
-
-		// This needs high specificity because it otherwise inherits styles from `components-button`.
-		// stylelint-disable-line no-duplicate-selectors
-		&.wp-block-search__button.wp-block-search__button {
-			padding: 6px 10px;
-		}
-	}
-
-	&__components-button-group {
-		margin-top: 10px;
-	}
-}
diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss
index 6f47aa3761dbc..b66519a49b715 100644
--- a/packages/block-library/src/search/style.scss
+++ b/packages/block-library/src/search/style.scss
@@ -29,7 +29,7 @@
 		width: 100%;
 	}
 
-	.wp-block-search__input {
+	.wp-block-search__input[type="search"] {
 		flex-grow: 1;
 		min-width: 3em;
 		border: 1px solid $gray-600;