Product Collection - Add keyword control to sidebar settings

assets/js/blocks/product-collection/inspector-controls/constants.ts

@@ -0,0 +1,53 @@
+/**
+ * External dependencies
+ */
+import { getSetting } from '@woocommerce/settings';
+import { objectOmit } from '@woocommerce/utils';
+
+/**
+ * Internal dependencies
+ */
+import blockJson from '../block.json';
+import {
+	ProductCollectionAttributes,
+	ProductCollectionQuery,
+	TProductCollectionOrder,
+	TProductCollectionOrderBy,
+} from '../types';
+
+const defaultQuery = blockJson.attributes.query.default;
+
+export const STOCK_STATUS_OPTIONS = getSetting< Record< string, string > >(
+	'stockStatusOptions',
+	[]
+);
+
+const GLOBAL_HIDE_OUT_OF_STOCK = getSetting< boolean >(
+	'hideOutOfStockItems',
+	false
+);
+
+export const getDefaultStockStatuses = () => {
+	return GLOBAL_HIDE_OUT_OF_STOCK
+		? Object.keys( objectOmit( STOCK_STATUS_OPTIONS, 'outofstock' ) )
+		: Object.keys( STOCK_STATUS_OPTIONS );
+};
+
+export const DEFAULT_FILTERS: Partial< ProductCollectionQuery > = {
+	woocommerceOnSale: defaultQuery.woocommerceOnSale,
+	woocommerceStockStatus: getDefaultStockStatuses(),
+	search: '',
+};
+
+export const getDefaultSettings = (
+	currentAttributes: ProductCollectionAttributes
+): Partial< ProductCollectionAttributes > => ( {
+	displayLayout: blockJson.attributes.displayLayout.default,
+	query: {
+		...currentAttributes.query,
+		orderBy: blockJson.attributes.query.default
+			.orderBy as TProductCollectionOrderBy,
+		order: blockJson.attributes.query.default
+			.order as TProductCollectionOrder,
+	},
+} );

assets/js/blocks/product-collection/inspector-controls/index.tsx

@@ -20,6 +20,7 @@ import OnSaleControl from './on-sale-control';
 import { setQueryAttribute } from './utils';
 import { DEFAULT_FILTERS, getDefaultSettings } from '../constants';
 import StockStatusControl from './stock-status-control';
+import KeywordControl from './keyword-control';
 
 const ProductCollectionInspectorControls = (
 	props: BlockEditProps< ProductCollectionAttributes >
@@ -41,12 +42,14 @@ const ProductCollectionInspectorControls = (
 
 			<ToolsPanel
 				label={ __( 'Filters', 'woo-gutenberg-products-block' ) }
-				resetAll={ () => {
+				resetAll={ ( resetAllFilters: ( () => void )[] ) => {
 					setQueryAttribute( props, DEFAULT_FILTERS );
+					resetAllFilters.forEach( ( resetFilter ) => resetFilter() );
 				} }
 			>
 				<OnSaleControl { ...props } />
 				<StockStatusControl { ...props } />
+				<KeywordControl { ...props } />
 			</ToolsPanel>
 		</InspectorControls>
 	);

assets/js/blocks/product-collection/inspector-controls/keyword-control.tsx

@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { BlockEditProps } from '@wordpress/blocks';
+import { useEffect, useState } from '@wordpress/element';
+import { useDebounce } from '@wordpress/compose';
+import {
+	TextControl,
+	// @ts-expect-error Using experimental features
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { ProductCollectionAttributes } from '../types';
+import { setQueryAttribute } from './utils';
+
+const KeywordControl = (
+	props: BlockEditProps< ProductCollectionAttributes >
+) => {
+	const { query } = props.attributes;
+	const [ querySearch, setQuerySearch ] = useState( query.search );
+
+	const onChangeDebounced = useDebounce( () => {
+		if ( query.search !== querySearch ) {
+			setQueryAttribute( props, { search: querySearch } );
+		}
+	}, 250 );
+
+	useEffect( () => {
+		onChangeDebounced();
+		return onChangeDebounced.cancel;
+	}, [ querySearch, onChangeDebounced ] );
+
+	return (
+		<ToolsPanelItem
+			hasValue={ () => !! querySearch }
+			label={ __( 'Keyword', 'woo-gutenberg-products-block' ) }
+			onDeselect={ () => setQuerySearch( '' ) }
+			resetAllFilter={ () => setQuerySearch( '' ) }
+		>
+			<TextControl
+				label={ __( 'Keyword', 'woo-gutenberg-products-block' ) }
+				value={ querySearch }
+				onChange={ setQuerySearch }
+			/>
+		</ToolsPanelItem>
+	);
+};
+
+export default KeywordControl;

src/BlockTypes/ProductCollection.php

@@ -134,6 +134,7 @@ public function build_query( $query, $block, $page ) {
 			'post_type'      => 'product',
 			'tax_query'      => array(),
 			'paged'          => $page,
+			's'              => $block_context_query['search'],
 		);
 
 		$is_on_sale = $block_context_query['woocommerceOnSale'] ?? false;