Query and Search blocks: support for Instant Search via query_loop_block_query_vars filter
#67181
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
michalczaplinski
added
[Block] Search
|
Size Change: +535 B (+0.03%) Total Size: 1.95 MB
ℹ️ View Unchanged
|
michalczaplinski
removed
the
[Type] Feature
michalczaplinski
changed the title
query_loop_block_query_vars filterquery_loop_block_query_vars filter
This was referenced Nov 25, 2024
michalczaplinski
requested review from
ajitbohra and
spacedmonkey
as code owners
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
michalczaplinski
requested review from
ObliviousHarmony,
adamsilverstein,
desrosj,
ellatrix,
gziolo,
nerrad,
ntwb,
peterwilsoncc,
swissspidy,
t-hamano and
talldan
as code owners
- It's not needed because we fall back to 'Search' as last resort in `_experimentalLabel()` (previous commit).
Contributor
Author
|
This works great @t-hamano, thank you! 👏 I'm not too worried about it not showing up in the Block Card for now. It's still better than not showing any updated label at all. I've implemented your suggestion in 2db363a and an e2e test for it in c20526f. I also had to add a fallback to default to Otherwise, if the block had no label, depending on the circumstances it ended up showing up as Screen.Recording.2025-01-06.at.16.19.42.mov |
Contributor
Sorry, I think the code I proposed was not complete. Originally in the List View, the display name and label attribute were not synchronized. That means the List View only shows either "Search" or the custom name. Additionally, the text So I think the logic should be like this: if ( context !== 'list-view' ) {
return;
}
const blockTitle = __( 'Search' );
if ( ! queryLoopBlockIds.length ) {
return customName || blockTitle;
}
if ( ! hasInstantSearch ) {
return customName || blockTitle;
}
return sprintf(
/* translators: %s: The block label */
__( '%s (Instant search enabled)' ),
customName || blockTitle
); |
2 tasks
…st view only. Adjusted fallback to use block title instead of label for better clarity.
Contributor
Author
|
@t-hamano I've updated it to use the logic you mentioned and re-tested 👍. Would you mind taking another look? |
t-hamano
reviewed
Jun 30, 2025
Contributor
t-hamano
left a comment
t-hamano
left a comment
There was a problem hiding this comment.
@michalczaplinski Sorry for the late reply!
I've resolved code conflicts and commented on things I've noticed throughout this PR to help move this PR forward. I'd be happy if you could take a look at them.
| $enhanced_pagination = isset( $block->context['enhancedPagination'] ) && $block->context['enhancedPagination']; | ||
|
|
||
| // Check if the block is using the instant search experiment, which requires the enhanced pagination. | ||
| $gutenberg_experiments = get_option( 'gutenberg-experiments' ); |
Contributor
There was a problem hiding this comment.
The gutenberg-experiments option is for the Gutenberg plugin, so I'm wondering if it's appropriate to write code like this in a file that is shipped to core. Of course, I think that once Instant Search is no longer experimental, this code can be removed.
packages/e2e-test-utils-playwright/src/editor/open-list-view.ts
Outdated
Show resolved
Hide resolved
| <!-- /wp:paragraph --> | ||
| <!-- /wp:query-no-results --> | ||
| </div> | ||
| <!-- /wp:query -->`, |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
Contributor
|
This looks really nice. While testing, I noticed that there is an escaping bug for the search box when it contains quotes, they end up being escaped in the output
If the instant search experiment is enabled, would it be possible to enable the feature on the search template with the option "Use instant search" for the search block? In that case it would be an inherited query so it's totally cool if the answer is no for the initial experiment. |
2 tasks
Contributor
|
I would like to take over this PR. |
Contributor
Fixed in 3a780e9 |
Contributor
@peterwilsoncc Instant Search is automatically enabled when the following conditions are met:
Do you mean you want Instant Search to be optional rather than automatically enabled based on the above? |
t-hamano
reviewed
Sep 26, 2025
Contributor
|
Ok, I think I'm ready to review again. Having tackled this PR again, I have two suggestions:
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Implementation of Instant Search using the Search and Query Loop blocks. Added as a new experiment on the Gutenberg Experiments page.
Related to #63053
output_62afd8.mp4
How does it work?
Testing
Instant Search and Query BlockGutenberg experiment.Reload Full Pagecheckbox in the Query block's Advanced Settings i.e. use "enhanced pagination" in that Query block.When the Search block is inside of the Query block using "enhanced pagination", it automatically gets "updated" to an Instant Search block.
Any search input in the Instant Search block gets passed as the
?instant-search-<queryId>=<search-term>query search param in the URL.Multiple Query + Search blocks
It's possible to have multiple Instant Search blocks in a page/post/template. In such a case, ensuring their functionality is isolated is essential. For this to work, the
queryIdis part of the param syntax:instant-search-<queryId>=<search-term>Search button
The search block can contain a search button (in some configurations). However, when using the Instant Search functionality, the button is redundant because the list of posts updates as you type. For this reason, in the editor, when the Search block is placed inside the Query Loop block with enhanced pagination ON, the Block Controls related to the Search button are removed. The displayed name of the block (via
label) is changed toInstant Search (Search).On the frontend, the Search button is also always removed for each (Instant) Search block.
output_70b3a0.mp4
Pagination
The instant search functionality respects the pagination of the Query block, which uses the
query-<queryId>-pagesyntax.Limitations
Customquery types are supported in the current experiment. TheDefaultquery types are currently not supported but will be in the future version. This is prototyped already in Search and Query blocks: Add support for Default queries viapre_get_postsfilter #67289.Alternatives
Alternative approaches have been explored:
render_block_contextfilter #67013 - using therender_block_contextfilter.Further work
This is an initial prototype and the following features is intentionally not yet implemented:
Defaultqueries, including multipleDefaultqueries on a single page/post/template. Those have been prototyped already in Search and Query blocks: Add support for Default queries viapre_get_postsfilter #67289.