Make the search block editor match the frontend

WordPress · Mar 24, 2021 · 862f571 · 862f571
1 parent 1d89cd9
commit 862f571
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 36 deletions.
diff --git 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
@@ -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
@@ -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
diff --git 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;