Add search in Query block (#25222)

* add search in Query block

* fix React warning

* debounce search requests

Author: ntsekouras

packages/block-library/src/query-loop/edit.js

@@ -27,6 +27,7 @@ export default function QueryLoopEdit( {
 			order,
 			orderBy,
 			author,
+			search,
 		} = {},
 		queryContext,
 	},
@@ -49,6 +50,9 @@ export default function QueryLoopEdit( {
 			if ( author ) {
 				query.author = author;
 			}
+			if ( search ) {
+				query.search = search;
+			}
 			return {
 				posts: select( 'core' ).getEntityRecords(
 					'postType',
@@ -68,6 +72,7 @@ export default function QueryLoopEdit( {
 			orderBy,
 			clientId,
 			author,
+			search,
 		]
 	);
 

packages/block-library/src/query-loop/index.php

@@ -47,6 +47,9 @@ function render_block_core_query_loop( $attributes, $content, $block ) {
 		if ( isset( $block->context['query']['author'] ) ) {
 			$query['author'] = $block->context['query']['author'];
 		}
+		if ( isset( $block->context['query']['search'] ) ) {
+			$query['s'] = $block->context['query']['search'];
+		}
 	}
 
 	$posts = get_posts( $query );

packages/block-library/src/query/block.json

@@ -15,7 +15,8 @@
 				"tagIds": [],
 				"order": "desc",
 				"orderBy": "date",
-				"author": null
+				"author": "",
+				"search": ""
 			}
 		}
 	},

packages/block-library/src/query/edit/query-toolbar.js

@@ -1,12 +1,19 @@
+/**
+ * External dependencies
+ */
+import { debounce } from 'lodash';
+
 /**
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
+import { useEffect, useState, useCallback } from '@wordpress/element';
 import {
 	Toolbar,
 	Dropdown,
 	ToolbarButton,
 	RangeControl,
+	TextControl,
 	FormTokenField,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -33,6 +40,15 @@ export default function QueryToolbar( { query, setQuery } ) {
 			tags: getTermsInfo( _tags ),
 		};
 	}, [] );
+	const [ querySearch, setQuerySearch ] = useState( query.search );
+	const onChangeDebounced = useCallback(
+		debounce( () => setQuery( { search: querySearch } ), 250 ),
+		[ querySearch ]
+	);
+	useEffect( () => {
+		onChangeDebounced();
+		return onChangeDebounced.cancel;
+	}, [ querySearch, onChangeDebounced ] );
 
 	// Handles categories and tags changes.
 	const onTermsChange = ( terms, queryProperty ) => ( newTermValues ) => {
@@ -113,6 +129,11 @@ export default function QueryToolbar( { query, setQuery } ) {
 								onChange={ onTagsChange }
 							/>
 						) }
+						<TextControl
+							label={ __( 'Search' ) }
+							value={ querySearch }
+							onChange={ ( value ) => setQuerySearch( value ) }
+						/>
 					</>
 				) }
 			/>

packages/e2e-tests/fixtures/blocks/core__query.json

@@ -12,7 +12,8 @@
 				"tagIds": [],
 				"order": "desc",
 				"orderBy": "date",
-				"author": null
+				"author": "",
+				"search": ""
 			}
 		},
 		"innerBlocks": [],