Search: allow hiding content (#39053)

This change allows customizing which fields are highlighted in search results. Some users don't want to show parts of the content that match the query by default, especially if some of the content is behind a paywall/membership.
Automattic · Aug 29, 2024 · ad65a0b · ad65a0b
1 parent 3a89366
commit ad65a0b
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 6 deletions.
diff --git a/projects/packages/search/changelog/add-allow-customizing-highlighted-fields b/projects/packages/search/changelog/add-allow-customizing-highlighted-fields
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Search: allow customizing highlighted fields
diff --git a/projects/packages/search/src/instant-search/components/search-app.jsx b/projects/packages/search/src/instant-search/components/search-app.jsx
@@ -229,6 +229,7 @@ class SearchApp extends Component {
 			sort: this.props.sort,
 			postsPerPage: this.props.options.postsPerPage,
 			adminQueryFilter: this.props.options.adminQueryFilter,
+			highlightFields: this.props.options.highlightFields,
 			isInCustomizer: this.props.isInCustomizer,
 		} );
 	};

diff --git a/projects/packages/search/src/instant-search/components/search-result-expanded.jsx b/projects/packages/search/src/instant-search/components/search-result-expanded.jsx
@@ -89,7 +89,16 @@ export default function SearchResultExpanded( props ) {
 						className="jetpack-instant-search__search-result-expanded__content"
 						//eslint-disable-next-line react/no-danger
 						dangerouslySetInnerHTML={ {
-							__html: highlight.content.join( ' ... ' ),
+							__html:
+								highlight && typeof highlight === 'object'
+									? Object.entries( highlight )
+											.filter(
+												( [ key, value ] ) =>
+													key !== 'comments' && key !== 'title' && Array.isArray( value )
+											)
+											.map( ( [ , array ] ) => array.join( ' ... ' ) )
+											.join( ' ... ' )
+									: '',
 						} }
 					/>
 

diff --git a/projects/packages/search/src/instant-search/components/search-result-minimal.jsx b/projects/packages/search/src/instant-search/components/search-result-minimal.jsx
@@ -87,7 +87,16 @@ class SearchResultMinimal extends Component {
 				className="jetpack-instant-search__search-result-minimal-content"
 				//eslint-disable-next-line react/no-danger
 				dangerouslySetInnerHTML={ {
-					__html: this.props.result.highlight.content.join( ' ... ' ),
+					__html:
+						this.props.result.highlight && typeof this.props.result.highlight === 'object'
+							? Object.entries( this.props.result.highlight )
+									.filter(
+										( [ key, value ] ) =>
+											key !== 'comments' && key !== 'title' && Array.isArray( value )
+									)
+									.map( ( [ , array ] ) => array.join( ' ... ' ) )
+									.join( ' ... ' )
+							: '',
 				} }
 			/>
 		);
@@ -98,7 +107,13 @@ class SearchResultMinimal extends Component {
 		if ( result_type !== 'post' ) {
 			return null;
 		}
-		const noMatchingContent = ! highlight.content || highlight.content[ 0 ] === '';
+		const noMatchingContent =
+			! highlight ||
+			typeof highlight !== 'object' ||
+			Object.entries( highlight ).every(
+				( [ key, value ] ) =>
+					key === 'comments' || key === 'title' || ! Array.isArray( value ) || value[ 0 ] === ''
+			);
 
 		return (
 			<li

diff --git a/projects/packages/search/src/instant-search/components/search-result-product.jsx b/projects/packages/search/src/instant-search/components/search-result-product.jsx
@@ -45,8 +45,11 @@ class SearchResultProduct extends Component {
 		const showMatchHint =
 			hasQuery &&
 			! titleHasMark &&
-			Array.isArray( highlight.content ) &&
-			highlight.content[ 0 ]?.length > 0;
+			typeof highlight === 'object' &&
+			Object.entries( highlight ).some(
+				( [ key, value ] ) =>
+					key !== 'title' && key !== 'comments' && Array.isArray( value ) && value[ 0 ]?.length > 0
+			);
 
 		return (
 			<li

diff --git a/projects/packages/search/src/instant-search/lib/api.js b/projects/packages/search/src/instant-search/lib/api.js
@@ -262,6 +262,7 @@ function generateApiQueryString( {
 	adminQueryFilter,
 	isInCustomizer = false,
 	additionalBlogIds = [],
+	highlightFields = [ 'title', 'content', 'comments' ],
 } ) {
 	if ( query === null ) {
 		query = '';
@@ -276,7 +277,6 @@ function generateApiQueryString( {
 		'shortcode_types',
 		'forum.topic_resolved',
 	];
-	const highlightFields = [ 'title', 'content', 'comments' ];
 
 	/* Fetch image fields for non-minimal results
 	 *