From 29a00bc12ef3ead4d156394ea88801e716a1da5d Mon Sep 17 00:00:00 2001 From: Jason Moon Date: Fri, 23 Aug 2019 15:10:57 -0600 Subject: [PATCH 01/13] Polish styling for search results --- .../instant-search/components/search-result.jsx | 12 ++++++------ .../instant-search/components/search-result.scss | 11 ++++++++++- .../instant-search/components/search-results.scss | 3 +++ modules/search/instant-search/instant-search.scss | 1 + 4 files changed, 20 insertions(+), 7 deletions(-) create mode 100644 modules/search/instant-search/components/search-results.scss diff --git a/modules/search/instant-search/components/search-result.jsx b/modules/search/instant-search/components/search-result.jsx index 26df807f00ce9..5c35152b18037 100644 --- a/modules/search/instant-search/components/search-result.jsx +++ b/modules/search/instant-search/components/search-result.jsx @@ -13,8 +13,6 @@ class SearchResult extends Component {
{ strip( this.props.result.fields.title_html ) || 'Unknown Title' } @@ -25,10 +23,12 @@ class SearchResult extends Component { { strip( this.props.result.fields.date ).split( ' ' )[ 0 ] }
-
- { strip( this.props.result.fields.excerpt_html ) } -
-
+ { this.props.result.fields.excerpt_html && ( +
+ { strip( this.props.result.fields.excerpt_html ) } +
+ ) } +
{ sprintf( _n( '%d comment', '%d comments', this.props.result.fields.comment_count, 'jetpack' ), this.props.result.fields.comment_count diff --git a/modules/search/instant-search/components/search-result.scss b/modules/search/instant-search/components/search-result.scss index 5bb1b9926d472..79d5d754765f4 100644 --- a/modules/search/instant-search/components/search-result.scss +++ b/modules/search/instant-search/components/search-result.scss @@ -3,6 +3,11 @@ .jetpack-instant-search__result { padding: 0.125em 0; margin: 1em 0; + + &:first-child { + margin-top: 0; + } + a { box-shadow: inset 0 0 0 rgba( black, 0 ), 0 1px 0 rgba( black, 1 ); transition: color 80ms ease-in, box-shadow 130ms ease-in-out; @@ -14,7 +19,7 @@ } .jetpack-instant-search__result-author-and-date { - margin: 0.5em 0; + margin: 0.25em 0; display: flex; justify-content: space-between; } @@ -26,3 +31,7 @@ .jetpack-instant-search__result-excerpt { color: $gray; } + +.jetpack-instant-search__comment-count { + margin-top: 0.25em; +} diff --git a/modules/search/instant-search/components/search-results.scss b/modules/search/instant-search/components/search-results.scss new file mode 100644 index 0000000000000..2b0a7c0f10c4c --- /dev/null +++ b/modules/search/instant-search/components/search-results.scss @@ -0,0 +1,3 @@ +.jetpack-instant-search__search-results > p { + margin-bottom: 1em; +} diff --git a/modules/search/instant-search/instant-search.scss b/modules/search/instant-search/instant-search.scss index c42b08a53d8a0..06fda0d469113 100644 --- a/modules/search/instant-search/instant-search.scss +++ b/modules/search/instant-search/instant-search.scss @@ -1 +1,2 @@ +@import './components/search-results.scss'; @import './components/search-result.scss'; From cc766bf47960a140edaabfd63e444efc3593700c Mon Sep 17 00:00:00 2001 From: Jason Moon Date: Fri, 23 Aug 2019 15:13:44 -0600 Subject: [PATCH 02/13] Send aggregation information in API request --- modules/search/class.jetpack-search.php | 21 ++++++-- .../search/instant-search/components/api.js | 52 ++++++++++++++++--- .../components/search-widget.jsx | 2 +- modules/search/instant-search/index.jsx | 22 +++++--- package.json | 1 + yarn.lock | 5 ++ 6 files changed, 82 insertions(+), 21 deletions(-) diff --git a/modules/search/class.jetpack-search.php b/modules/search/class.jetpack-search.php index dc87b16a53996..6f8d38c09bc52 100644 --- a/modules/search/class.jetpack-search.php +++ b/modules/search/class.jetpack-search.php @@ -204,10 +204,23 @@ public function load_assets() { $script_version = self::get_asset_version( $script_relative_path ); $script_path = plugins_url( $script_relative_path, JETPACK__PLUGIN_FILE ); wp_enqueue_script( 'jetpack-instant-search', $script_path, array(), $script_version, true ); - $_blog_id = Jetpack::get_option( 'id' ); + + $filters = Jetpack_Search_Helpers::get_filters_from_widgets(); + $widgets = array(); + foreach( $filters as $key => $filter ) { + if ( ! isset( $widgets[$filter[ 'widget_id' ]] ) ) { + $widgets[$filter[ 'widget_id' ]][ 'filters' ] = array(); + $widgets[$filter[ 'widget_id' ]][ 'widget_id' ] = $filter[ 'widget_id' ]; + } + $new_filter = $filter; + $new_filter[ 'filter_id' ] = $key; + $widgets[$filter[ 'widget_id' ]][ 'filters' ][] = $new_filter; + } + // This is probably a temporary filter for testing the prototype. $options = array( - 'siteId' => $_blog_id, + 'siteId' => Jetpack::get_option( 'id' ), + 'widgets' => array_values( $widgets ), ); /** * Customize Instant Search Options. @@ -221,9 +234,7 @@ public function load_assets() { $options = apply_filters( 'jetpack_instant_search_options', $options ); wp_localize_script( - 'jetpack-instant-search', - 'jetpack_instant_search_options', - $options + 'jetpack-instant-search', 'JetpackInstantSearchOptions', $options ); } diff --git a/modules/search/instant-search/components/api.js b/modules/search/instant-search/components/api.js index 0cbbbcd5cefb1..3d1ad9522c710 100644 --- a/modules/search/instant-search/components/api.js +++ b/modules/search/instant-search/components/api.js @@ -2,6 +2,8 @@ * External dependencies */ import fetch from 'unfetch'; +import { encode } from 'qss'; +import { flatten } from 'q-flat'; const FIELDS = [ 'author', @@ -13,16 +15,50 @@ const FIELDS = [ 'title_html', ]; -function stringifyArray( fieldName, array ) { - return array.map( ( element, index ) => `${ fieldName }[${ index }]=${ element }` ).join( '&' ); +export function buildFilterAggregations( widgets = [] ) { + const aggregation = {}; + widgets.forEach( ( { filters: widgetFilters } ) => + widgetFilters.forEach( filter => { + switch ( filter.type ) { + case 'date_histogram': { + const field = filter.field === 'post_date_gmt' ? 'date_gmt' : 'date'; + aggregation[ filter.filter_id ] = { + date_histogram: { field, interval: filter.interval }, + }; + break; + } + case 'taxonomy': { + let field = `taxonomy.${ filter.taxonomy }.slug`; + if ( filter.taxonomy === 'post_tag' ) { + field = 'tag.slug'; + } else if ( filter.type === 'category' ) { + field = 'category.slug'; + } + aggregation[ filter.filter_id ] = { terms: { field, size: filter.count } }; + break; + } + case 'post_type': { + aggregation[ filter.filter_id ] = { terms: { field: filter.type, size: filter.count } }; + break; + } + } + } ) + ); + return aggregation; } -function getAPIUrl( siteId, query ) { - return `https://public-api.wordpress.com/rest/v1.3/sites/${ siteId }/search?query=${ encodeURIComponent( - query - ) }&${ stringifyArray( 'fields', FIELDS ) }`; +function getAPIUrl( siteId, query, widgets ) { + const queryString = encode( + flatten( { + aggregations: buildFilterAggregations( widgets ), + fields: FIELDS, + query: encodeURIComponent( query ), + } ) + ); + + return `https://public-api.wordpress.com/rest/v1.3/sites/${ siteId }/search?${ queryString }`; } -export function search( siteId, query ) { - return fetch( getAPIUrl( siteId, query ) ); +export function search( siteId, query, widgets ) { + return fetch( getAPIUrl( siteId, query, widgets ) ); } diff --git a/modules/search/instant-search/components/search-widget.jsx b/modules/search/instant-search/components/search-widget.jsx index 07f6140e9d43d..7f50fad8bb808 100644 --- a/modules/search/instant-search/components/search-widget.jsx +++ b/modules/search/instant-search/components/search-widget.jsx @@ -47,7 +47,7 @@ class SearchApp extends Component { this.requestId++; const requestId = this.requestId; - search( this.props.siteId, query ) + search( this.props.siteId, query, this.props.widgets ) .then( response => response.json() ) .then( json => { if ( this.requestId === requestId ) { diff --git a/modules/search/instant-search/index.jsx b/modules/search/instant-search/index.jsx index 65b8274f3be66..913788da03b52 100644 --- a/modules/search/instant-search/index.jsx +++ b/modules/search/instant-search/index.jsx @@ -24,24 +24,32 @@ const hideSearchHeader = () => { } }; -const injectSearchWidget = ( initialValue, target, siteId, grabFocus ) => { +const injectSearchWidget = ( initialValue, target, grabFocus ) => { render( - , + , target ); }; document.addEventListener( 'DOMContentLoaded', function() { - //This var is provided by wp_localize_script() so we have limited control - const options = jetpack_instant_search_options; // eslint-disable-line no-undef - - if ( 'siteId' in options && document.body && document.body.classList.contains( 'search' ) ) { + if ( + !! window.JetpackInstantSearchOptions && + 'siteId' in window.JetpackInstantSearchOptions && + 'widgets' in window.JetpackInstantSearchOptions && + document.body && + document.body.classList.contains( 'search' ) + ) { const widget = document.querySelector( '.widget_search' ); if ( !! widget ) { removeChildren( widget ); removeChildren( document.querySelector( 'main' ) ); hideSearchHeader(); - injectSearchWidget( getSearchQuery(), widget, options.siteId ); + injectSearchWidget( getSearchQuery(), widget ); } } } ); diff --git a/package.json b/package.json index 13af00d7bdd7f..425d035c7bff0 100644 --- a/package.json +++ b/package.json @@ -132,6 +132,7 @@ "preact": "8.4.2", "preact-portal": "1.1.3", "prop-types": "15.7.2", + "q-flat": "1.0.7", "qss": "2.0.3", "react-pure-render": "1.0.2", "react-redux": "6.0.1", diff --git a/yarn.lock b/yarn.lock index d216954e4d461..90414caa745fe 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10307,6 +10307,11 @@ puppeteer@1.19.0: rimraf "^2.6.1" ws "^6.1.0" +q-flat@1.0.7: + version "1.0.7" + resolved "https://registry.yarnpkg.com/q-flat/-/q-flat-1.0.7.tgz#4cf81aede99d2a9acbafcf503af0d0184a850d3d" + integrity sha512-Ug+B6yajVE5HF7eAszOvAcYmQ+DbYaDcQlxYuW9RaAqwZTRZQq+lHMGqHlnaxKP7CfuGCpXQXOb4qymRYMkYEQ== + q@^1.1.2: version "1.5.1" resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7" From 103768c7458575fa86b64e9e596fd20f978d75f1 Mon Sep 17 00:00:00 2001 From: Jason Moon Date: Fri, 23 Aug 2019 17:08:32 -0600 Subject: [PATCH 03/13] Move API utility into lib folder --- modules/search/instant-search/{components => lib}/api.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) rename modules/search/instant-search/{components => lib}/api.js (87%) diff --git a/modules/search/instant-search/components/api.js b/modules/search/instant-search/lib/api.js similarity index 87% rename from modules/search/instant-search/components/api.js rename to modules/search/instant-search/lib/api.js index 3d1ad9522c710..e2d58ee44ca8b 100644 --- a/modules/search/instant-search/components/api.js +++ b/modules/search/instant-search/lib/api.js @@ -47,10 +47,10 @@ export function buildFilterAggregations( widgets = [] ) { return aggregation; } -function getAPIUrl( siteId, query, widgets ) { +function getAPIUrl( siteId, query, aggregations ) { const queryString = encode( flatten( { - aggregations: buildFilterAggregations( widgets ), + aggregations, fields: FIELDS, query: encodeURIComponent( query ), } ) @@ -59,6 +59,6 @@ function getAPIUrl( siteId, query, widgets ) { return `https://public-api.wordpress.com/rest/v1.3/sites/${ siteId }/search?${ queryString }`; } -export function search( siteId, query, widgets ) { - return fetch( getAPIUrl( siteId, query, widgets ) ); +export function search( siteId, query, aggregations ) { + return fetch( getAPIUrl( siteId, query, aggregations ) ); } From ee461ff665f1ce2cd9531784f32086e413be7754 Mon Sep 17 00:00:00 2001 From: Jason Moon Date: Fri, 23 Aug 2019 17:09:02 -0600 Subject: [PATCH 04/13] Refactor DOM utility into a lib file --- modules/search/instant-search/index.jsx | 7 +------ modules/search/instant-search/lib/dom.js | 5 +++++ 2 files changed, 6 insertions(+), 6 deletions(-) create mode 100644 modules/search/instant-search/lib/dom.js diff --git a/modules/search/instant-search/index.jsx b/modules/search/instant-search/index.jsx index 913788da03b52..14d60f4062cc5 100644 --- a/modules/search/instant-search/index.jsx +++ b/modules/search/instant-search/index.jsx @@ -9,14 +9,9 @@ import { h, render } from 'preact'; * Internal dependencies */ import SearchWidget from './components/search-widget'; +import { removeChildren } from './lib/dom'; import { getSearchQuery } from './lib/query-string'; -function removeChildren( htmlElement ) { - while ( htmlElement.lastChild ) { - htmlElement.removeChild( htmlElement.lastChild ); - } -} - const hideSearchHeader = () => { const titleElements = document.getElementById( 'content' ).getElementsByClassName( 'page-title' ); if ( titleElements.length > 0 ) { diff --git a/modules/search/instant-search/lib/dom.js b/modules/search/instant-search/lib/dom.js new file mode 100644 index 0000000000000..a55fe918d7422 --- /dev/null +++ b/modules/search/instant-search/lib/dom.js @@ -0,0 +1,5 @@ +export function removeChildren( htmlElement ) { + while ( htmlElement.lastChild ) { + htmlElement.removeChild( htmlElement.lastChild ); + } +} From a6860d4c75bc6a66421a2209717f1721a1ef0718 Mon Sep 17 00:00:00 2001 From: Jason Moon Date: Fri, 23 Aug 2019 17:10:53 -0600 Subject: [PATCH 05/13] Render disabled filter widgets --- .../components/search-filter-dates.jsx | 42 ++++++++++++++++++ .../components/search-filter-post-types.jsx | 37 ++++++++++++++++ .../components/search-filter-taxonomies.jsx | 37 ++++++++++++++++ .../components/search-filters-widget.jsx | 43 +++++++++++++++++++ .../components/search-filters-widget.scss | 5 +++ .../components/search-widget.jsx | 26 ++++++++--- modules/search/instant-search/index.jsx | 4 +- .../search/instant-search/instant-search.scss | 1 + 8 files changed, 188 insertions(+), 7 deletions(-) create mode 100644 modules/search/instant-search/components/search-filter-dates.jsx create mode 100644 modules/search/instant-search/components/search-filter-post-types.jsx create mode 100644 modules/search/instant-search/components/search-filter-taxonomies.jsx create mode 100644 modules/search/instant-search/components/search-filters-widget.jsx create mode 100644 modules/search/instant-search/components/search-filters-widget.scss diff --git a/modules/search/instant-search/components/search-filter-dates.jsx b/modules/search/instant-search/components/search-filter-dates.jsx new file mode 100644 index 0000000000000..7ea7d5363dfc9 --- /dev/null +++ b/modules/search/instant-search/components/search-filter-dates.jsx @@ -0,0 +1,42 @@ +/** @jsx h */ + +/** + * External dependencies + */ +import { h, Component } from 'preact'; +import strip from 'strip'; + +export default class SearchFilterDates extends Component { + render() { + return ( +
+

{ this.props.filter.name }

+
    + { this.props.aggregation && + 'buckets' in this.props.aggregation && + [ + ...this.props.aggregation.buckets + // TODO: Remove this filter; API should only be sending buckets with document counts. + .filter( bucket => !! bucket && bucket.doc_count > 0 ) + .map( bucket => ( +
    + + +
    + ) ), + ] + // TODO: Remove this reverse & slice when API adds filter count support + .reverse() + .slice( 0, 5 ) } +
+
+ ); + } +} diff --git a/modules/search/instant-search/components/search-filter-post-types.jsx b/modules/search/instant-search/components/search-filter-post-types.jsx new file mode 100644 index 0000000000000..9f9738d241393 --- /dev/null +++ b/modules/search/instant-search/components/search-filter-post-types.jsx @@ -0,0 +1,37 @@ +/** @jsx h */ + +/** + * External dependencies + */ +import { h, Component } from 'preact'; +import strip from 'strip'; + +export default class SearchFilterPostTypes extends Component { + render() { + return ( +
+

{ this.props.filter.name }

+
    + { this.props.aggregation && + 'buckets' in this.props.aggregation && + this.props.aggregation.buckets + // TODO: Remove this filter; API should only be sending buckets with document counts. + .filter( bucket => !! bucket && bucket.doc_count > 0 ) + .map( bucket => ( +
    + + +
    + ) ) } +
+
+ ); + } +} diff --git a/modules/search/instant-search/components/search-filter-taxonomies.jsx b/modules/search/instant-search/components/search-filter-taxonomies.jsx new file mode 100644 index 0000000000000..4b185d66fc26e --- /dev/null +++ b/modules/search/instant-search/components/search-filter-taxonomies.jsx @@ -0,0 +1,37 @@ +/** @jsx h */ + +/** + * External dependencies + */ +import { h, Component } from 'preact'; +import strip from 'strip'; + +export default class SearchFilterTaxonomies extends Component { + render() { + return ( +
+

{ this.props.filter.name }

+
    + { this.props.aggregation && + 'buckets' in this.props.aggregation && + this.props.aggregation.buckets + // TODO: Remove this filter; API should only be sending buckets with document counts. + .filter( bucket => !! bucket && bucket.doc_count > 0 ) + .map( bucket => ( +
    + + +
    + ) ) } +
+
+ ); + } +} diff --git a/modules/search/instant-search/components/search-filters-widget.jsx b/modules/search/instant-search/components/search-filters-widget.jsx new file mode 100644 index 0000000000000..83ff91d26c2cd --- /dev/null +++ b/modules/search/instant-search/components/search-filters-widget.jsx @@ -0,0 +1,43 @@ +/** @jsx h */ + +/** + * External dependencies + */ +import { h, Component } from 'preact'; +// NOTE: We only import the debounce package here for to reduced bundle size. +// Do not import the entire lodash library! +// eslint-disable-next-line lodash/import-scope +import get from 'lodash/get'; + +/** + * Internal dependencies + */ +import SearchFilterDates from './search-filter-dates'; +import SearchFilterTaxonomies from './search-filter-taxonomies'; +import SearchFilterPostTypes from './search-filter-post-types'; + +export default class SearchFiltersWidget extends Component { + renderFilterComponent( aggregations ) { + return filter => { + const results = aggregations ? aggregations[ filter.filter_id ] : null; + switch ( filter.type ) { + case 'date_histogram': + return ; + case 'taxonomy': + return ; + case 'post_type': + return ; + } + }; + } + + render() { + return ( +
+ { get( this.props.widget, 'filters' ).map( + this.renderFilterComponent( get( this.props.results, 'aggregations' ) ) + ) } +
+ ); + } +} diff --git a/modules/search/instant-search/components/search-filters-widget.scss b/modules/search/instant-search/components/search-filters-widget.scss new file mode 100644 index 0000000000000..d836499e7453a --- /dev/null +++ b/modules/search/instant-search/components/search-filters-widget.scss @@ -0,0 +1,5 @@ +.jetpack-search-filters-widget__filter-list { + label { + display: inline-block; + } +} diff --git a/modules/search/instant-search/components/search-widget.jsx b/modules/search/instant-search/components/search-widget.jsx index 7f50fad8bb808..c850a3d1a4d44 100644 --- a/modules/search/instant-search/components/search-widget.jsx +++ b/modules/search/instant-search/components/search-widget.jsx @@ -14,8 +14,10 @@ import debounce from 'lodash/debounce'; * Internal dependencies */ import SearchResults from './search-results'; -import { search } from './api'; +import SearchFiltersWidget from './search-filters-widget'; +import { search } from '../lib/api'; import { setSearchQuery } from '../lib/query-string'; +import { removeChildren } from '../lib/dom'; class SearchApp extends Component { constructor() { @@ -23,15 +25,20 @@ class SearchApp extends Component { this.requestId = 0; this.state = { query: this.props.initialValue, - results: [], + results: {}, }; this.getResults = debounce( this.getResults, 500 ); this.getResults( this.props.initialValue ); } + componentDidMount() { if ( this.props.grabFocus ) { this.input.focus(); } + + this.props.widgets.forEach( function( widget ) { + removeChildren( document.getElementById( widget.widget_id ) ); + } ); } bindInput = input => ( this.input = input ); @@ -47,7 +54,7 @@ class SearchApp extends Component { this.requestId++; const requestId = this.requestId; - search( this.props.siteId, query, this.props.widgets ) + search( this.props.siteId, query, this.props.aggregations ) .then( response => response.json() ) .then( json => { if ( this.requestId === requestId ) { @@ -62,15 +69,22 @@ class SearchApp extends Component { render() { const { query, results } = this.state; return ( -
-

+

+
-

+
+ + { this.props.widgets.map( widget => ( + + + + ) ) } + diff --git a/modules/search/instant-search/index.jsx b/modules/search/instant-search/index.jsx index 14d60f4062cc5..e900c419d5907 100644 --- a/modules/search/instant-search/index.jsx +++ b/modules/search/instant-search/index.jsx @@ -9,6 +9,7 @@ import { h, render } from 'preact'; * Internal dependencies */ import SearchWidget from './components/search-widget'; +import { buildFilterAggregations } from './lib/api'; import { removeChildren } from './lib/dom'; import { getSearchQuery } from './lib/query-string'; @@ -22,8 +23,9 @@ const hideSearchHeader = () => { const injectSearchWidget = ( initialValue, target, grabFocus ) => { render( , diff --git a/modules/search/instant-search/instant-search.scss b/modules/search/instant-search/instant-search.scss index 06fda0d469113..382a00cb1b913 100644 --- a/modules/search/instant-search/instant-search.scss +++ b/modules/search/instant-search/instant-search.scss @@ -1,2 +1,3 @@ @import './components/search-results.scss'; @import './components/search-result.scss'; +@import './components/search-filters-widget.scss'; From e50355b40387dcca4b3f56e0c458bce44b7b2c65 Mon Sep 17 00:00:00 2001 From: Jason Moon Date: Mon, 26 Aug 2019 14:53:00 -0600 Subject: [PATCH 06/13] Bump maximum entry point size to 35kb --- webpack.config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/webpack.config.js b/webpack.config.js index 3fac55f661935..7bf09ce9f594f 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -85,8 +85,8 @@ module.exports = [ performance: isDevelopment ? {} : { - maxAssetSize: 30000, - maxEntrypointSize: 30000, + maxAssetSize: 35000, + maxEntrypointSize: 35000, hints: 'error', }, }, From 06345b54f8f7045ef2fd74abcef2adb98a7934ae Mon Sep 17 00:00:00 2001 From: Jason Moon Date: Mon, 26 Aug 2019 16:14:51 -0600 Subject: [PATCH 07/13] Render disabled filter widgets, part 2 --- .../components/search-filter-post-types.jsx | 29 +++++++++---------- .../components/search-filter-taxonomies.jsx | 29 +++++++++---------- 2 files changed, 26 insertions(+), 32 deletions(-) diff --git a/modules/search/instant-search/components/search-filter-post-types.jsx b/modules/search/instant-search/components/search-filter-post-types.jsx index 9f9738d241393..4370d856c4a6f 100644 --- a/modules/search/instant-search/components/search-filter-post-types.jsx +++ b/modules/search/instant-search/components/search-filter-post-types.jsx @@ -14,22 +14,19 @@ export default class SearchFilterPostTypes extends Component {
    { this.props.aggregation && 'buckets' in this.props.aggregation && - this.props.aggregation.buckets - // TODO: Remove this filter; API should only be sending buckets with document counts. - .filter( bucket => !! bucket && bucket.doc_count > 0 ) - .map( bucket => ( -
    - - -
    - ) ) } + this.props.aggregation.buckets.map( bucket => ( +
    + + +
    + ) ) }
); diff --git a/modules/search/instant-search/components/search-filter-taxonomies.jsx b/modules/search/instant-search/components/search-filter-taxonomies.jsx index 4b185d66fc26e..fbd93a7fcfdba 100644 --- a/modules/search/instant-search/components/search-filter-taxonomies.jsx +++ b/modules/search/instant-search/components/search-filter-taxonomies.jsx @@ -14,22 +14,19 @@ export default class SearchFilterTaxonomies extends Component {
    { this.props.aggregation && 'buckets' in this.props.aggregation && - this.props.aggregation.buckets - // TODO: Remove this filter; API should only be sending buckets with document counts. - .filter( bucket => !! bucket && bucket.doc_count > 0 ) - .map( bucket => ( -
    - - -
    - ) ) } + this.props.aggregation.buckets.map( bucket => ( +
    + + +
    + ) ) }
); From 5e1f56267ce95dbff0a0397c51d02c59fc1daa16 Mon Sep 17 00:00:00 2001 From: Jason Moon Date: Wed, 28 Aug 2019 14:20:16 -0600 Subject: [PATCH 08/13] Omit filter control if no aggregation value --- .../instant-search/components/search-filters-widget.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/modules/search/instant-search/components/search-filters-widget.jsx b/modules/search/instant-search/components/search-filters-widget.jsx index 83ff91d26c2cd..33c2d63cafc8e 100644 --- a/modules/search/instant-search/components/search-filters-widget.jsx +++ b/modules/search/instant-search/components/search-filters-widget.jsx @@ -22,11 +22,11 @@ export default class SearchFiltersWidget extends Component { const results = aggregations ? aggregations[ filter.filter_id ] : null; switch ( filter.type ) { case 'date_histogram': - return ; + return results && ; case 'taxonomy': - return ; + return results && ; case 'post_type': - return ; + return results && ; } }; } From a5d8d6009aba7a6ff1964e0be419cbd333c925f3 Mon Sep 17 00:00:00 2001 From: Jason Moon Date: Wed, 28 Aug 2019 14:21:04 -0600 Subject: [PATCH 09/13] Filter on key_as_string for date filter --- .../search/instant-search/components/search-filter-dates.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/search/instant-search/components/search-filter-dates.jsx b/modules/search/instant-search/components/search-filter-dates.jsx index 7ea7d5363dfc9..2d8e3340fcaba 100644 --- a/modules/search/instant-search/components/search-filter-dates.jsx +++ b/modules/search/instant-search/components/search-filter-dates.jsx @@ -23,7 +23,7 @@ export default class SearchFilterDates extends Component {
{ strip( this.props.result.fields.title_html ) || 'Unknown Title' } @@ -23,12 +25,10 @@ class SearchResult extends Component { { strip( this.props.result.fields.date ).split( ' ' )[ 0 ] }
- { this.props.result.fields.excerpt_html && ( -
- { strip( this.props.result.fields.excerpt_html ) } -
- ) } -
+
+ { strip( this.props.result.fields.excerpt_html ) } +
+
{ sprintf( _n( '%d comment', '%d comments', this.props.result.fields.comment_count, 'jetpack' ), this.props.result.fields.comment_count diff --git a/modules/search/instant-search/components/search-result.scss b/modules/search/instant-search/components/search-result.scss index 79d5d754765f4..5bb1b9926d472 100644 --- a/modules/search/instant-search/components/search-result.scss +++ b/modules/search/instant-search/components/search-result.scss @@ -3,11 +3,6 @@ .jetpack-instant-search__result { padding: 0.125em 0; margin: 1em 0; - - &:first-child { - margin-top: 0; - } - a { box-shadow: inset 0 0 0 rgba( black, 0 ), 0 1px 0 rgba( black, 1 ); transition: color 80ms ease-in, box-shadow 130ms ease-in-out; @@ -19,7 +14,7 @@ } .jetpack-instant-search__result-author-and-date { - margin: 0.25em 0; + margin: 0.5em 0; display: flex; justify-content: space-between; } @@ -31,7 +26,3 @@ .jetpack-instant-search__result-excerpt { color: $gray; } - -.jetpack-instant-search__comment-count { - margin-top: 0.25em; -} From 2c6eec08ef073098f8f422510a924f37f3ede8f3 Mon Sep 17 00:00:00 2001 From: Jason Moon Date: Wed, 28 Aug 2019 16:04:41 -0600 Subject: [PATCH 11/13] Map registered post types for rendering --- modules/search/class.jetpack-search.php | 5 ++- .../components/search-filter-post-types.jsx | 30 +++++++------ .../components/search-filters-widget.jsx | 45 ++++++++++++------- .../components/search-widget.jsx | 6 ++- modules/search/instant-search/index.jsx | 2 + 5 files changed, 56 insertions(+), 32 deletions(-) diff --git a/modules/search/class.jetpack-search.php b/modules/search/class.jetpack-search.php index 6f8d38c09bc52..396bd4a62d32d 100644 --- a/modules/search/class.jetpack-search.php +++ b/modules/search/class.jetpack-search.php @@ -219,8 +219,9 @@ public function load_assets() { // This is probably a temporary filter for testing the prototype. $options = array( - 'siteId' => Jetpack::get_option( 'id' ), - 'widgets' => array_values( $widgets ), + 'postTypes' => get_post_types(), + 'siteId' => Jetpack::get_option( 'id' ), + 'widgets' => array_values( $widgets ), ); /** * Customize Instant Search Options. diff --git a/modules/search/instant-search/components/search-filter-post-types.jsx b/modules/search/instant-search/components/search-filter-post-types.jsx index 4370d856c4a6f..3ff2751426221 100644 --- a/modules/search/instant-search/components/search-filter-post-types.jsx +++ b/modules/search/instant-search/components/search-filter-post-types.jsx @@ -7,6 +7,22 @@ import { h, Component } from 'preact'; import strip from 'strip'; export default class SearchFilterPostTypes extends Component { + renderPostType = ( { key, doc_count: count } ) => { + const name = this.props.postTypes[ key ]; + return ( +
+ + +
+ ); + }; render() { return (
@@ -14,19 +30,7 @@ export default class SearchFilterPostTypes extends Component {
    { this.props.aggregation && 'buckets' in this.props.aggregation && - this.props.aggregation.buckets.map( bucket => ( -
    - - -
    - ) ) } + this.props.aggregation.buckets.map( this.renderPostType ) }
); diff --git a/modules/search/instant-search/components/search-filters-widget.jsx b/modules/search/instant-search/components/search-filters-widget.jsx index 33c2d63cafc8e..e14e10fc2ce28 100644 --- a/modules/search/instant-search/components/search-filters-widget.jsx +++ b/modules/search/instant-search/components/search-filters-widget.jsx @@ -17,26 +17,39 @@ import SearchFilterTaxonomies from './search-filter-taxonomies'; import SearchFilterPostTypes from './search-filter-post-types'; export default class SearchFiltersWidget extends Component { - renderFilterComponent( aggregations ) { - return filter => { - const results = aggregations ? aggregations[ filter.filter_id ] : null; - switch ( filter.type ) { - case 'date_histogram': - return results && ; - case 'taxonomy': - return results && ; - case 'post_type': - return results && ; - } - }; - } + renderFilterComponent = ( { filter, results } ) => { + switch ( filter.type ) { + case 'date_histogram': + return results && ; + case 'taxonomy': + return results && ; + case 'post_type': + return ( + results && ( + + ) + ); + } + }; render() { + const aggregations = get( this.props.results, 'aggregations' ); return (
- { get( this.props.widget, 'filters' ).map( - this.renderFilterComponent( get( this.props.results, 'aggregations' ) ) - ) } + { get( this.props.widget, 'filters' ) + .map( filter => + aggregations ? { filter, results: aggregations[ filter.filter_id ] } : null + ) + .filter( data => !! data ) + .filter( + ( { results } ) => + !! results && Array.isArray( results.buckets ) && results.buckets.length > 0 + ) + .map( this.renderFilterComponent ) }
); } diff --git a/modules/search/instant-search/components/search-widget.jsx b/modules/search/instant-search/components/search-widget.jsx index c850a3d1a4d44..af18760274d08 100644 --- a/modules/search/instant-search/components/search-widget.jsx +++ b/modules/search/instant-search/components/search-widget.jsx @@ -81,7 +81,11 @@ class SearchApp extends Component { { this.props.widgets.map( widget => ( - + ) ) } diff --git a/modules/search/instant-search/index.jsx b/modules/search/instant-search/index.jsx index e900c419d5907..3b63f6eccb986 100644 --- a/modules/search/instant-search/index.jsx +++ b/modules/search/instant-search/index.jsx @@ -26,6 +26,7 @@ const injectSearchWidget = ( initialValue, target, grabFocus ) => { aggregations={ buildFilterAggregations( window.JetpackInstantSearchOptions.widgets ) } grabFocus={ grabFocus } initialValue={ initialValue } + postTypes={ window.JetpackInstantSearchOptions.postTypes } siteId={ window.JetpackInstantSearchOptions.siteId } widgets={ window.JetpackInstantSearchOptions.widgets } />, @@ -36,6 +37,7 @@ const injectSearchWidget = ( initialValue, target, grabFocus ) => { document.addEventListener( 'DOMContentLoaded', function() { if ( !! window.JetpackInstantSearchOptions && + 'postTypes' in window.JetpackInstantSearchOptions && 'siteId' in window.JetpackInstantSearchOptions && 'widgets' in window.JetpackInstantSearchOptions && document.body && From 3b9cb078f8cbb1a5133dc012d12a5ba6816750e3 Mon Sep 17 00:00:00 2001 From: Jason Moon Date: Wed, 28 Aug 2019 16:46:37 -0600 Subject: [PATCH 12/13] Simplify injection by using Portals-only component --- .../components/search-filters-widget.jsx | 2 +- .../components/search-widget.jsx | 54 +++++++++++-------- modules/search/instant-search/index.jsx | 23 ++------ modules/search/instant-search/lib/dom.js | 7 +++ 4 files changed, 45 insertions(+), 41 deletions(-) diff --git a/modules/search/instant-search/components/search-filters-widget.jsx b/modules/search/instant-search/components/search-filters-widget.jsx index e14e10fc2ce28..efbefd835cb9a 100644 --- a/modules/search/instant-search/components/search-filters-widget.jsx +++ b/modules/search/instant-search/components/search-filters-widget.jsx @@ -39,7 +39,7 @@ export default class SearchFiltersWidget extends Component { render() { const aggregations = get( this.props.results, 'aggregations' ); return ( -
+
{ get( this.props.widget, 'filters' ) .map( filter => aggregations ? { filter, results: aggregations[ filter.filter_id ] } : null diff --git a/modules/search/instant-search/components/search-widget.jsx b/modules/search/instant-search/components/search-widget.jsx index af18760274d08..656af2aaa51b6 100644 --- a/modules/search/instant-search/components/search-widget.jsx +++ b/modules/search/instant-search/components/search-widget.jsx @@ -3,7 +3,7 @@ /** * External dependencies */ -import { h, Component } from 'preact'; +import Preact, { h, Component } from 'preact'; import Portal from 'preact-portal'; // NOTE: We only import the debounce package here for to reduced bundle size. // Do not import the entire lodash library! @@ -17,11 +17,12 @@ import SearchResults from './search-results'; import SearchFiltersWidget from './search-filters-widget'; import { search } from '../lib/api'; import { setSearchQuery } from '../lib/query-string'; -import { removeChildren } from '../lib/dom'; +import { removeChildren, hideSearchHeader } from '../lib/dom'; class SearchApp extends Component { constructor() { super( ...arguments ); + this.input = Preact.createRef(); this.requestId = 0; this.state = { query: this.props.initialValue, @@ -33,15 +34,16 @@ class SearchApp extends Component { componentDidMount() { if ( this.props.grabFocus ) { - this.input.focus(); + this.input.current.focus(); } + hideSearchHeader(); + removeChildren( document.querySelector( 'main' ) ); this.props.widgets.forEach( function( widget ) { removeChildren( document.getElementById( widget.widget_id ) ); } ); } - bindInput = input => ( this.input = input ); onChangeQuery = event => { const query = event.target.value; this.setState( { query } ); @@ -69,30 +71,40 @@ class SearchApp extends Component { render() { const { query, results } = this.state; return ( -
-
- -
- - { this.props.widgets.map( widget => ( + + { this.props.widgets.map( ( widget, index ) => ( - +
+
+ { /* TODO: Add support for preserving label text */ } + + +
+
+ +
) ) } -
+ ); } } diff --git a/modules/search/instant-search/index.jsx b/modules/search/instant-search/index.jsx index 3b63f6eccb986..bbb6ac2df5c25 100644 --- a/modules/search/instant-search/index.jsx +++ b/modules/search/instant-search/index.jsx @@ -10,17 +10,9 @@ import { h, render } from 'preact'; */ import SearchWidget from './components/search-widget'; import { buildFilterAggregations } from './lib/api'; -import { removeChildren } from './lib/dom'; import { getSearchQuery } from './lib/query-string'; -const hideSearchHeader = () => { - const titleElements = document.getElementById( 'content' ).getElementsByClassName( 'page-title' ); - if ( titleElements.length > 0 ) { - titleElements[ 0 ].style.display = 'none'; - } -}; - -const injectSearchWidget = ( initialValue, target, grabFocus ) => { +const injectSearchWidget = ( initialValue, grabFocus ) => { render( { siteId={ window.JetpackInstantSearchOptions.siteId } widgets={ window.JetpackInstantSearchOptions.widgets } />, - target + document.body ); }; @@ -40,15 +32,8 @@ document.addEventListener( 'DOMContentLoaded', function() { 'postTypes' in window.JetpackInstantSearchOptions && 'siteId' in window.JetpackInstantSearchOptions && 'widgets' in window.JetpackInstantSearchOptions && - document.body && - document.body.classList.contains( 'search' ) + window.JetpackInstantSearchOptions.widgets.length > 0 ) { - const widget = document.querySelector( '.widget_search' ); - if ( !! widget ) { - removeChildren( widget ); - removeChildren( document.querySelector( 'main' ) ); - hideSearchHeader(); - injectSearchWidget( getSearchQuery(), widget ); - } + injectSearchWidget( getSearchQuery() ); } } ); diff --git a/modules/search/instant-search/lib/dom.js b/modules/search/instant-search/lib/dom.js index a55fe918d7422..707f88d241c56 100644 --- a/modules/search/instant-search/lib/dom.js +++ b/modules/search/instant-search/lib/dom.js @@ -3,3 +3,10 @@ export function removeChildren( htmlElement ) { htmlElement.removeChild( htmlElement.lastChild ); } } + +export function hideSearchHeader() { + const title = document.querySelector( '#content .page-title' ); + if ( title ) { + title.style.display = 'none'; + } +} From a4e056f94f1ed896a3232e6a34051d0af76cf00a Mon Sep 17 00:00:00 2001 From: Greg Ichneumon Brown Date: Fri, 30 Aug 2019 08:51:58 -0600 Subject: [PATCH 13/13] Instant Search: Implement minimal search results and spelling correction (#13365) Refactor search results and improve their display. Add display of when we make spelling corrections. --- .../search/instant-search/components/api.js | 83 +++- .../components/gridicon/index.jsx | 380 ++++++++++++++++++ .../components/gridicon/style.scss | 15 + .../components/search-result-minimal.jsx | 105 +++++ .../components/search-result-minimal.scss | 39 ++ .../components/search-result.jsx | 42 -- .../components/search-result.scss | 28 -- .../components/search-results.jsx | 45 ++- .../components/search-results.scss | 23 ++ .../components/search-widget.jsx | 9 +- modules/search/instant-search/index.jsx | 10 +- .../search/instant-search/instant-search.scss | 5 +- 12 files changed, 684 insertions(+), 100 deletions(-) create mode 100644 modules/search/instant-search/components/gridicon/index.jsx create mode 100644 modules/search/instant-search/components/gridicon/style.scss create mode 100644 modules/search/instant-search/components/search-result-minimal.jsx create mode 100644 modules/search/instant-search/components/search-result-minimal.scss delete mode 100644 modules/search/instant-search/components/search-result.jsx delete mode 100644 modules/search/instant-search/components/search-result.scss create mode 100644 modules/search/instant-search/components/search-results.scss diff --git a/modules/search/instant-search/components/api.js b/modules/search/instant-search/components/api.js index 0cbbbcd5cefb1..701fb69ca9243 100644 --- a/modules/search/instant-search/components/api.js +++ b/modules/search/instant-search/components/api.js @@ -3,26 +3,73 @@ */ import fetch from 'unfetch'; -const FIELDS = [ - 'author', - 'comment_count', - 'date', - 'excerpt_html', - 'gravatar_url', - 'permalink.url.raw', - 'title_html', -]; +/** + * @preserve jquery-param (c) 2015 KNOWLEDGECODE | MIT + * @param {object} a - parameters to add + * @returns {string} url query string + * From https://github.com/knowledgecode/jquery-param + */ +function query_params( a ) { + //eslint-disable-next-line no-var + var s = []; + const add = function( k, v ) { + v = typeof v === 'function' ? v() : v; + //eslint-disable-next-line no-nested-ternary + v = v === null ? '' : v === undefined ? '' : v; + s[ s.length ] = encodeURIComponent( k ) + '=' + encodeURIComponent( v ); + }; + const buildParams = function( prefix, obj ) { + let i, len, key; -function stringifyArray( fieldName, array ) { - return array.map( ( element, index ) => `${ fieldName }[${ index }]=${ element }` ).join( '&' ); + if ( prefix ) { + if ( Array.isArray( obj ) ) { + for ( i = 0, len = obj.length; i < len; i++ ) { + buildParams( + prefix + '[' + ( typeof obj[ i ] === 'object' && obj[ i ] ? i : '' ) + ']', + obj[ i ] + ); + } + } else if ( String( obj ) === '[object Object]' ) { + for ( key in obj ) { + buildParams( prefix + '[' + key + ']', obj[ key ] ); + } + } else { + add( prefix, obj ); + } + } else if ( Array.isArray( obj ) ) { + for ( i = 0, len = obj.length; i < len; i++ ) { + add( obj[ i ].name, obj[ i ].value ); + } + } else { + for ( key in obj ) { + buildParams( key, obj[ key ] ); + } + } + return s; + }; + return buildParams( '', a ).join( '&' ); } -function getAPIUrl( siteId, query ) { - return `https://public-api.wordpress.com/rest/v1.3/sites/${ siteId }/search?query=${ encodeURIComponent( - query - ) }&${ stringifyArray( 'fields', FIELDS ) }`; -} +export function search( siteId, query, aggs, filter, resultFormat ) { + let fields = []; + let highlight_fields = []; + switch ( resultFormat ) { + case 'engagement': + case 'product': + case 'minimal': + default: + highlight_fields = [ 'title', 'content', 'comments' ]; + fields = [ 'date', 'permalink.url.raw', 'tag.name.default', 'category.name.default' ]; + } -export function search( siteId, query ) { - return fetch( getAPIUrl( siteId, query ) ); + const obj = { + query: query, + fields: fields, + highlight_fields: highlight_fields, + aggregations: aggs, + filter: filter, + }; + return fetch( + `https://public-api.wordpress.com/rest/v1.3/sites/${ siteId }/search?${ query_params( obj ) }` + ); } diff --git a/modules/search/instant-search/components/gridicon/index.jsx b/modules/search/instant-search/components/gridicon/index.jsx new file mode 100644 index 0000000000000..a0419136ffe58 --- /dev/null +++ b/modules/search/instant-search/components/gridicon/index.jsx @@ -0,0 +1,380 @@ +/** @jsx h **/ + +/* !!! +This is a fork of the Jetpack Gridicon code: + https://github.com/Automattic/jetpack/blob/f8078c2cd12ac508334da2fb08e37a92cf283c14/_inc/client/components/gridicon/index.jsx + +It has been modified to work with Preact, and only includes the icons that we need. +!!! */ + +/** + * External dependencies + */ +import { h, Component } from 'preact'; +import './style.scss'; + +class Gridicon extends Component { + needsOffset( icon, size ) { + const iconNeedsOffset = [ + 'gridicons-add-outline', + 'gridicons-add', + 'gridicons-align-image-center', + 'gridicons-align-image-left', + 'gridicons-align-image-none', + 'gridicons-align-image-right', + 'gridicons-attachment', + 'gridicons-backspace', + 'gridicons-bold', + 'gridicons-bookmark-outline', + 'gridicons-bookmark', + 'gridicons-calendar', + 'gridicons-cart', + 'gridicons-create', + 'gridicons-custom-post-type', + 'gridicons-external', + 'gridicons-folder', + 'gridicons-heading', + 'gridicons-help-outline', + 'gridicons-help', + 'gridicons-history', + 'gridicons-info-outline', + 'gridicons-info', + 'gridicons-italic', + 'gridicons-layout-blocks', + 'gridicons-link-break', + 'gridicons-link', + 'gridicons-list-checkmark', + 'gridicons-list-ordered', + 'gridicons-list-unordered', + 'gridicons-menus', + 'gridicons-minus', + 'gridicons-my-sites', + 'gridicons-notice-outline', + 'gridicons-notice', + 'gridicons-plans', + 'gridicons-plus-small', + 'gridicons-plus', + 'gridicons-popout', + 'gridicons-posts', + 'gridicons-scheduled', + 'gridicons-share-ios', + 'gridicons-star-outline', + 'gridicons-star', + 'gridicons-stats', + 'gridicons-status', + 'gridicons-thumbs-up', + 'gridicons-textcolor', + 'gridicons-time', + 'gridicons-trophy', + 'gridicons-user-circle', + ]; + + if ( iconNeedsOffset.indexOf( icon ) >= 0 ) { + return size % 18 === 0; + } + return false; + } + + needsOffsetX( icon, size ) { + const iconNeedsOffsetX = [ + 'gridicons-arrow-down', + 'gridicons-arrow-up', + 'gridicons-comment', + 'gridicons-clear-formatting', + 'gridicons-flag', + 'gridicons-menu', + 'gridicons-reader', + 'gridicons-strikethrough', + ]; + + if ( iconNeedsOffsetX.indexOf( icon ) >= 0 ) { + return size % 18 === 0; + } + return false; + } + + needsOffsetY( icon, size ) { + const iconNeedsOffsetY = [ + 'gridicons-align-center', + 'gridicons-align-justify', + 'gridicons-align-left', + 'gridicons-align-right', + 'gridicons-arrow-left', + 'gridicons-arrow-right', + 'gridicons-house', + 'gridicons-indent-left', + 'gridicons-indent-right', + 'gridicons-minus-small', + 'gridicons-print', + 'gridicons-sign-out', + 'gridicons-stats-alt', + 'gridicons-trash', + 'gridicons-underline', + 'gridicons-video-camera', + ]; + + if ( iconNeedsOffsetY.indexOf( icon ) >= 0 ) { + return size % 18 === 0; + } + return false; + } + + renderIcon( icon ) { + switch ( icon ) { + default: + return null; + case 'gridicons-attachment': + return ( + + + + ); + case 'gridicons-audio': + return ( + + + + ); + case 'gridicons-calendar': + return ( + + + + ); + case 'gridicons-camera': + return ( + + + + ); + case 'gridicons-cart': + return ( + + + + ); + case 'gridicons-chevron-down': + return ( + + + + ); + case 'gridicons-chevron-left': + return ( + + + + ); + case 'gridicons-chevron-right': + return ( + + + + ); + case 'gridicons-chevron-up': + return ( + + + + ); + case 'gridicons-code': + return ( + + + + ); + case 'gridicons-comment': + return ( + + + + ); + case 'gridicons-cross-small': + return ( + + + + ); + case 'gridicons-cross': + return ( + + + + ); + case 'gridicons-dropdown': + return ( + + + + ); + case 'gridicons-external': + return ( + + + + ); + case 'gridicons-folder-multiple': + return ( + + + + ); + case 'gridicons-folder': + return ( + + + + ); + case 'gridicons-image-multiple': + return ( + + + + ); + case 'gridicons-image': + return ( + + + + ); + case 'gridicons-location': + return ( + + + + ); + case 'gridicons-mention': + return ( + + + + ); + case 'gridicons-my-sites': + return ( + + + + ); + case 'gridicons-pages': + return ( + + + + ); + case 'gridicons-plus-small': + return ( + + + + ); + case 'gridicons-plus': + return ( + + + + ); + case 'gridicons-reader': + return ( + + + + ); + case 'gridicons-refresh': + return ( + + + + ); + case 'gridicons-search': + return ( + + + + ); + case 'gridicons-star-outline': + return ( + + + + ); + case 'gridicons-star': + return ( + + + + ); + case 'gridicons-stats-alt': + return ( + + + + ); + case 'gridicons-stats': + return ( + + + + ); + case 'gridicons-tag': + return ( + + + + ); + case 'gridicons-user-circle': + return ( + + + + ); + case 'gridicons-user': + return ( + + + + ); + case 'gridicons-video': + return ( + + + + ); + } + } + + render() { + const { size = 24, class_name = '' } = this.props; + const icon = 'gridicons-' + this.props.icon, + needsOffset = this.needsOffset( icon, size ), + needsOffsetX = this.needsOffsetX( icon, size ), + needsOffsetY = this.needsOffsetY( icon, size ); + + let iconClass = [ 'gridicon', icon, class_name ]; + + if ( needsOffset ) { + iconClass.push( 'needs-offset' ); + } + if ( needsOffsetX ) { + iconClass.push( 'needs-offset-x' ); + } + if ( needsOffsetY ) { + iconClass.push( 'needs-offset-y' ); + } + iconClass = iconClass.join( ' ' ); + + return ( + + { this.renderIcon( icon ) } + + ); + } +} + +export default Gridicon; diff --git a/modules/search/instant-search/components/gridicon/style.scss b/modules/search/instant-search/components/gridicon/style.scss new file mode 100644 index 0000000000000..196bcc1a30875 --- /dev/null +++ b/modules/search/instant-search/components/gridicon/style.scss @@ -0,0 +1,15 @@ +.gridicon { + fill: currentColor; + + &.needs-offset g { + transform: translate( 1px, 1px ); /* translates to .5px because it's in a child element */ + } + + &.needs-offset-x g { + transform: translate( 1px, 0 ); /* only nudges horizontally */ + } + + &.needs-offset-y g { + transform: translate( 0, 1px ); /* only nudges vertically */ + } +} diff --git a/modules/search/instant-search/components/search-result-minimal.jsx b/modules/search/instant-search/components/search-result-minimal.jsx new file mode 100644 index 0000000000000..f03f54135af28 --- /dev/null +++ b/modules/search/instant-search/components/search-result-minimal.jsx @@ -0,0 +1,105 @@ +/** @jsx h */ + +/** + * External dependencies + */ +import { h, Component } from 'preact'; +import strip from 'strip'; + +/** + * Internal dependencies + */ +import Gridicon from './gridicon'; + +class SearchResultMinimal extends Component { + render() { + const { result_type, fields, highlight } = this.props.result; + const IconSize = 18; + if ( result_type !== 'post' ) { + return null; + } + const url = new URL( 'http://' + fields[ 'permalink.url.raw' ] ); + const path = url.pathname; + const no_content = ! highlight.content || highlight.content[ 0 ] === ''; + + let tags = fields[ 'tag.name.default' ]; + if ( ! tags ) { + tags = []; + } + if ( ! Array.isArray( tags ) ) { + tags = [ tags ]; + } + + let cats = fields[ 'category.name.default' ]; + if ( ! cats ) { + cats = []; + } + if ( ! Array.isArray( cats ) ) { + cats = [ cats ]; + } + + return ( +
+

+ +

+ + { strip( fields.date ).split( ' ' )[ 0 ] } + + + { no_content && ( +
+
{ path }
+
+ { tags.map( tag => ( + + + { tag } + + ) ) } +
+
+ { cats.map( cat => ( + + + { cat } + + ) ) } +
+
+ ) } + { ! no_content && ( +
+ ) } + + { highlight.comments && ( +
+ + +
+ ) } +
+ ); + } +} + +export default SearchResultMinimal; diff --git a/modules/search/instant-search/components/search-result-minimal.scss b/modules/search/instant-search/components/search-result-minimal.scss new file mode 100644 index 0000000000000..0fb9d8e935beb --- /dev/null +++ b/modules/search/instant-search/components/search-result-minimal.scss @@ -0,0 +1,39 @@ +.jetpack-instant-search__result-minimal { + padding: 0.125em 0; + margin: 1em 0; + position: relative; +} +.jetpack-instant-search__result-minimal .gridicon { + margin-right: 5px; +} + +.jetpack-instant-search__result-minimal h3 { + overflow: hidden; +} + +.jetpack-instant-search__result-minimal-date { + margin: 0.5em 0; + display: flex; + float: right; + position: absolute; + top: 0px; + right: 0px; + font-size: 0.85em; +} + +.jetpack-instant-search__result-minimal-tag span, +.jetpack-instant-search__result-minimal-cat span { + margin-right: 0.5em; +} + +.jetpack-instant-search__result-minimal-tag, +.jetpack-instant-search__result-minimal-cat, +.jetpack-instant-search__result-minimal-comment { + padding-left: 10px; +} + +.jetpack-instant-search__result-minimal-title b, +.jetpack-instant-search__result-minimal-content b, +.jetpack-instant-search__result-minimal-comment-span b { + text-decoration: underline; +} diff --git a/modules/search/instant-search/components/search-result.jsx b/modules/search/instant-search/components/search-result.jsx deleted file mode 100644 index 26df807f00ce9..0000000000000 --- a/modules/search/instant-search/components/search-result.jsx +++ /dev/null @@ -1,42 +0,0 @@ -/** @jsx h */ - -/** - * External dependencies - */ -import { sprintf, _n } from '@wordpress/i18n'; -import { h, Component } from 'preact'; -import strip from 'strip'; - -class SearchResult extends Component { - render() { - return ( -
- - { strip( this.props.result.fields.title_html ) || 'Unknown Title' } - {' '} -
- { strip( this.props.result.fields.author ) }{' '} - - { strip( this.props.result.fields.date ).split( ' ' )[ 0 ] } - -
-
- { strip( this.props.result.fields.excerpt_html ) } -
-
- { sprintf( - _n( '%d comment', '%d comments', this.props.result.fields.comment_count, 'jetpack' ), - this.props.result.fields.comment_count - ) } -
-
- ); - } -} - -export default SearchResult; diff --git a/modules/search/instant-search/components/search-result.scss b/modules/search/instant-search/components/search-result.scss deleted file mode 100644 index 5bb1b9926d472..0000000000000 --- a/modules/search/instant-search/components/search-result.scss +++ /dev/null @@ -1,28 +0,0 @@ -@import '../../../../_inc/client/scss/variables/colors'; - -.jetpack-instant-search__result { - padding: 0.125em 0; - margin: 1em 0; - a { - box-shadow: inset 0 0 0 rgba( black, 0 ), 0 1px 0 rgba( black, 1 ); - transition: color 80ms ease-in, box-shadow 130ms ease-in-out; - } - a:hover, - a:focus { - box-shadow: inset 0 0 0 rgba( black, 0 ), 0 3px 0 rgba( black, 1 ); - } -} - -.jetpack-instant-search__result-author-and-date { - margin: 0.5em 0; - display: flex; - justify-content: space-between; -} - -.jetpack-instant-search__result-date { - color: $gray; -} - -.jetpack-instant-search__result-excerpt { - color: $gray; -} diff --git a/modules/search/instant-search/components/search-results.jsx b/modules/search/instant-search/components/search-results.jsx index 6c631c27444b1..55340d2086d29 100644 --- a/modules/search/instant-search/components/search-results.jsx +++ b/modules/search/instant-search/components/search-results.jsx @@ -9,17 +9,50 @@ import { h, Component } from 'preact'; /** * Internal dependencies */ -import SearchResult from './search-result'; +import SearchResultMinimal from './search-result-minimal'; class SearchResults extends Component { + render_result( result ) { + switch ( this.props.resultFormat ) { + case 'engagement': + case 'product': + case 'minimal': + default: + return ; + } + } + render() { - const { results = [], query } = this.props; + const { results = [], query, total = 0, corrected_query = false } = this.props; + if ( query === '' ) { + return
; + } + if ( total === 0 ) { + return ( +
+
+

{ sprintf( __( 'No Results.' ), query ) }

+
+
+ ); + } + return (
-

{ sprintf( __( 'You are searching for: "%s"' ), query ) }

- { results.map( result => ( - - ) ) } +

+ { corrected_query !== false + ? sprintf( __( 'Showing results for "%s"' ), corrected_query ) + : sprintf( __( 'Results for "%s"' ), query ) } +

+ { corrected_query !== false && ( +

+ { sprintf( __( 'No results for "%s"' ), query ) } +

+ ) } + + { sprintf( __( '%d Results' ), total ) } + + { results.map( result => this.render_result( result ) ) }
); } diff --git a/modules/search/instant-search/components/search-results.scss b/modules/search/instant-search/components/search-results.scss new file mode 100644 index 0000000000000..0a093ae4fac6d --- /dev/null +++ b/modules/search/instant-search/components/search-results.scss @@ -0,0 +1,23 @@ +.jetpack-instant-search__search-results { + padding: 0.125em 0; + margin: 1em 0; + position: relative; +} + +.jetpack-instant-search__search-results-count { + position: absolute; + top: 0; + right: 0; +} + +.jetpack-instant-search__search-results-real-query { + font-size: 1.5em; + text-decoration: bold; +} + +.jetpack-instant-search__search-results-unused-query, +.jetpack-instant-search__search-results-real-query { + overflow: hidden; + margin: 0; + padding: 0; +} diff --git a/modules/search/instant-search/components/search-widget.jsx b/modules/search/instant-search/components/search-widget.jsx index 07f6140e9d43d..b3b85499b136d 100644 --- a/modules/search/instant-search/components/search-widget.jsx +++ b/modules/search/instant-search/components/search-widget.jsx @@ -21,6 +21,7 @@ class SearchApp extends Component { constructor() { super( ...arguments ); this.requestId = 0; + this.props.resultFormat = 'minimal'; this.state = { query: this.props.initialValue, results: [], @@ -47,7 +48,7 @@ class SearchApp extends Component { this.requestId++; const requestId = this.requestId; - search( this.props.siteId, query ) + search( this.props.options.siteId, query, {}, {}, this.props.options.resultFormat ) .then( response => response.json() ) .then( json => { if ( this.requestId === requestId ) { @@ -72,7 +73,11 @@ class SearchApp extends Component { />

- +
); diff --git a/modules/search/instant-search/index.jsx b/modules/search/instant-search/index.jsx index 65b8274f3be66..93cd0545889cc 100644 --- a/modules/search/instant-search/index.jsx +++ b/modules/search/instant-search/index.jsx @@ -24,9 +24,13 @@ const hideSearchHeader = () => { } }; -const injectSearchWidget = ( initialValue, target, siteId, grabFocus ) => { +const injectSearchWidget = ( initialValue, target, options, grabFocus ) => { render( - , + , target ); }; @@ -41,7 +45,7 @@ document.addEventListener( 'DOMContentLoaded', function() { removeChildren( widget ); removeChildren( document.querySelector( 'main' ) ); hideSearchHeader(); - injectSearchWidget( getSearchQuery(), widget, options.siteId ); + injectSearchWidget( getSearchQuery(), widget, options ); } } } ); diff --git a/modules/search/instant-search/instant-search.scss b/modules/search/instant-search/instant-search.scss index c42b08a53d8a0..2c20c43c8a253 100644 --- a/modules/search/instant-search/instant-search.scss +++ b/modules/search/instant-search/instant-search.scss @@ -1 +1,4 @@ -@import './components/search-result.scss'; +@import './components/search-results.scss'; +@import './components/search-result-minimal.scss'; +//@import './components/search-result-engagement.scss'; +//@import './components/search-result-product.scss';