From f5528f0d44dc9cabfec63701418916486632bdb3 Mon Sep 17 00:00:00 2001
From: Greg Ichneumon Brown <greg@automattic.com>
Date: Wed, 25 Sep 2019 21:43:25 +0000
Subject: [PATCH 1/7] Inserting search results into multiple themes working

---
 .../components/search-widget.jsx              |  8 +--
 modules/search/instant-search/index.jsx       |  2 +
 modules/search/instant-search/lib/dom.js      | 54 +++++++++++++++++--
 3 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/modules/search/instant-search/components/search-widget.jsx b/modules/search/instant-search/components/search-widget.jsx
index e2412e335ed9d..ae2ba7556f341 100644
--- a/modules/search/instant-search/components/search-widget.jsx
+++ b/modules/search/instant-search/components/search-widget.jsx
@@ -17,7 +17,7 @@ import SearchResults from './search-results';
 import SearchFiltersWidget from './search-filters-widget';
 import { search, buildFilterAggregations } from '../lib/api';
 import { setSearchQuery, setFilterQuery, getFilterQuery } from '../lib/query-string';
-import { removeChildren, hideSearchHeader } from '../lib/dom';
+import { removeChildren, hideElements } from '../lib/dom';
 
 class SearchApp extends Component {
 	constructor() {
@@ -40,8 +40,8 @@ class SearchApp extends Component {
 			this.input.current.focus();
 		}
 
-		hideSearchHeader();
-		removeChildren( document.querySelector( 'main' ) );
+		hideElements( this.props.themeOptions.elem_selectors );
+		removeChildren( document.querySelector( this.props.themeOptions.results_selector ) );
 		this.props.widgets.forEach( function( widget ) {
 			removeChildren( document.getElementById( widget.widget_id ) );
 		} );
@@ -117,7 +117,7 @@ class SearchApp extends Component {
 					</Portal>
 				) ) }
 
-				<Portal into="main">
+				<Portal into={ this.props.themeOptions.results_selector }>
 					<SearchResults
 						query={ query }
 						{ ...results }
diff --git a/modules/search/instant-search/index.jsx b/modules/search/instant-search/index.jsx
index 7f2aec1f7d20a..77d10b1832e66 100644
--- a/modules/search/instant-search/index.jsx
+++ b/modules/search/instant-search/index.jsx
@@ -10,6 +10,7 @@ import { h, render } from 'preact';
  */
 import SearchWidget from './components/search-widget';
 import { getSearchQuery, getFilterQuery } from './lib/query-string';
+import { getThemeOptions } from './lib/dom';
 
 const injectSearchWidget = grabFocus => {
 	render(
@@ -18,6 +19,7 @@ const injectSearchWidget = grabFocus => {
 			initialFilters={ getFilterQuery() }
 			initialValue={ getSearchQuery() }
 			options={ window.JetpackInstantSearchOptions }
+			themeOptions={ getThemeOptions( window.JetpackInstantSearchOptions ) }
 		/>,
 		document.body
 	);
diff --git a/modules/search/instant-search/lib/dom.js b/modules/search/instant-search/lib/dom.js
index 5008236a771df..501e9ac16cd68 100644
--- a/modules/search/instant-search/lib/dom.js
+++ b/modules/search/instant-search/lib/dom.js
@@ -4,10 +4,13 @@ export function removeChildren( htmlElement ) {
 	}
 }
 
-export function hideSearchHeader() {
-	const title = document.querySelector( '#content .page-title' );
-	if ( title ) {
-		title.style.display = 'none';
+export function hideElements( elem_selectors ) {
+	let elem = null;
+	for ( let i = 0; i < elem_selectors.length; i++ ) {
+		elem = document.querySelector( elem_selectors[ i ] );
+		if ( elem ) {
+			elem.style.display = 'none';
+		}
 	}
 }
 
@@ -16,3 +19,46 @@ export function getCheckedInputNames( parentDom ) {
 		.filter( input => input.checked )
 		.map( input => input.name );
 }
+
+export function getThemeOptions( searchOptions ) {
+	//the order here matters
+	const result_selectors = [
+		//2015, 2016, 2017, 2019, argent, astra, storefront
+		'main',
+		//2010, 2011, 2012, 2013, 2014
+		'#content',
+		//colormag, shapely, sydney, zerif lite
+		'#primary',
+		//hemingway
+		'.content',
+	];
+
+	const potential_removals = [ '#content .page-title', 'section.ast-archive-description' ];
+
+	let options = {
+		results_selector: null,
+		elem_selectors: [],
+	};
+
+	//sample the dom to try and find a location to mount results
+	for ( let i = 0; i < result_selectors.length; i++ ) {
+		if ( document.querySelector( result_selectors[ i ] ) ) {
+			options.results_selector = result_selectors[ i ];
+			break;
+		}
+	}
+
+	//look for elements we should remove
+	for ( let i = 0; i < potential_removals.length; i++ ) {
+		if ( document.querySelector( potential_removals[ i ] ) ) {
+			options.elem_selectors.push( potential_removals[ i ] );
+		}
+	}
+
+	if ( searchOptions.theme_options ) {
+		//apply overrides from user filters
+		options = { ...options, ...searchOptions.theme_options };
+	}
+
+	return options;
+}

From e9711a38be8afa2257a4e21024dbbd5ca4f0a61b Mon Sep 17 00:00:00 2001
From: Greg Ichneumon Brown <greg@automattic.com>
Date: Thu, 26 Sep 2019 22:10:56 +0000
Subject: [PATCH 2/7] Get search boxes working in 2013 and improve css and
 styling.

---
 .../components/gridicon/index.jsx             |  7 +++
 .../instant-search/components/search-box.jsx  | 36 ++++++++++++
 .../instant-search/components/search-box.scss |  2 +
 .../components/search-results.jsx             | 19 ++++---
 .../components/search-results.scss            | 11 +---
 .../components/search-widget.jsx              | 57 +++++++++++++------
 modules/search/instant-search/index.jsx       |  8 +--
 .../search/instant-search/instant-search.scss |  1 +
 modules/search/instant-search/lib/dom.js      |  7 ++-
 9 files changed, 110 insertions(+), 38 deletions(-)
 create mode 100644 modules/search/instant-search/components/search-box.jsx
 create mode 100644 modules/search/instant-search/components/search-box.scss

diff --git a/modules/search/instant-search/components/gridicon/index.jsx b/modules/search/instant-search/components/gridicon/index.jsx
index 6064300862dfd..795f048324181 100644
--- a/modules/search/instant-search/components/gridicon/index.jsx
+++ b/modules/search/instant-search/components/gridicon/index.jsx
@@ -143,6 +143,7 @@ class Gridicon extends Component {
 				return <title>{ __( 'Has multiple images' ) }</title>;
 			case 'gridicons-image':
 				return <title>{ __( 'Has an image' ) }</title>;
+			case 'gridicons-jetpack-search':
 			case 'gridicons-search':
 				return <title>{ __( 'Search' ) }</title>;
 			case 'gridicons-tag':
@@ -324,6 +325,12 @@ class Gridicon extends Component {
 						<path d="M21 19l-5.154-5.154C16.574 12.742 17 11.42 17 10c0-3.866-3.134-7-7-7s-7 3.134-7 7 3.134 7 7 7c1.42 0 2.742-.426 3.846-1.154L19 21l2-2zM5 10c0-2.757 2.243-5 5-5s5 2.243 5 5-2.243 5-5 5-5-2.243-5-5z" />
 					</g>
 				);
+			case 'gridicons-jetpack-search':
+				return (
+					<g>
+						<path d="M12.85 10.85a7 7 0 1 0-2 2L16 18l2-2zm-2-5l-3.49 6.76V5.83zM6.64 1.39v6.78H3.15z" />
+					</g>
+				);
 			case 'gridicons-star-outline':
 				return (
 					<g>
diff --git a/modules/search/instant-search/components/search-box.jsx b/modules/search/instant-search/components/search-box.jsx
new file mode 100644
index 0000000000000..b9e16a09a74fa
--- /dev/null
+++ b/modules/search/instant-search/components/search-box.jsx
@@ -0,0 +1,36 @@
+/** @jsx h */
+
+/**
+ * External dependencies
+ */
+import { h, Component } from 'preact';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Gridicon from './gridicon';
+
+class SearchBox extends Component {
+	render() {
+		const { query, onChangeQuery, appRef, showIcon = false } = this.props;
+
+		return (
+			<label className="jp-instant-search__box">
+				{ /* TODO: Add support for preserving label text */ }
+				<span className="screen-reader-text">__( 'Search' )</span>
+				{ showIcon && <Gridicon icon="jetpack-search" size={ 32 } /> }
+				<input
+					className="search-field jp-instant-search__box-input"
+					onInput={ onChangeQuery }
+					ref={ appRef }
+					placeholder={ __( 'Search…' ) }
+					type="search"
+					value={ query }
+				/>
+			</label>
+		);
+	}
+}
+
+export default SearchBox;
diff --git a/modules/search/instant-search/components/search-box.scss b/modules/search/instant-search/components/search-box.scss
new file mode 100644
index 0000000000000..f5cc75c20b96e
--- /dev/null
+++ b/modules/search/instant-search/components/search-box.scss
@@ -0,0 +1,2 @@
+label.jp-instant-search__box input:focus {
+}
diff --git a/modules/search/instant-search/components/search-results.jsx b/modules/search/instant-search/components/search-results.jsx
index 61f57c077a792..c4999743da7d5 100644
--- a/modules/search/instant-search/components/search-results.jsx
+++ b/modules/search/instant-search/components/search-results.jsx
@@ -3,7 +3,7 @@
 /**
  * External dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _n, sprintf } from '@wordpress/i18n';
 import { h, Component } from 'preact';
 
 /**
@@ -23,7 +23,7 @@ class SearchResults extends Component {
 	}
 
 	render() {
-		const { results = [], query, total = 0, corrected_query = false } = this.props;
+		const { results = [], query, total = 0, corrected_query = false, loading = false } = this.props;
 		if ( query === '' ) {
 			return <div className="jetpack-instant-search__search-results" />;
 		}
@@ -36,16 +36,19 @@ class SearchResults extends Component {
 				</div>
 			);
 		}
+		const num = new Intl.NumberFormat().format( total );
+		const style = loading ? { opacity: 0.2 } : { opacity: 1 };
 
 		return (
-			<div className="jetpack-instant-search__search-results">
-				<span className="jetpack-instant-search__search-results-count">
-					{ sprintf( __( '%d Results' ), total ) }
-				</span>
+			<div className="jetpack-instant-search__search-results" style={ style }>
 				<p className="jetpack-instant-search__search-results-real-query">
 					{ corrected_query !== false
-						? sprintf( __( 'Showing results for "%s"' ), corrected_query )
-						: sprintf( __( 'Results for "%s"' ), query ) }
+						? sprintf(
+								_n( 'Showing %s result for "%s"', 'Showing %s results for "%s"', total ),
+								num,
+								corrected_query
+						  )
+						: sprintf( _n( '%s results for "%s"', '%s results for "%s"', total ), num, query ) }
 				</p>
 				{ corrected_query !== false && (
 					<p className="jetpack-instant-search__search-results-unused-query">
diff --git a/modules/search/instant-search/components/search-results.scss b/modules/search/instant-search/components/search-results.scss
index 1a1b621e8d4fe..c2a4a60c29323 100644
--- a/modules/search/instant-search/components/search-results.scss
+++ b/modules/search/instant-search/components/search-results.scss
@@ -1,13 +1,8 @@
 .jetpack-instant-search__search-results {
-	padding: 0.125em 0;
-	margin: 1em 0;
+	padding: 0.125em 2em;
+	margin: 1em auto;
 	position: relative;
-}
-
-.jetpack-instant-search__search-results-count {
-	float: right;
-	margin-left: 0.5em;
-	display: block;
+	max-width: 1080px;
 }
 
 .jetpack-instant-search__search-results-real-query {
diff --git a/modules/search/instant-search/components/search-widget.jsx b/modules/search/instant-search/components/search-widget.jsx
index ae2ba7556f341..99cfb8b61bf66 100644
--- a/modules/search/instant-search/components/search-widget.jsx
+++ b/modules/search/instant-search/components/search-widget.jsx
@@ -15,6 +15,7 @@ import debounce from 'lodash/debounce';
  */
 import SearchResults from './search-results';
 import SearchFiltersWidget from './search-filters-widget';
+import SearchBox from './search-box';
 import { search, buildFilterAggregations } from '../lib/api';
 import { setSearchQuery, setFilterQuery, getFilterQuery } from '../lib/query-string';
 import { removeChildren, hideElements } from '../lib/dom';
@@ -30,8 +31,9 @@ class SearchApp extends Component {
 		this.state = {
 			query: this.props.initialValue,
 			results: {},
+			loading: false,
 		};
-		this.getResults = debounce( this.getResults, 500 );
+		this.getResults = debounce( this.getResults, 200 );
 		this.getResults( this.state.query, getFilterQuery() );
 	}
 
@@ -45,6 +47,10 @@ class SearchApp extends Component {
 		this.props.widgets.forEach( function( widget ) {
 			removeChildren( document.getElementById( widget.widget_id ) );
 		} );
+		const searchForms = document.querySelectorAll( this.props.themeOptions.search_form_selector );
+		searchForms.forEach( function( elem ) {
+			removeChildren( elem );
+		} );
 	}
 
 	onChangeQuery = event => {
@@ -64,6 +70,9 @@ class SearchApp extends Component {
 			this.requestId++;
 			const requestId = this.requestId;
 
+			this.setState( {
+				loading: true,
+			} );
 			search( {
 				aggregations: this.props.aggregations,
 				filter,
@@ -74,41 +83,43 @@ class SearchApp extends Component {
 				.then( response => response.json() )
 				.then( json => {
 					if ( this.requestId === requestId ) {
-						this.setState( { results: json } );
+						this.setState( {
+							results: json,
+							loading: false,
+						} );
 					}
 				} );
 		} else {
-			this.setState( { results: [] } );
+			this.setState( {
+				results: [],
+				loading: false,
+			} );
 		}
 	};
 
 	render() {
 		const { query, results } = this.state;
+		const searchForms = Array.from(
+			document.querySelectorAll( this.props.themeOptions.search_form_selector )
+		);
 		return (
 			<Preact.Fragment>
-				{ this.props.widgets.map( ( widget, index ) => (
+				{ this.props.widgets.map( widget => (
 					<Portal into={ `#${ widget.widget_id }` }>
 						<div id={ `${ widget.widget_id }-wrapper` }>
 							<div className="search-form">
-								{ /* TODO: Add support for preserving label text */ }
-								<input
-									className="search-field"
-									onInput={ this.onChangeQuery }
-									ref={ index === 0 ? this.input : null }
-									type="search"
-									value={ query }
+								<SearchBox
+									onChangeQuery={ this.onChangeQuery }
+									appRef={ this.input }
+									query={ query }
+									showIcon={ true }
 								/>
-								<button type="submit" className="search-submit">
-									<svg className="icon icon-search" aria-hidden="true" role="img">
-										<use href="#icon-search" />
-									</svg>
-									<span className="screen-reader-text">Search</span>
-								</button>
 							</div>
 							<div className="jetpack-search-sort-wrapper" />
 							<SearchFiltersWidget
 								initialValues={ this.props.initialFilters }
 								onChange={ this.onChangeFilter }
+								loading={ this.state.loading }
 								postTypes={ this.props.options.postTypes }
 								results={ this.state.results }
 								widget={ widget }
@@ -117,9 +128,21 @@ class SearchApp extends Component {
 					</Portal>
 				) ) }
 
+				{ searchForms &&
+					searchForms.map( elem => (
+						<Portal into={ elem }>
+							<SearchBox
+								onChangeQuery={ this.onChangeQuery }
+								appRef={ this.input }
+								query={ query }
+							/>
+						</Portal>
+					) ) }
+
 				<Portal into={ this.props.themeOptions.results_selector }>
 					<SearchResults
 						query={ query }
+						loading={ this.state.loading }
 						{ ...results }
 						result_format={ this.props.options.resultFormat }
 					/>
diff --git a/modules/search/instant-search/index.jsx b/modules/search/instant-search/index.jsx
index 77d10b1832e66..9dcb9ac116394 100644
--- a/modules/search/instant-search/index.jsx
+++ b/modules/search/instant-search/index.jsx
@@ -8,13 +8,13 @@ import { h, render } from 'preact';
 /**
  * Internal dependencies
  */
-import SearchWidget from './components/search-widget';
+import SearchApp from './components/search-widget';
 import { getSearchQuery, getFilterQuery } from './lib/query-string';
 import { getThemeOptions } from './lib/dom';
 
-const injectSearchWidget = grabFocus => {
+const injectSearchApp = grabFocus => {
 	render(
-		<SearchWidget
+		<SearchApp
 			grabFocus={ grabFocus }
 			initialFilters={ getFilterQuery() }
 			initialValue={ getSearchQuery() }
@@ -31,6 +31,6 @@ document.addEventListener( 'DOMContentLoaded', function() {
 		'siteId' in window.JetpackInstantSearchOptions &&
 		document.body.classList.contains( 'search' )
 	) {
-		injectSearchWidget( getSearchQuery() );
+		injectSearchApp( getSearchQuery() );
 	}
 } );
diff --git a/modules/search/instant-search/instant-search.scss b/modules/search/instant-search/instant-search.scss
index 8bbacfb1c1b23..574e8d060a34b 100644
--- a/modules/search/instant-search/instant-search.scss
+++ b/modules/search/instant-search/instant-search.scss
@@ -1,5 +1,6 @@
 @import './components/search-results.scss';
 @import './components/search-filters-widget.scss';
 @import './components/search-result-minimal.scss';
+@import './components/search-box.scss';
 //@import './components/search-result-engagement.scss';
 //@import './components/search-result-product.scss';
diff --git a/modules/search/instant-search/lib/dom.js b/modules/search/instant-search/lib/dom.js
index 501e9ac16cd68..216c001868c8f 100644
--- a/modules/search/instant-search/lib/dom.js
+++ b/modules/search/instant-search/lib/dom.js
@@ -33,11 +33,16 @@ export function getThemeOptions( searchOptions ) {
 		'.content',
 	];
 
-	const potential_removals = [ '#content .page-title', 'section.ast-archive-description' ];
+	const potential_removals = [
+		'#content .page-title',
+		'section.ast-archive-description',
+		//'input.search-submit', ???
+	];
 
 	let options = {
 		results_selector: null,
 		elem_selectors: [],
+		search_form_selector: 'form.search-form',
 	};
 
 	//sample the dom to try and find a location to mount results

From 8ed3a6d36217c3c56a3d708ace787c2967a52b7c Mon Sep 17 00:00:00 2001
From: Greg Ichneumon Brown <greg@automattic.com>
Date: Fri, 27 Sep 2019 18:31:43 +0000
Subject: [PATCH 3/7] Rename search-widget to search-app

---
 .../components/{search-widget.jsx => search-app.jsx}            | 0
 modules/search/instant-search/index.jsx                         | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename modules/search/instant-search/components/{search-widget.jsx => search-app.jsx} (100%)

diff --git a/modules/search/instant-search/components/search-widget.jsx b/modules/search/instant-search/components/search-app.jsx
similarity index 100%
rename from modules/search/instant-search/components/search-widget.jsx
rename to modules/search/instant-search/components/search-app.jsx
diff --git a/modules/search/instant-search/index.jsx b/modules/search/instant-search/index.jsx
index 9dcb9ac116394..c8491cf94fad7 100644
--- a/modules/search/instant-search/index.jsx
+++ b/modules/search/instant-search/index.jsx
@@ -8,7 +8,7 @@ import { h, render } from 'preact';
 /**
  * Internal dependencies
  */
-import SearchApp from './components/search-widget';
+import SearchApp from './components/search-app';
 import { getSearchQuery, getFilterQuery } from './lib/query-string';
 import { getThemeOptions } from './lib/dom';
 

From 6e2019f7d5b54d6c6b0fde6363c046e8b35d52f2 Mon Sep 17 00:00:00 2001
From: Greg Ichneumon Brown <greg@automattic.com>
Date: Fri, 27 Sep 2019 21:53:19 +0000
Subject: [PATCH 4/7] Get search box working with twentyten

---
 .../instant-search/components/search-app.jsx  | 28 +++++++++++++++----
 .../instant-search/components/search-box.jsx  | 13 +++------
 .../instant-search/components/search-box.scss | 14 ++++++++++
 .../components/search-filters-widget.jsx      |  4 ++-
 modules/search/instant-search/lib/dom.js      |  3 +-
 5 files changed, 46 insertions(+), 16 deletions(-)

diff --git a/modules/search/instant-search/components/search-app.jsx b/modules/search/instant-search/components/search-app.jsx
index 99cfb8b61bf66..77c1ab841f076 100644
--- a/modules/search/instant-search/components/search-app.jsx
+++ b/modules/search/instant-search/components/search-app.jsx
@@ -47,7 +47,10 @@ class SearchApp extends Component {
 		this.props.widgets.forEach( function( widget ) {
 			removeChildren( document.getElementById( widget.widget_id ) );
 		} );
-		const searchForms = document.querySelectorAll( this.props.themeOptions.search_form_selector );
+		const searchForms = [
+			...document.querySelectorAll( this.props.themeOptions.search_form_icon ),
+			...document.querySelectorAll( this.props.themeOptions.search_form_no_icon ),
+		];
 		searchForms.forEach( function( elem ) {
 			removeChildren( elem );
 		} );
@@ -99,8 +102,11 @@ class SearchApp extends Component {
 
 	render() {
 		const { query, results } = this.state;
-		const searchForms = Array.from(
-			document.querySelectorAll( this.props.themeOptions.search_form_selector )
+		const searchFormsIcon = Array.from(
+			document.querySelectorAll( this.props.themeOptions.search_form_icon )
+		);
+		const searchFormsNoIcon = Array.from(
+			document.querySelectorAll( this.props.themeOptions.search_form_no_icon )
 		);
 		return (
 			<Preact.Fragment>
@@ -128,13 +134,25 @@ class SearchApp extends Component {
 					</Portal>
 				) ) }
 
-				{ searchForms &&
-					searchForms.map( elem => (
+				{ searchFormsIcon &&
+					searchFormsIcon.map( elem => (
+						<Portal into={ elem }>
+							<SearchBox
+								onChangeQuery={ this.onChangeQuery }
+								appRef={ this.input }
+								query={ query }
+								showIcon={ true }
+							/>
+						</Portal>
+					) ) }
+				{ searchFormsNoIcon &&
+					searchFormsNoIcon.map( elem => (
 						<Portal into={ elem }>
 							<SearchBox
 								onChangeQuery={ this.onChangeQuery }
 								appRef={ this.input }
 								query={ query }
+								showIcon={ false }
 							/>
 						</Portal>
 					) ) }
diff --git a/modules/search/instant-search/components/search-box.jsx b/modules/search/instant-search/components/search-box.jsx
index b9e16a09a74fa..1c45db0701bbc 100644
--- a/modules/search/instant-search/components/search-box.jsx
+++ b/modules/search/instant-search/components/search-box.jsx
@@ -6,20 +6,15 @@
 import { h, Component } from 'preact';
 import { __ } from '@wordpress/i18n';
 
-/**
- * Internal dependencies
- */
-import Gridicon from './gridicon';
-
 class SearchBox extends Component {
 	render() {
-		const { query, onChangeQuery, appRef, showIcon = false } = this.props;
+		const { query, onChangeQuery, appRef, showIcon } = this.props;
 
+		const cls = showIcon ? 'jp-instant-search__box-svg' : 'jp-instant-search__box';
 		return (
-			<label className="jp-instant-search__box">
+			<label className={ cls }>
 				{ /* TODO: Add support for preserving label text */ }
-				<span className="screen-reader-text">__( 'Search' )</span>
-				{ showIcon && <Gridicon icon="jetpack-search" size={ 32 } /> }
+				<span className="screen-reader-text">{ __( 'Search' ) }</span>
 				<input
 					className="search-field jp-instant-search__box-input"
 					onInput={ onChangeQuery }
diff --git a/modules/search/instant-search/components/search-box.scss b/modules/search/instant-search/components/search-box.scss
index f5cc75c20b96e..a01af56d5f210 100644
--- a/modules/search/instant-search/components/search-box.scss
+++ b/modules/search/instant-search/components/search-box.scss
@@ -1,2 +1,16 @@
 label.jp-instant-search__box input:focus {
 }
+
+/* apply to all the inputs to try and pick up any theme styling */
+.jp-instant-search__box-svg input {
+	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='darkgray' d='M12.85 10.85a7 7 0 1 0-2 2L16 18l2-2zm-2-5l-3.49 6.76V5.83zM6.64 1.39v6.78H3.15z' /></svg>");
+	background-repeat: no-repeat;
+	background-position: 4px 4px;
+	-moz-border-radius: 2px;
+	border-radius: 2px;
+	font-size: 14px;
+	height: 26px;
+	width: 100%;
+	line-height: 1.2em;
+	padding: 4px 10px 4px 32px;
+}
diff --git a/modules/search/instant-search/components/search-filters-widget.jsx b/modules/search/instant-search/components/search-filters-widget.jsx
index 8c5a39fa03160..d9ffff770feff 100644
--- a/modules/search/instant-search/components/search-filters-widget.jsx
+++ b/modules/search/instant-search/components/search-filters-widget.jsx
@@ -49,8 +49,10 @@ export default class SearchFiltersWidget extends Component {
 
 	render() {
 		const aggregations = get( this.props.results, 'aggregations' );
+		const style = this.props.loading === true ? { opacity: 0.2 } : { opacity: 1 };
+
 		return (
-			<div className="jetpack-instant-search__filters-widget">
+			<div className="jetpack-instant-search__filters-widget" style={ style }>
 				{ get( this.props.widget, 'filters' )
 					.map( configuration =>
 						aggregations
diff --git a/modules/search/instant-search/lib/dom.js b/modules/search/instant-search/lib/dom.js
index 216c001868c8f..de38049599192 100644
--- a/modules/search/instant-search/lib/dom.js
+++ b/modules/search/instant-search/lib/dom.js
@@ -42,7 +42,8 @@ export function getThemeOptions( searchOptions ) {
 	let options = {
 		results_selector: null,
 		elem_selectors: [],
-		search_form_selector: 'form.search-form',
+		search_form_icon: 'form#searchform',
+		search_form_no_icon: 'form.search-form',
 	};
 
 	//sample the dom to try and find a location to mount results

From d6e104ef476b1f204b54edfbf2569d7701ffa743 Mon Sep 17 00:00:00 2001
From: Greg Ichneumon Brown <greg@automattic.com>
Date: Mon, 30 Sep 2019 17:28:58 +0000
Subject: [PATCH 5/7] Give up on getting the jp search icon to display. very
 tricky.

---
 .../instant-search/components/search-app.jsx  | 29 ++++---------------
 .../instant-search/components/search-box.jsx  |  7 ++---
 .../instant-search/components/search-box.scss |  6 +---
 modules/search/instant-search/lib/dom.js      |  3 +-
 4 files changed, 10 insertions(+), 35 deletions(-)

diff --git a/modules/search/instant-search/components/search-app.jsx b/modules/search/instant-search/components/search-app.jsx
index 77c1ab841f076..97ee265850685 100644
--- a/modules/search/instant-search/components/search-app.jsx
+++ b/modules/search/instant-search/components/search-app.jsx
@@ -47,10 +47,7 @@ class SearchApp extends Component {
 		this.props.widgets.forEach( function( widget ) {
 			removeChildren( document.getElementById( widget.widget_id ) );
 		} );
-		const searchForms = [
-			...document.querySelectorAll( this.props.themeOptions.search_form_icon ),
-			...document.querySelectorAll( this.props.themeOptions.search_form_no_icon ),
-		];
+		const searchForms = document.querySelectorAll( this.props.themeOptions.search_form_selector );
 		searchForms.forEach( function( elem ) {
 			removeChildren( elem );
 		} );
@@ -102,11 +99,8 @@ class SearchApp extends Component {
 
 	render() {
 		const { query, results } = this.state;
-		const searchFormsIcon = Array.from(
-			document.querySelectorAll( this.props.themeOptions.search_form_icon )
-		);
-		const searchFormsNoIcon = Array.from(
-			document.querySelectorAll( this.props.themeOptions.search_form_no_icon )
+		const searchForms = Array.from(
+			document.querySelectorAll( this.props.themeOptions.search_form_selector )
 		);
 		return (
 			<Preact.Fragment>
@@ -118,7 +112,6 @@ class SearchApp extends Component {
 									onChangeQuery={ this.onChangeQuery }
 									appRef={ this.input }
 									query={ query }
-									showIcon={ true }
 								/>
 							</div>
 							<div className="jetpack-search-sort-wrapper" />
@@ -134,25 +127,13 @@ class SearchApp extends Component {
 					</Portal>
 				) ) }
 
-				{ searchFormsIcon &&
-					searchFormsIcon.map( elem => (
-						<Portal into={ elem }>
-							<SearchBox
-								onChangeQuery={ this.onChangeQuery }
-								appRef={ this.input }
-								query={ query }
-								showIcon={ true }
-							/>
-						</Portal>
-					) ) }
-				{ searchFormsNoIcon &&
-					searchFormsNoIcon.map( elem => (
+				{ searchForms &&
+					searchForms.map( elem => (
 						<Portal into={ elem }>
 							<SearchBox
 								onChangeQuery={ this.onChangeQuery }
 								appRef={ this.input }
 								query={ query }
-								showIcon={ false }
 							/>
 						</Portal>
 					) ) }
diff --git a/modules/search/instant-search/components/search-box.jsx b/modules/search/instant-search/components/search-box.jsx
index 1c45db0701bbc..4f72bfb78f0fe 100644
--- a/modules/search/instant-search/components/search-box.jsx
+++ b/modules/search/instant-search/components/search-box.jsx
@@ -8,11 +8,10 @@ import { __ } from '@wordpress/i18n';
 
 class SearchBox extends Component {
 	render() {
-		const { query, onChangeQuery, appRef, showIcon } = this.props;
+		const { query, onChangeQuery, appRef } = this.props;
 
-		const cls = showIcon ? 'jp-instant-search__box-svg' : 'jp-instant-search__box';
 		return (
-			<label className={ cls }>
+			<div className={ 'jp-instant-search__box' }>
 				{ /* TODO: Add support for preserving label text */ }
 				<span className="screen-reader-text">{ __( 'Search' ) }</span>
 				<input
@@ -23,7 +22,7 @@ class SearchBox extends Component {
 					type="search"
 					value={ query }
 				/>
-			</label>
+			</div>
 		);
 	}
 }
diff --git a/modules/search/instant-search/components/search-box.scss b/modules/search/instant-search/components/search-box.scss
index a01af56d5f210..71464b9fccd59 100644
--- a/modules/search/instant-search/components/search-box.scss
+++ b/modules/search/instant-search/components/search-box.scss
@@ -2,15 +2,11 @@ label.jp-instant-search__box input:focus {
 }
 
 /* apply to all the inputs to try and pick up any theme styling */
-.jp-instant-search__box-svg input {
-	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='darkgray' d='M12.85 10.85a7 7 0 1 0-2 2L16 18l2-2zm-2-5l-3.49 6.76V5.83zM6.64 1.39v6.78H3.15z' /></svg>");
-	background-repeat: no-repeat;
-	background-position: 4px 4px;
+.jp-instant-search__box input {
 	-moz-border-radius: 2px;
 	border-radius: 2px;
 	font-size: 14px;
 	height: 26px;
 	width: 100%;
 	line-height: 1.2em;
-	padding: 4px 10px 4px 32px;
 }
diff --git a/modules/search/instant-search/lib/dom.js b/modules/search/instant-search/lib/dom.js
index de38049599192..ac63fc5681e3e 100644
--- a/modules/search/instant-search/lib/dom.js
+++ b/modules/search/instant-search/lib/dom.js
@@ -42,8 +42,7 @@ export function getThemeOptions( searchOptions ) {
 	let options = {
 		results_selector: null,
 		elem_selectors: [],
-		search_form_icon: 'form#searchform',
-		search_form_no_icon: 'form.search-form',
+		search_form_selector: 'form#searchform, form.search-form, form.searchform',
 	};
 
 	//sample the dom to try and find a location to mount results

From 89a6adb79b5109cc9bbee13d62646e181d747594 Mon Sep 17 00:00:00 2001
From: Greg Ichneumon Brown <greg@automattic.com>
Date: Tue, 1 Oct 2019 16:00:26 +0000
Subject: [PATCH 6/7] Fixes based on PR review.

---
 .../search/instant-search/components/search-box.jsx   |  4 ++--
 .../search/instant-search/components/search-box.scss  |  1 -
 .../components/search-filters-widget.jsx              |  7 +++++--
 .../instant-search/components/search-results.jsx      | 11 +++++++----
 modules/search/instant-search/instant-search.scss     |  4 ++++
 5 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/modules/search/instant-search/components/search-box.jsx b/modules/search/instant-search/components/search-box.jsx
index 4f72bfb78f0fe..02d1bdeb03bed 100644
--- a/modules/search/instant-search/components/search-box.jsx
+++ b/modules/search/instant-search/components/search-box.jsx
@@ -13,12 +13,12 @@ class SearchBox extends Component {
 		return (
 			<div className={ 'jp-instant-search__box' }>
 				{ /* TODO: Add support for preserving label text */ }
-				<span className="screen-reader-text">{ __( 'Search' ) }</span>
+				<span className="screen-reader-text">{ __( 'Search', 'jetpack' ) }</span>
 				<input
 					className="search-field jp-instant-search__box-input"
 					onInput={ onChangeQuery }
 					ref={ appRef }
-					placeholder={ __( 'Search…' ) }
+					placeholder={ __( 'Search…', 'jetpack' ) }
 					type="search"
 					value={ query }
 				/>
diff --git a/modules/search/instant-search/components/search-box.scss b/modules/search/instant-search/components/search-box.scss
index 71464b9fccd59..cbb4000524166 100644
--- a/modules/search/instant-search/components/search-box.scss
+++ b/modules/search/instant-search/components/search-box.scss
@@ -3,7 +3,6 @@ label.jp-instant-search__box input:focus {
 
 /* apply to all the inputs to try and pick up any theme styling */
 .jp-instant-search__box input {
-	-moz-border-radius: 2px;
 	border-radius: 2px;
 	font-size: 14px;
 	height: 26px;
diff --git a/modules/search/instant-search/components/search-filters-widget.jsx b/modules/search/instant-search/components/search-filters-widget.jsx
index f61ed783d67c0..c2280f01d3d7b 100644
--- a/modules/search/instant-search/components/search-filters-widget.jsx
+++ b/modules/search/instant-search/components/search-filters-widget.jsx
@@ -60,10 +60,13 @@ export default class SearchFiltersWidget extends Component {
 
 	render() {
 		const aggregations = get( this.props.results, 'aggregations' );
-		const style = this.props.loading === true ? { opacity: 0.2 } : { opacity: 1 };
+		const cls =
+			this.props.loading === true
+				? 'jetpack-instant-search__filters-widget jetpack-instant-search__is-loading'
+				: 'jetpack-instant-search__filters-widget';
 
 		return (
-			<div className="jetpack-instant-search__filters-widget" style={ style }>
+			<div className={ cls }>
 				{ get( this.props.widget, 'filters' )
 					.map( configuration =>
 						aggregations
diff --git a/modules/search/instant-search/components/search-results.jsx b/modules/search/instant-search/components/search-results.jsx
index c4999743da7d5..8756e2d3241a2 100644
--- a/modules/search/instant-search/components/search-results.jsx
+++ b/modules/search/instant-search/components/search-results.jsx
@@ -31,16 +31,19 @@ class SearchResults extends Component {
 			return (
 				<div className="jetpack-instant-search__search-results">
 					<div>
-						<h3>{ sprintf( __( 'No Results.' ), query ) }</h3>
+						<h3>{ sprintf( __( 'No Results.', 'jetpack' ), query ) }</h3>
 					</div>
 				</div>
 			);
 		}
 		const num = new Intl.NumberFormat().format( total );
-		const style = loading ? { opacity: 0.2 } : { opacity: 1 };
+		const cls =
+			loading === true
+				? 'jetpack-instant-search__search-results jetpack-instant-search__is-loading'
+				: 'jetpack-instant-search__search-results';
 
 		return (
-			<div className="jetpack-instant-search__search-results" style={ style }>
+			<div className={ cls }>
 				<p className="jetpack-instant-search__search-results-real-query">
 					{ corrected_query !== false
 						? sprintf(
@@ -52,7 +55,7 @@ class SearchResults extends Component {
 				</p>
 				{ corrected_query !== false && (
 					<p className="jetpack-instant-search__search-results-unused-query">
-						{ sprintf( __( 'No results for "%s"' ), query ) }
+						{ sprintf( __( 'No results for "%s"', 'jetpack' ), query ) }
 					</p>
 				) }
 				{ results.map( result => this.render_result( result ) ) }
diff --git a/modules/search/instant-search/instant-search.scss b/modules/search/instant-search/instant-search.scss
index 574e8d060a34b..625e5348de5cc 100644
--- a/modules/search/instant-search/instant-search.scss
+++ b/modules/search/instant-search/instant-search.scss
@@ -4,3 +4,7 @@
 @import './components/search-box.scss';
 //@import './components/search-result-engagement.scss';
 //@import './components/search-result-product.scss';
+
+.jetpack-instant-search__is-loading {
+	opacity: 0.2;
+}

From e6423b5ed9e0583592cc0d42d1a543c91a920f2a Mon Sep 17 00:00:00 2001
From: Greg Ichneumon Brown <greg@automattic.com>
Date: Thu, 3 Oct 2019 22:06:08 +0000
Subject: [PATCH 7/7] Remove stub css code.

---
 modules/search/instant-search/components/search-box.scss | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/modules/search/instant-search/components/search-box.scss b/modules/search/instant-search/components/search-box.scss
index cbb4000524166..a88c88ad01086 100644
--- a/modules/search/instant-search/components/search-box.scss
+++ b/modules/search/instant-search/components/search-box.scss
@@ -1,6 +1,3 @@
-label.jp-instant-search__box input:focus {
-}
-
 /* apply to all the inputs to try and pick up any theme styling */
 .jp-instant-search__box input {
 	border-radius: 2px;