Instant Search: fix many theme incompatibilities

[gibrown]

Note: this merges into the instant-search-master branch

Fixes many of the problems in #13391 particularly:

• inserting results into the theme works in all those themes
• the search form for all those themes works as search as you type as does the default core WP search widget
• Adds some CSS for our search box and cleans it up
• Adjust opacity when results are loading to give the user some feedback
• Starts the search query after only 200ms rather than 500ms. Feels a lot snappier
• Did some slight code cleanup and renamed the "widget" to "app" so it isn't confused with the WP widgets.

Testing instructions:

• Add define( "JETPACK_SEARCH_PROTOTYPE", true ); to your wp-config.php.
• Ensure that your site has the Jetpack Pro plan and has Jetpack Search enabled.
• Add a Jetpack Search widget to the Search page sidebar. (though I guess it should now work without this added at all)
• Enter a query into a search widget. Alternatively, navigate to a search page like /?s=privacy.
• You can also test against any other site by adding this filter and then adding &blog_id=20115252 to your search page url (that is the jetpack.com blog_id).

function jp_instant_search_options( $options ) {
	if ( $_GET['blog_id'] ) {
		$options['siteId'] = (int) $_GET['blog_id'];
	}
	return $options;
}
add_filter( 'jetpack_instant_search_options', 'jp_instant_search_options' );

Proposed changelog entry for your changes:

• None

[gibrown]

I think I got everything from the review done. I just deleted the -moz border stuff assuming that is what you meant.

[bluefuton]

@gibrown is there a target list of themes I should test for this PR?

[gibrown]

@bluefuton #13391 has the list that i tried with.

[jsnmoon]

Looks good overall.

The only thing that really concerns me is dropping IE 6-10 support by using Intl.NumberFormat, which I noted inline below.

[jsnmoon]

This looks like an unused style -- delete?

[jsnmoon]

Just wanted to note for future reviewers:

🙂 2010, 2011, 2012, 2014, 2016, Astra, Colormag, Storefront, Sydney, look decent.

😶Filter checkboxes require additional spacing for most themes.

😦 2013 and 2019 don't look quite right since the widget content is shown in the footer.
🙁 2015 needs a styled container for the search results.
😦 Argent suffers similarly to 2013 and 2019 due to its layout lacking a sidebar area.
😦 Hemingway unnecessarily spawns two unstyled search inputs below the search widget.
🙁 Shapely has unnecessary left margins for the filter checkboxes.
😦 Zerif Lite unnecessarily centers search results and sets the width of the filter checkbox labels to 100%.

[kraftbj]

2010, 2011, 2012, 2014, 2016, ... look decent.

2020 is almost done and likely worth checking out too.

[simison]

BTW I made a tool to test several themes simultaneously, you might find it useful: https://wordpress.org/plugins/back-to-the-theme/

[gibrown]

Easy way to override the theme by specifying the slug in the url. e.g. http://gibrown.wpsandbox.me/main/?s=related%20psts&blog_id=20115252&theme=twentyseventeen

function filter_theme( $theme ) {
	if ( $_GET['theme'] ) {
		$theme = sanitize_key( $_GET['theme'] );
	}
	return $theme;
}
add_filter( 'stylesheet', 'filter_theme', 1 );
add_filter( 'template', 'filter_theme', 1 );