feature(instant-results): add filters for labels, options, components, and config

assets/js/api-search/index.js

@@ -12,6 +12,7 @@ import {
 	WPElement,
 } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
+import { applyFilters } from '@wordpress/hooks';
 
 /**
  * Internal dependencies.
@@ -316,7 +317,18 @@ export const ApiSearchProvider = ({
 					return;
 				}
 
-				setResults(response);
+				/**
+				 * Filter the search results response.
+				 *
+				 * @filter ep.InstantResults.response
+				 * @since 5.3.0
+				 *
+				 * @param {object} response The search results response.
+				 * @returns {object} Filtered search results response.
+				 */
+				const filteredResponse = applyFilters('ep.InstantResults.response', response);
+
+				setResults(filteredResponse || response);
 			} catch (e) {
 				const errorMessage = sprintf(
 					/* translators: Error message */

assets/js/instant-results/components/facets/facet.js

@@ -2,6 +2,7 @@
  * WordPress dependencies.
  */
 import { WPElement } from '@wordpress/element';
+import { applyFilters } from '@wordpress/hooks';
 
 /**
  * Internal dependencies.
@@ -24,16 +25,36 @@ import TaxonomyTermsFacet from './taxonomy-terms-facet';
 export default ({ index, label, name, postTypes, type }) => {
 	const defaultIsOpen = index < 2;
 
+	/**
+	 * Filter the facet label.
+	 *
+	 * @filter ep.InstantResults.filter.label
+	 * @since 5.3.0
+	 *
+	 * @param {string} label Facet label.
+	 * @param {string} name Facet name.
+	 * @param {string} type Facet type.
+	 * @param {string[]} postTypes Facet post types.
+	 * @returns {string} Filtered facet label.
+	 */
+	const filteredLabel = applyFilters(
+		'ep.InstantResults.filter.label',
+		label,
+		name,
+		type,
+		postTypes,
+	);
+
 	switch (type) {
 		case 'post_type':
-			return <PostTypeFacet defaultIsOpen={defaultIsOpen} label={label} />;
+			return <PostTypeFacet defaultIsOpen={defaultIsOpen} label={filteredLabel} />;
 		case 'price_range':
-			return <PriceRangeFacet defaultIsOpen={defaultIsOpen} label={label} />;
+			return <PriceRangeFacet defaultIsOpen={defaultIsOpen} label={filteredLabel} />;
 		case 'taxonomy':
 			return (
 				<TaxonomyTermsFacet
 					defaultIsOpen={defaultIsOpen}
-					label={label}
+					label={filteredLabel}
 					name={name}
 					postTypes={postTypes}
 				/>

assets/js/instant-results/components/facets/post-type-facet.js

@@ -3,6 +3,7 @@
  */
 import { useCallback, useMemo, WPElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { applyFilters } from '@wordpress/hooks';
 
 /**
  * Internal dependencies.
@@ -61,7 +62,20 @@ export default ({ defaultIsOpen, label }) => {
 	/**
 	 * Reduce buckets to options.
 	 */
-	const options = useMemo(() => buckets.reduce(reduceOptions, []), [buckets, reduceOptions]);
+	const options = useMemo(() => {
+		const reducedOptions = buckets.reduce(reduceOptions, []);
+
+		/**
+		 * Filter the post type filter options.
+		 *
+		 * @filter ep.InstantResults.filter.postType.options
+		 * @since 5.3.0
+		 *
+		 * @param {object[]} options Post type filter options.
+		 * @returns {object[]} Filtered post type filter options.
+		 */
+		return applyFilters('ep.InstantResults.filter.postType.options', reducedOptions);
+	}, [buckets, reduceOptions]);
 
 	/**
 	 * Handle checkbox change event.

assets/js/instant-results/components/facets/price-range-facet.js

@@ -3,6 +3,7 @@
  */
 import { useLayoutEffect, useState, WPElement } from '@wordpress/element';
 import { _x, sprintf } from '@wordpress/i18n';
+import { applyFilters } from '@wordpress/hooks';
 
 /**
  * Internal dependencies.
@@ -38,8 +39,23 @@ export default ({ defaultIsOpen, label }) => {
 	/**
 	 * Minimum and maximum possible values.
 	 */
-	const max = Math.ceil(maxAgg);
-	const min = Math.floor(minAgg);
+	let max = Math.ceil(maxAgg);
+	let min = Math.floor(minAgg);
+
+	/**
+	 * Filter the price range values.
+	 *
+	 * @filter ep.InstantResults.filter.priceRange.options
+	 * @since 5.3.0
+	 *
+	 * @param {object} range Price range values.
+	 * @param {number} range.min Minimum price.
+	 * @param {number} range.max Maximum price.
+	 * @returns {object} Filtered price range values.
+	 */
+	const range = applyFilters('ep.InstantResults.filter.priceRange.options', { min, max });
+
+	({ min, max } = range);
 
 	/**
 	 * Current minimum and maximum values.

assets/js/instant-results/components/results/did-you-mean.js

@@ -3,6 +3,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { WPElement, createInterpolateElement } from '@wordpress/element';
+import { applyFilters } from '@wordpress/hooks';
 
 import { showSuggestions, suggestionsBehavior } from '../../config';
 
@@ -22,7 +23,7 @@ export default (props) => {
 	// Get other terms by excluding the first term from suggestedTerms
 	const otherTerms = suggestedTerms.slice(1);
 
-	return (
+	const didYouMean = (
 		<>
 			{showSuggestions && suggestedTerms && suggestedTerms?.[0]?.text && (
 				<div className="ep-search-suggestion">
@@ -67,4 +68,16 @@ export default (props) => {
 				)}
 		</>
 	);
+
+	/**
+	 * Filter the did you mean component.
+	 *
+	 * @filter ep.InstantResults.component.didYouMean
+	 * @since 5.3.0
+	 *
+	 * @param {WPElement} didYouMean Did you mean component.
+	 * @param {object} props Props.
+	 * @returns {WPElement} Did you mean component.
+	 */
+	return applyFilters('ep.InstantResults.component.didYouMean', didYouMean, props);
 };

assets/js/instant-results/components/tools/sort.js

@@ -3,6 +3,7 @@
  */
 import { useMemo, WPElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { applyFilters } from '@wordpress/hooks';
 
 /**
  * Internal dependencies.
@@ -41,7 +42,7 @@ export default () => {
 		search({ orderby, order });
 	};
 
-	return (
+	const sort = (
 		<label className="ep-search-sort" htmlFor="ep-sort">
 			<span className="ep-search-sort__label">{__('Sort by', 'elasticpress')}</span>{' '}
 			<select
@@ -58,4 +59,18 @@ export default () => {
 			</select>
 		</label>
 	);
+
+	/**
+	 * Filter the sort component.
+	 *
+	 * @filter ep.InstantResults.component.sort
+	 * @since 5.3.0
+	 *
+	 * @param {WPElement} sort Sort component.
+	 * @param {object} context Sort context.
+	 * @param {string} context.orderby Current orderby value.
+	 * @param {string} context.order Current order value.
+	 * @returns {WPElement} Sort component.
+	 */
+	return applyFilters('ep.InstantResults.component.sort', sort, { orderby, order });
 };

includes/classes/Feature/InstantResults/InstantResults.php

@@ -224,27 +224,39 @@ public function enqueue_frontend_assets() {
 		 */
 		$api_endpoint = apply_filters( 'ep_instant_results_search_endpoint', "api/v1/search/posts/{$index}", $index );
 
+		$ep_instant_results_config = array(
+			'apiEndpoint'         => $api_endpoint,
+			'apiHost'             => ( 0 !== strpos( $api_endpoint, 'http' ) ) ? esc_url_raw( $this->host ) : '',
+			'argsSchema'          => $this->get_args_schema(),
+			'currencyCode'        => $this->is_woocommerce ? get_woocommerce_currency() : false,
+			'facets'              => $this->get_facets_for_frontend(),
+			'highlightTag'        => $this->settings['highlight_tag'],
+			'isWooCommerce'       => $this->is_woocommerce,
+			'locale'              => str_replace( '_', '-', get_locale() ),
+			'matchType'           => $this->settings['match_type'],
+			'paramPrefix'         => 'ep-',
+			'postTypeLabels'      => $this->get_post_type_labels(),
+			'termCount'           => $this->settings['term_count'],
+			'numberedPagination'  => $this->settings['numbered_pagination'],
+			'requestIdBase'       => Utils\get_request_id_base(),
+			'showSuggestions'     => \ElasticPress\Features::factory()->get_registered_feature( 'did-you-mean' )->is_active(),
+			'suggestionsBehavior' => $this->settings['search_behavior'],
+		);
+
+		/**
+		 * Filter the Instant Results configuration passed to the front end.
+		 *
+		 * @since 5.3.0
+		 * @hook ep_instant_results_config
+		 * @param {array} $ep_instant_results_config Instant Results configuration.
+		 * @returns {array} Filtered Instant Results configuration.
+		 */
+		$ep_instant_results_config = apply_filters( 'ep_instant_results_config', $ep_instant_results_config );
+
 		wp_localize_script(
 			'elasticpress-instant-results',
 			'epInstantResults',
-			array(
-				'apiEndpoint'         => $api_endpoint,
-				'apiHost'             => ( 0 !== strpos( $api_endpoint, 'http' ) ) ? esc_url_raw( $this->host ) : '',
-				'argsSchema'          => $this->get_args_schema(),
-				'currencyCode'        => $this->is_woocommerce ? get_woocommerce_currency() : false,
-				'facets'              => $this->get_facets_for_frontend(),
-				'highlightTag'        => $this->settings['highlight_tag'],
-				'isWooCommerce'       => $this->is_woocommerce,
-				'locale'              => str_replace( '_', '-', get_locale() ),
-				'matchType'           => $this->settings['match_type'],
-				'paramPrefix'         => 'ep-',
-				'postTypeLabels'      => $this->get_post_type_labels(),
-				'termCount'           => $this->settings['term_count'],
-				'numberedPagination'  => $this->settings['numbered_pagination'],
-				'requestIdBase'       => Utils\get_request_id_base(),
-				'showSuggestions'     => \ElasticPress\Features::factory()->get_registered_feature( 'did-you-mean' )->is_active(),
-				'suggestionsBehavior' => $this->settings['search_behavior'],
-			)
+			$ep_instant_results_config
 		);
 	}