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
Automattic · Feb 10, 2020 · e7ff6cb · e7ff6cb
1 parent b11afef
commit e7ff6cb
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 40 deletions.
diff --git a/modules/search/class-jetpack-instant-search.php b/modules/search/class-jetpack-instant-search.php
@@ -78,8 +78,9 @@ protected function inject_javascript_options() {
 			$widget_options = end( $widget_options );
 		}
 
-		$filters = Jetpack_Search_Helpers::get_filters_from_widgets();
-		$widgets = array();
+		$overlay_widget_ids = get_option( 'sidebars_widgets', array() )['jetpack-instant-search-sidebar'];
+		$filters            = Jetpack_Search_Helpers::get_filters_from_widgets( $overlay_widget_ids );
+		$widgets            = array();
 		foreach ( $filters as $key => $filter ) {
 			if ( ! isset( $widgets[ $filter['widget_id'] ] ) ) {
 				$widgets[ $filter['widget_id'] ]['filters']   = array();

diff --git a/modules/search/class.jetpack-search-helpers.php b/modules/search/class.jetpack-search-helpers.php
@@ -148,9 +148,11 @@ static function is_active_widget( $widget_id ) {
 	 *
 	 * @since 5.8.0
 	 *
+	 * @param array|null $whitelisted_widget_ids array of whitelisted widget IDs.
+	 *
 	 * @return array Active filters.
 	 */
-	static function get_filters_from_widgets() {
+	public static function get_filters_from_widgets( $whitelisted_widget_ids = null ) {
 		$filters = array();
 
 		$widget_options = self::get_widgets_from_option();
@@ -163,6 +165,9 @@ static function get_filters_from_widgets() {
 			if ( ! self::is_active_widget( $widget_id ) || empty( $settings['filters'] ) ) {
 				continue;
 			}
+			if ( isset( $whitelisted_widget_ids ) && ! in_array( $widget_id, $whitelisted_widget_ids, true ) ) {
+				continue;
+			}
 
 			foreach ( (array) $settings['filters'] as $widget_filter ) {
 				$widget_filter['widget_id'] = $widget_id;

diff --git a/modules/search/instant-search/components/search-sidebar.jsx b/modules/search/instant-search/components/search-sidebar.jsx
@@ -4,7 +4,7 @@
  * External dependencies
  */
 import { h } from 'preact';
-import { createPortal, useState, useEffect } from 'preact/compat';
+import { createPortal } from 'preact/compat';
 import SearchFilters from './search-filters';
 import WidgetAreaContainer from './widget-area-container';
 
@@ -14,45 +14,26 @@ import WidgetAreaContainer from './widget-area-container';
 import JetpackColophon from './jetpack-colophon';
 
 const SearchSidebar = props => {
-	// TODO: Change JetpackInstantSearchOptions.widgets to only include info from widgets inside Overlay sidebar
-	const [ widgetIds, setWidgetIds ] = useState( [] );
-
-	useEffect( () => {
-		const widgetArea = document.getElementsByClassName(
-			'jetpack-instant-search__widget-area'
-		)[ 0 ];
-		const widgets = Array.from( widgetArea.querySelectorAll( '.jetpack-instant-search-wrapper' ) );
-
-		widgets.forEach( widget => {
-			const form = widget.querySelector( '.jetpack-search-form' );
-			form && widget.removeChild( form );
-		} );
-
-		setWidgetIds( widgets.map( element => element.id ) );
-	}, [] );
-
 	return (
 		<div className="jetpack-instant-search__sidebar">
 			<WidgetAreaContainer />
-			{ props.widgets
-				.filter( widget => widgetIds.includes( `${ widget.widget_id }-wrapper` ) )
-				.map( widget => {
-					return createPortal(
-						<div
-							id={ `${ widget.widget_id }-portaled-wrapper` }
-							className="jetpack-instant-search__portaled-wrapper"
-						>
-							<SearchFilters
-								loading={ props.isLoading }
-								locale={ props.locale }
-								postTypes={ props.postTypes }
-								results={ props.response }
-								widget={ widget }
-							/>
-						</div>,
-						document.getElementById( `${ widget.widget_id }-wrapper` )
-					);
-				} ) }
+			{ props.widgets.map( widget => {
+				return createPortal(
+					<div
+						id={ `${ widget.widget_id }-portaled-wrapper` }
+						className="jetpack-instant-search__portaled-wrapper"
+					>
+						<SearchFilters
+							loading={ props.isLoading }
+							locale={ props.locale }
+							postTypes={ props.postTypes }
+							results={ props.response }
+							widget={ widget }
+						/>
+					</div>,
+					document.getElementById( `${ widget.widget_id }-wrapper` )
+				);
+			} ) }
 			{ props.showPoweredBy && <JetpackColophon /> }
 		</div>
 	);