Instant Search: Add search filtering inside overlay by jsnmoon · Pull Request #14319 · Automattic/jetpack

jsnmoon · 2020-01-10T00:44:46Z

Changes proposed in this Pull Request:

Adds search filtering inside the overlay.
Uses filter configuration from pre-existing Jetpack Search widget(s) active on the site.

Is this a new feature or does it add/remove features to an existing part of Jetpack?

No, this is technically restoring a feature we've previously had before we switched to the overlay approach.

Testing instructions:

If you haven't already, set up Instant Search following the instructions in the readme. Ensure that you've configured filters for your Jetpack Search widget.
Navigate to your WordPress site and submit a query into the search widget.
Ensure that the search overlay appears along with the search filters on the right side. Ensure that the search filters work as expected.
(Optional) Add some widgets to the Jetpack Search Sidebar and ensure that it renders as expected below the search filters in the overlay.

Proposed changelog entry for your changes:

None.

bluefuton · 2020-01-13T01:34:38Z

Great stuff. Works really well for filtering on my test site 👍

When testing with a site with more posts (blog_id=20115252), I noticed a couple of things:

When selecting a post type, all of the others disappear (so I can't filter by multiple post types):

Only '2020' appears in the year filters for the query "post", but the posts shown in the unfiltered results are from multiple different years (2013, 2014, 2016):

jsnmoon · 2020-01-13T18:58:02Z

When selecting a post type, all of the others disappear (so I can't filter by multiple post types)

Only '2020' appears in the year filters for the query "post", but the posts shown in the unfiltered results are from multiple different years (2013, 2014, 2016):

One important thing is that the API has complete control over which filters to show given a query; the interface merely passes through the API results. In other words, these defects existed prior to this PR.

The first defect is due to how our API design only accommodates conjunctive (AND) filters.

The second defect seems like a bug; it should definitely be showing the other years.

I'll spin up issues for the abovementioned bugs so we can push this PR forward.

gibrown

It looks like this is adding the filters at the top of the whole sidebar rather than adding them to the widget in the sidebar.

When the user configures their sidebar in the overlay we should be replacing the filter widget that is in that sidebar in place. Basically the same thing we were doing on the front end sidebar before we should be doing in the overlay so that the end user still has control over what is in their sidebar.

Note that the hello widget should be above the other widget results and we should only be using the filters that are configured for that widget. Potentially there could be multiple widgets in the overlay sidebar

* Add function to clear filter query values * Fix class names for elements in SearchFilter * Add “Clear Filters” button

jsnmoon · 2020-01-14T01:12:03Z

It looks like this is adding the filters at the top of the whole sidebar rather than adding them to the widget in the sidebar. (@gibrown)

This is correct. I decided to implement this version first because it requires very little new code (net ~50 LOC added) and enables us to start polishing the filtering experience.

When the user configures their sidebar in the overlay we should be replacing the filter widget that is in that sidebar in place. Basically the same thing we were doing on the front end sidebar before we should be doing in the overlay so that the end user still has control over what is in their sidebar.

Note that the hello widget should be above the other widget results and we should only be using the filters that are configured for that widget. Potentially there could be multiple widgets in the overlay sidebar (@gibrown)

While I understand the rationale for this approach, it introduces nontrivial challenges:

(Tech) It will require us to portal into a DOM node mounted onto an existing Preact element tree. I've not seen this done before elsewhere in the React/Preact community; this is likely going against best practices.
(UX) The user will need to configure Jetpack Search widgets in at least two places for most sites: somewhere on the site and one within the overlay. To make things worse, there's no way to guarantee that the filters being shown on the site will match up with the filters being shown in the overlay. In other words, the following can occur:
a. A user selects 2017 from a date filter attached to a widget rendered on the site.
b. According to our current direction, this will spawn an overlay (see Instant Search: prototype instant search filters overlay #14320).
c. There's no indication that the search results inside the overlay are being filtered by 2017. To make matters worse, the user can select another filter inside the overlay (e.g. Page post type), widening the discrepancy between the filter controls inside the overlay and filter controls on the site.

@keoshi, your thoughts on this would be greatly appreciated. I don't feel comfortable continuing with implementation without some design consideration to the UX issue above.

keoshi · 2020-01-14T13:03:20Z

Only '2020' appears in the year filters for the query "post", but the posts shown in the unfiltered results are from multiple different years (2013, 2014, 2016):

@bluefuton Same thing happened to me initially but only because I'd set a maximum of 1 filter for the date. Setting a larger value here displays the entire range of years:

This made me think if that range selection should even be an option or that should be returned from the API. If there are Search results for, say, 2012, 2013 and 2014, the filtering options should surface that.

What are you thoughts on this, @gibrown @bluefuton @jsnmoon ?

keoshi · 2020-01-14T13:07:22Z

When the user configures their sidebar in the overlay we should be replacing the filter widget that is in that sidebar in place. Basically the same thing we were doing on the front end sidebar before we should be doing in the overlay so that the end user still has control over what is in their sidebar.

Agreed, @gibrown !

keoshi · 2020-01-14T13:21:30Z

(UX) The user will need to configure Jetpack Search widgets in at least two places for most sites: somewhere on the site and one within the overlay. To make things worse, there's no way to guarantee that the filters being shown on the site will match up with the filters being shown in the overlay.

Very good point, @jsnmoon!

Does the following scenario have any validity?

Customers wants to expose some but not all filters in their site. They add a date filter (year) with a maximum of 2 values: 2020 and 2019.
Customer then uses the overlay to expose all filters, including 10 years, all post types, and all categories.

Still, I'd be tempted to offer faceting only in the overlay for a few reasons:

It simplifies the process of adding JPS.
It prevents the possibility of creating two different (and possibly incompatible) faceting sets of options.
It hides all filtering complexity to a view dedicated to just that (overlay).

In sum, if we could configure JPS and all faceting options with just one widget inside the overlay and then replicate it automatically on the site sidebar (if they have one) that would be ideal. If not, I'd use the widget area in the overlay to expose those.

jsnmoon · 2020-01-14T22:15:02Z

Barring any technical defects, I'd like to ship this PR out so we can iterate on trying the server-rendered overlay approach. cc @bluefuton

bluefuton

🚢 Ship it!

* Instant Search: add label and button to search box (#13875) * Add label and button to search box and convert to functional component * Correct lodash import * Instant Search: Ignore empty query values for filters (#13934) * Instant Search: Pay down technical debt (#13847) * Instant Search: Standardize class and ID prefixes (#13933) * Instant Search: Improve accessibility (#13884) * Turn statements into sentence fragments * Add appropriate landmark roles for elements * Set portaled widget as a search form * Use ordered list for search results * Instant Search: only show multiple image icon for posts with gallery (#13968) * Add testing instructions to README (#13969) * Instant search: add product result component (#13826) * Add product search result component * Refactor renderResult into component * Convert SearchResult to stateless functional component * Move comments to new shared component * Move Tracks out to common SearchResult * Request additional fields for product results * Correct field names and remove ratings for now * Basic styling of cards with images * Add price where available * Read result_format from the query string * Use ordered list * Style cleanup * Minor cleanup * Remove resultFormat from component state * SearchResults component cleanup * Standardise class names * Validate result format before using as CSS class * Instant Search: Restore caching to API requests (#13981) * Instant Search: add basic Photon support (#13998) * Add PhotonImage component * Bump default dimensions to 300x300 * Bump asset size limit to 100kb * Add layout CSS for product results (#14017) * Instant Search: Add error/offline handling for API (#14125) * Instant Search: move date into new component and use <time> element (#14133) * Instant Search: improve display of matching comments (#14132) * Instant Search: add label and button to search box (#13875) * Add label and button to search box and convert to functional component * Correct lodash import * Instant Search: Ignore empty query values for filters (#13934) * Instant Search: Pay down technical debt (#13847) * Instant Search: Standardize class and ID prefixes (#13933) * Instant Search: Improve accessibility (#13884) * Turn statements into sentence fragments * Add appropriate landmark roles for elements * Set portaled widget as a search form * Use ordered list for search results * Instant Search: only show multiple image icon for posts with gallery (#13968) * Add testing instructions to README (#13969) * Instant search: add product result component (#13826) * Add product search result component * Refactor renderResult into component * Convert SearchResult to stateless functional component * Move comments to new shared component * Move Tracks out to common SearchResult * Request additional fields for product results * Correct field names and remove ratings for now * Basic styling of cards with images * Add price where available * Read result_format from the query string * Use ordered list * Style cleanup * Remove resultFormat from component state * SearchResults component cleanup * Standardise class names * Validate result format before using as CSS class * Instant Search: Restore caching to API requests (#13981) * Instant Search: add basic Photon support (#13998) * Add PhotonImage component * Bump default dimensions to 300x300 * Bump asset size limit to 100kb * Add layout CSS for product results (#14017) * Instant Search: Add error/offline handling for API (#14125) * Instant Search: move date into new component and use <time> element (#14133) * Instant Search: improve display of matching comments (#14132) * Instant Search: default to query string in `getResults()` (#13995) * Instant Search: use default values for getting results to avoid duplication * getResults: default to empty object * Instant Search: add search form to main content area (#14142) * Split search form out of widget component so it can be reused in the main search area * Include search form in main content area * Move sort wrapper into component and improve class name * Give sort component a more sensible name * Keep search form in place when there are no results * Just return null when there isn't a query * Combine pagination conditionals into one clause * Drop SearchResultsEmpty component * Tidy pagination logic * Pass all props down to SearchForm * Instant Search: add filter icon toggle (#14176) * Add filter icon * Simple show/hide toggle * Make it an interactive element * Add aria-hidden to gridicon * Instant Search: Improve UX for offline network state (#14189) * Fix invisible space breaking date layout * Restore info Gridicon * Add warning notice component * Check offline state before using short term cache * Inject cache state variables into response data * Show “cached results” notice when the user is offline * Catch connectivity error and notify the user * Show correct number of results when offline * Hide load more button when offline * Wrap new copy in translation calls * Instant Search: try using an overlay (#14205) * Try the overlay (Hotel California edition) * Add button to close overlay * Always display search form attached to search results * Add a note about portaled search inputs * Use showResults instead of using showOverlay value * Add a large z-index and increase opacity * Simplify SearchApp, trigger overlay on input focus * Disable WordPress Search for Instant Search * Revert "Disable WordPress Search for Instant Search" * Add jetpack namespace to translation * Use the searchInputSelector * Add missing quote * Instant Search: setup preact-testing-library (#13950) * Add preact-testing-library * Add instant-search dir to existing Jest config * First attempt at test * Create 'yarn test-search' * Add jsx pragma * Enable test and added dependency docblocks * Remove rogue Slack package * Instant Search: Port bug fixes from #14247 * Add basic build process to README. * Instant Search: trigger overlay on submit (#14248) * Remove focus event listeners * Respond to submit rather than focus * Allow enter key to launch overlay * Reflect widget search input changes in query string * Close overlay with Esc key * Reflect query string change in search widget input * Make sure the sort options match * Try grabbing focus in getResults * Remove focus code * Remove grabFocus (no longer in use) * Handle overlay escape key with useEffect rather than converting to Component * Move closeOnEscapeKey out of render * Instant Search: Add sidebar widget area (#14283) * Fix linting violations by changing `date` invocations to `gmdate` * Add sidebar widget area * Add SearchSidebar component * Integrate SearchSidebar into SearchResults * Implement Overlay animation from design prototype * Instant Search: refactor search php for the different experiences (#14284) * refactor php to extract all instant search code * add customizer for the overlay * add running the search query on the backend to display filters when the page loads. * Instant Search: fix Esc key behaviour (#14312) * Instant Search: prevent Esc from opening overlay * Use isVisible rather than shouldShowOverlay * Instant Search: Add search filtering inside overlay (#14319) * Add SearchFilters above SearchSidebar * Instant Search: Add a button to clear applied filters (#14324) * Add function to clear filter query values * Fix class names for elements in SearchFilter * Add “Clear Filters” button * Instant search: introduce overlay from right (#14339) * Introduce overlay from right * Updating overlay offset values * Changes units from `vh` to `vw`. * Updates value from `200` to `100`, as [mentioned here](#14320 (comment)). * Use the posts_per_page setting to decide how many posts to retrieve (#14360) * Instant Search: Use widgets inside overlay for filtering (#14374) * Add search filter portaling inside overlay sidebar * Update readme with new testing instructions * Instant Search: update overlay styles (#14379) * Make search input as large as possible * Remove opinionated styles * Add more margin to the filter icon * Add screen reader text for the search box * Change order of date element * Change date position * Clean up styles * Update style for comments in search results * Fix name of CSS property * Make search result title class more specific, Also reorders styles * Remove extra screen reader text #14379 (comment) * Instant Search: Fix taxonomy name compilation bug (#14408) * Instant Search: Fix date formatting issue for filters (#14409) * Instant Search: Integrate customizer options (#14427) * Integrate customizer options for search overlay * Fix infinite scroll functionality * Update spacing on offline notice (#14419) * Instant Search: add dark theme styles (#14429) * Update styles for base overlay * Update styles for search results * Fix filter toggle and integrate with widget area (#14451) * Instant Search: Improve search form detection (#14474) * Instant Search: Prevent body scroll with overlay open (#14478) * Instant Search: Move focus into overlay input (#14477) * Move focus to and from overlay * Use useRef and event listeners for focus shifting * Instant Search: use taxonomy name rather than slug for filters (#14437) * Fix display of category filters * Update buildFilterObject() * Fix filter formatting in Zerif Lite (#14493) * Instant Search: switch to use .slug_slash_name for displaying custom taxonomies, tags and categories (#14492) * Switch to use .slug_slash_name for taxonomies, tags and categories * Use slug in the query, and name for display * Instant Search: Hotfix body scrolling behavior * Instant Search: Apply customizer changes without page reload (#14504) * Instant Search: Update mobile structure (#14423) * Add cross gridicon * Replace close button label by a gridicon * Change position of close button * Update z-index stacking order, prevents sidebar to be in front of the close button * Reorder CSS properties * Add medium break point at 768px * Add mobile styles for filters popover * Change how transparency is set on the overlay * Update break-small to break-medium * Add styles for smaller close button on mobile devices * Add arrow element to popover * Remove styles that are out of place * Update search results styling * Add popover styles * Update filter icon margins * Show sidebar filters up to 768px, see #14423 (review) * Bring up the opacity on the arrow border * Reduce side padding on small screens * Move margin to label span instead of select element * Instant Search: Restore initial href upon closing overlay (#14518) * Restore initial href when closing overlay * Fix incorrect inline style removal * Instant Search: Restore focus to activeElement (#14522) * Search: Front end search filters open overlay (#14448) * Refactor filter display for front end * Remove rendering filters in the overlay * Front end filters open the overlay * Instant search: add "powered by Jetpack" message (#14519) * Show JetpackColophon when setting is activated * Translate text * Added logo and styles * Style tweaks * Link to jetpack.com/search * Add colophon to mobile filters * Margin tweak * Instant Search: Clear search and filter queries when necessary (#14533) * Clear search and filter queries if necessary * Improve initialHref restoration function * Create a separate handler for popstate events * Instant Search: Refine TrainTracks integration (#14587) * Instant Search: Fix broken dates in iOS Chrome (#14586) * Instant Search: Update list of widgets passed to JS client (#14596) * Only return widgets inside the overlay sidebar * Remove overlay sidebar membership check in JS * Instant Search: Escape wp_json_encode * Instant Search: Add missing translation calls * Update escaping from code review. * Instant Search: Fix unit tests * Instant Search: Fix ESLint errors * Instant Search: Add files to PHPCS whitelist Co-authored-by: Chris R <chris@bluefuton.com> Co-authored-by: Greg Ichneumon Brown <gbrown5878@gmail.com> Co-authored-by: Filipe Varela <keoshi@keoshi.com>

@jsnmoon

* Instant Search: add label and button to search box (#13875) * Add label and button to search box and convert to functional component * Correct lodash import * Instant Search: Ignore empty query values for filters (#13934) * Instant Search: Pay down technical debt (#13847) * Instant Search: Standardize class and ID prefixes (#13933) * Instant Search: Improve accessibility (#13884) * Turn statements into sentence fragments * Add appropriate landmark roles for elements * Set portaled widget as a search form * Use ordered list for search results * Instant Search: only show multiple image icon for posts with gallery (#13968) * Add testing instructions to README (#13969) * Instant search: add product result component (#13826) * [not verified] Add product search result component * [not verified] Refactor renderResult into component * [not verified] Convert SearchResult to stateless functional component * [not verified] Move comments to new shared component * [not verified] Move Tracks out to common SearchResult * [not verified] Request additional fields for product results * Correct field names and remove ratings for now * Basic styling of cards with images * Add price where available * Read result_format from the query string * Use ordered list * Style cleanup * Minor cleanup * Remove resultFormat from component state * SearchResults component cleanup * Standardise class names * Validate result format before using as CSS class * Address review nits * Instant Search: Restore caching to API requests (#13981) * Instant Search: add basic Photon support (#13998) * Add PhotonImage component * Bump default dimensions to 300x300 * Bump asset size limit to 100kb * Add layout CSS for product results (#14017) * Instant Search: Add error/offline handling for API (#14125) * Instant Search: move date into new component and use <time> element (#14133) * Instant Search: improve display of matching comments (#14132) * Instant Search: add label and button to search box (#13875) * Add label and button to search box and convert to functional component * Correct lodash import * Instant Search: Ignore empty query values for filters (#13934) * Instant Search: Pay down technical debt (#13847) * Instant Search: Standardize class and ID prefixes (#13933) * Instant Search: Improve accessibility (#13884) * Turn statements into sentence fragments * Add appropriate landmark roles for elements * Set portaled widget as a search form * Use ordered list for search results * Instant Search: only show multiple image icon for posts with gallery (#13968) * Add testing instructions to README (#13969) * Instant search: add product result component (#13826) * [not verified] Add product search result component * [not verified] Refactor renderResult into component * [not verified] Convert SearchResult to stateless functional component * [not verified] Move comments to new shared component * [not verified] Move Tracks out to common SearchResult * [not verified] Request additional fields for product results * Correct field names and remove ratings for now * Basic styling of cards with images * Add price where available * Read result_format from the query string * Use ordered list * Style cleanup * Minor cleanup * Remove resultFormat from component state * SearchResults component cleanup * Standardise class names * Validate result format before using as CSS class * Address review nits * Instant Search: Restore caching to API requests (#13981) * Instant Search: add basic Photon support (#13998) * Add PhotonImage component * Bump default dimensions to 300x300 * Bump asset size limit to 100kb * Add layout CSS for product results (#14017) * Instant Search: Add error/offline handling for API (#14125) * Instant Search: move date into new component and use <time> element (#14133) * Instant Search: improve display of matching comments (#14132) * Instant Search: default to query string in `getResults()` (#13995) * Instant Search: use default values for getting results to avoid duplication * getResults: default to empty object Co-Authored-By: Jason Moon <4044428+jsnmoon@users.noreply.github.com> * Instant Search: add search form to main content area (#14142) * Split search form out of widget component so it can be reused in the main search area * Include search form in main content area * Move sort wrapper into component and improve class name * Give sort component a more sensible name * Keep search form in place when there are no results * Just return null when there isn't a query * Combine pagination conditionals into one clause Co-Authored-By: Jason Moon <4044428+jsnmoon@users.noreply.github.com> * Drop SearchResultsEmpty component * Tidy pagination logic * Pass all props down to SearchForm * Instant Search: add filter icon toggle (#14176) * Add filter icon * Simple show/hide toggle * Make it an interactive element * Add aria-hidden to gridicon * Instant Search: Improve UX for offline network state (#14189) * Fix invisible space breaking date layout * Restore info Gridicon * Add warning notice component * Check offline state before using short term cache * Inject cache state variables into response data * Show “cached results” notice when the user is offline * Catch connectivity error and notify the user * Show correct number of results when offline * Hide load more button when offline * Wrap new copy in translation calls * Instant Search: try using an overlay (#14205) * Try the overlay (Hotel California edition) * Add button to close overlay * Always display search form attached to search results * Add a note about portaled search inputs * Use showResults instead of using showOverlay value * Add a large z-index and increase opacity * Simplify SearchApp, trigger overlay on input focus * Disable WordPress Search for Instant Search * Revert "Disable WordPress Search for Instant Search" This reverts commit 65b7dcb. * Add jetpack namespace to translation Co-Authored-By: Jason Moon <4044428+jsnmoon@users.noreply.github.com> * Use the searchInputSelector Co-Authored-By: Jason Moon <4044428+jsnmoon@users.noreply.github.com> * Add missing quote * Instant Search: setup preact-testing-library (#13950) * Add preact-testing-library * Rebase * Add instant-search dir to existing Jest config * First attempt at test * Tidying * Create 'yarn test-search' * Remove package-lock.json * Add jsx pragma * [not verified] * Enable test and added dependency docblocks * Remove rogue Slack package * Instant Search: Port bug fixes from #14247 * Add basic build process to README. * Instant Search: trigger overlay on submit (#14248) * Remove focus event listeners * Respond to submit rather than focus * Allow enter key to launch overlay * Reflect widget search input changes in query string * Close overlay with Esc key * Reflect query string change in search widget input * Make sure the sort options match * Try grabbing focus in getResults * Remove focus code * Remove grabFocus (no longer in use) * Handle overlay escape key with useEffect rather than converting to Component * Move closeOnEscapeKey out of render * Instant Search: Add sidebar widget area (#14283) * Fix linting violations by changing `date` invocations to `gmdate` * Add sidebar widget area * Add SearchSidebar component * Integrate SearchSidebar into SearchResults * Implement Overlay animation from design prototype * Instant Search: refactor search php for the different experiences (#14284) - refactor php to extract all instant search code - add customizer for the overlay - add running the search query on the backend to display filters when the page loads. * Instant Search: fix Esc key behaviour (#14312) * Instant Search: prevent Esc from opening overlay * Use isVisible rather than shouldShowOverlay * Instant Search: Add search filtering inside overlay (#14319) * Add SearchFilters above SearchSidebar * Instant Search: Add a button to clear applied filters (#14324) * Add function to clear filter query values * Fix class names for elements in SearchFilter * Add “Clear Filters” button * Instant search: introduce overlay from right (#14339) * Introduce overlay from right * Updating overlay offset values - Changes units from `vh` to `vw`. - Updates value from `200` to `100`, as [mentioned here](#14320 (comment)). Co-authored-by: Filipe Varela <keoshi@keoshi.com> * Use the posts_per_page setting to decide how many posts to retrieve (#14360) * Instant Search: Use widgets inside overlay for filtering (#14374) * Add search filter portaling inside overlay sidebar * Update readme with new testing instructions * Instant Search: update overlay styles (#14379) * Make search input as large as possible * Remove opinionated styles * Add more margin to the filter icon * Add screen reader text for the search box * Change order of date element * Change date position * Clean up styles * Update style for comments in search results * Fix name of CSS property * Make search result title class more specific Also reorders styles See: #14379 (comment) * Remove extra screen reader text See: #14379 (comment) * Instant Search: Fix taxonomy name compilation bug (#14408) * Instant Search: Fix date formatting issue for filters (#14409) * Instant Search: Integrate customizer options (#14427) * Integrate customizer options for search overlay * Fix infinite scroll functionality * Update spacing on offline notice (#14419) * Instant Search: add dark theme styles (#14429) * Update styles for base overlay * Update styles for search results * Fix filter toggle and integrate with widget area (#14451) * Instant Search: Improve search form detection (#14474) * Instant Search: Prevent body scroll with overlay open (#14478) * Instant Search: Move focus into overlay input (#14477) * Move focus to and from overlay * Use useRef and event listeners for focus shifting Co-authored-by: Chris R <chris@bluefuton.com> * Instant Search: use taxonomy name rather than slug for filters (#14437) * Instant Search: use taxonomy name rather than slug * Fix display of category filters * Update buildFilterObject() * Fix filter formatting in Zerif Lite (#14493) * Instant Search: switch to use .slug_slash_name for displaying custom taxonomies, tags and categories (#14492) * Switch to use .slug_slash_name for taxonomies, tags and categories * Use slug in the query, and name for display * Instant Search: Hotfix body scrolling behavior * Instant Search: Apply customizer changes without page reload (#14504) * Instant Search : Update mobile structure (#14423) * Add cross gridicon * Replace close button label by a gridicon * Change position of close button * Update z-index stacking order Prevents sidebar to be in front of the close button * Reorder CSS properties * Add medium break point at 768px * Add mobile styles for filters popover * Change how transparency is set on the overlay * Update break-small to break-medium * Add styles for smaller close button on mobile devices * Add arrow element to popover * Remove styles that are out of place Given the markup has changed in #14477, these styles need to be applied elsewhere * Update search results styling * Add popover styles * Update filter icon margins * Show sidebar filters up to 768px See: #14423 (review) * Bring up the opacity on the arrow border * Reduce side padding on small screens * Move margin to label span instead of select element * Instant Search: Restore initial href upon closing overlay (#14518) * Restore initial href when closing overlay * Fix incorrect inline style removal * Instant Search: Restore focus to activeElement (#14522) * Search: Front end search filters open overlay (#14448) - Refactor filter display for front end - Remove rendering filters in the overlay - Front end filters open the overlay * Instant search: add "powered by Jetpack" message (#14519) * Show JetpackColophon when setting is activated * Translate text * Added logo and styles * Style tweaks * Link to jetpack.com/search * Add colophon to mobile filters * Margin tweak * Instant Search: Clear search and filter queries when necessary (#14533) * Clear search and filter queries if necessary * Improve initialHref restoration function * Create a separate handler for popstate events * Instant Search: Refine TrainTracks integration (#14587) * Instant Search: Fix broken dates in iOS Chrome (#14586) * Instant Search: Update list of widgets passed to JS client (#14596) * Only return widgets inside the overlay sidebar * Remove overlay sidebar membership check in JS * Instant Search: Escape wp_json_encode * Instant Search: Add missing translation calls * Update escaping from code review. * Instant Search: Fix unit tests * Instant Search: Fix ESLint errors * Instant Search: Add files to PHPCS whitelist * Instant Search: Add Jetpack Search gridicon (#14629) * Add Jetpack Search gridicon * Update search icon * Pass size variables to all SVG params * Increase icon size to 28px * Adjust padding around the icon Co-authored-by: Filipe Varela <keoshi@keoshi.com> * Instant Search: Hotfix customizer highlight color * Instant Search: Update TrainTracks to add session_id event property (#14655) * Ensures widgets included in the overlay are full width (#14670) * Prevents the load more button from being cut off in some themes (#14669) Adds margin bottom to the primary area of the overlay, which solves this problem but is also good practice to ensure search results are readable until the very last one. * Instant Search: remove date from search results (#14665) * Remove search result date component * Remove date from minimal search results * Remove styles associated with date * Add locale prefix to jetpack.com link. (#14637) * Instant Search: Address review feedback from master merge (#14659) * Address straightforward review feedback * Update transient cache name * Use add_query_arg * Improve user agent with WP/JP versions * Fix undefined index notices * Use a8c/color-studio for SCSS color variables * Hot fix for search css not building * Pass locale props to JetpackColophon on mobile (#14709) * Instant Search: update input box and icon styles (#14664) * Fix Gridicon's viewBox values We shouldn't be messing with the values in viewBox at all since all icons have a baseline of 24 x 24 px. While sizing changes, their set up should be consistent. Reported in: #14629 (comment) Thanks for catching this @jsnmoon ! * Revert search icon back to 24px * Update syling of main search box Complementary to #14661 * Remove magnifying glass logo options from the Customizer * Remove magnifying glass options from live reload * Stop passing unused showLogo option * Add generic search icon, reorder icons alphabetically * Rework markup on the search box - Adds Gridicon and input inside label. - Moves screen reader text to its own span. - Uses generic search icon. * Updates styling for the search box and its elements * [not verified] Remove magnifying glass from overlay options * Fix transition focus bug Co-authored-by: Jason Moon <4044428+jsnmoon@users.noreply.github.com> * Instant Search: change visual on close button (#14680) * Change close button to a div * Update close button styling * Remove Close Button from the Customizer * Remove close button options from Customizer live reload * [not verified] Remove close button from overlay options * [not verified] Revert change of order class comment * Remove close button from overlay.jsx * Add close button to search-results.jsx * Change position for the close button * Change theme styling for the close button * Hook closeOverlay prop in SearchResults * Use anchor instead of div for close button Co-authored-by: Jason Moon <4044428+jsnmoon@users.noreply.github.com> * Instant Search: Hide mobile filters after applying filters (#14691) * Handle case where locale is unavailable * Hide mobile filters upon filter selection * Hide popover upon clearing filters * Hide popover upon changing sort * Instant Search: Properly handle numerical searches (#14692) * Correctly handle numerical query values * Exclude Instant Search inputs from being selected * Instant Search: add more styling specificity to search input (#14661) * Ensure there's a cross to clear search on browsers that support it * Reduce font-size on results count text * Make close button behave similarly on different themes * Ensure there's a cross to clear search on browsers that support it * Reduce font-size on results count text * Make close button behave similarly on different themes * Ensures the clear button is displayed in the search box Props to @jsnmoon * Instant Search: use link to clear filters instead of button (#14744) * Use link for clear filters instead of a button * Update name in CSS * Instant Search: improve grid structure in overlay (#14745) * Add className to label * Ensure search box is always full-width * Improves alignment of the layout grid * Tweak close button position * Instant Search: updates behavior and styling of filtering options (#14711) Sorting buttons and "Filter" button drop down on mobile. Co-authored-by: Jason Moon <4044428+jsnmoon@users.noreply.github.com> Co-authored-by: Greg Ichneumon Brown <gbrown5878@gmail.com> * Remove unused showLogo property Co-authored-by: Chris R <chris@bluefuton.com> Co-authored-by: Greg Ichneumon Brown <gbrown5878@gmail.com> Co-authored-by: Filipe Varela <keoshi@keoshi.com> Co-authored-by: Sampath Jaini <skjaini@gmail.com>

Add SearchFilters above SearchSidebar

c06167a

matticbot added the Touches WP.com Files label Jan 10, 2020

jsnmoon added [Status] Needs Review This PR is ready for review. Instant Search [Feature] Search For all things related to Search labels Jan 10, 2020

jsnmoon self-assigned this Jan 10, 2020

jsnmoon requested review from bluefuton, gibrown and keoshi January 10, 2020 22:01

jsnmoon marked this pull request as ready for review January 10, 2020 22:01

jsnmoon requested a review from a team January 10, 2020 22:01

gibrown requested changes Jan 13, 2020

View reviewed changes

Instant Search: Add a button to clear applied filters (#14324)

562e4e5

* Add function to clear filter query values * Fix class names for elements in SearchFilter * Add “Clear Filters” button

keoshi mentioned this pull request Jan 14, 2020

Instant Search: prototype instant search filters overlay #14320

Closed

bluefuton approved these changes Jan 14, 2020

View reviewed changes

jsnmoon merged commit 5116f88 into instant-search-master Jan 14, 2020

jsnmoon deleted the add/instant-search-overlay-filtering branch January 14, 2020 22:19

matticbot added [Status] Needs Changelog and removed [Status] Needs Review This PR is ready for review. labels Jan 14, 2020

jsnmoon removed the [Status] Needs Changelog label Jan 14, 2020

jsnmoon mentioned this pull request Jan 16, 2020

Instant Search: Use widgets inside overlay for filtering #14374

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Instant Search: Add search filtering inside overlay#14319

Instant Search: Add search filtering inside overlay#14319
jsnmoon merged 2 commits intoinstant-search-masterfrom
add/instant-search-overlay-filtering

jsnmoon commented Jan 10, 2020 •

edited

Loading

Uh oh!

bluefuton commented Jan 13, 2020

Uh oh!

jsnmoon commented Jan 13, 2020

Uh oh!

gibrown left a comment •

edited

Loading

Uh oh!

jsnmoon commented Jan 14, 2020

Uh oh!

keoshi commented Jan 14, 2020 •

edited

Loading

Uh oh!

keoshi commented Jan 14, 2020

Uh oh!

keoshi commented Jan 14, 2020

Uh oh!

jsnmoon commented Jan 14, 2020

Uh oh!

bluefuton left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

jsnmoon commented Jan 10, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes proposed in this Pull Request:

Is this a new feature or does it add/remove features to an existing part of Jetpack?

Testing instructions:

Proposed changelog entry for your changes:

Uh oh!

bluefuton commented Jan 13, 2020

Uh oh!

jsnmoon commented Jan 13, 2020

Uh oh!

gibrown left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jsnmoon commented Jan 14, 2020

Uh oh!

keoshi commented Jan 14, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

keoshi commented Jan 14, 2020

Uh oh!

keoshi commented Jan 14, 2020

Uh oh!

jsnmoon commented Jan 14, 2020

Uh oh!

bluefuton left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

jsnmoon commented Jan 10, 2020 •

edited

Loading

gibrown left a comment •

edited

Loading

keoshi commented Jan 14, 2020 •

edited

Loading