diff --git a/packages/block-library/src/query-loop/edit.js b/packages/block-library/src/query-loop/edit.js index d6d22c53658214..3019670972b7da 100644 --- a/packages/block-library/src/query-loop/edit.js +++ b/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, ] ); diff --git a/packages/block-library/src/query-loop/index.php b/packages/block-library/src/query-loop/index.php index 78660188163c28..975603c171b825 100644 --- a/packages/block-library/src/query-loop/index.php +++ b/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 ); diff --git a/packages/block-library/src/query/block.json b/packages/block-library/src/query/block.json index ece5a390a5f0fd..63d489ad0d5525 100644 --- a/packages/block-library/src/query/block.json +++ b/packages/block-library/src/query/block.json @@ -15,7 +15,8 @@ "tagIds": [], "order": "desc", "orderBy": "date", - "author": null + "author": "", + "search": "" } } }, diff --git a/packages/block-library/src/query/edit/query-toolbar.js b/packages/block-library/src/query/edit/query-toolbar.js index d62a4a10b21106..3436348975e240 100644 --- a/packages/block-library/src/query/edit/query-toolbar.js +++ b/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 } /> ) } + setQuerySearch( value ) } + /> ) } /> diff --git a/packages/e2e-tests/fixtures/blocks/core__query.json b/packages/e2e-tests/fixtures/blocks/core__query.json index d4882792623121..c225bc2053ea8a 100644 --- a/packages/e2e-tests/fixtures/blocks/core__query.json +++ b/packages/e2e-tests/fixtures/blocks/core__query.json @@ -12,7 +12,8 @@ "tagIds": [], "order": "desc", "orderBy": "date", - "author": null + "author": "", + "search": "" } }, "innerBlocks": [],