Instant search based on search template FSE

[r-chrzan]

Is it possible at the current stage of work to achieve the effect of a instant search engine based on a search template in editor, as is the case with wpmovies?

[luisherranz]

We haven't tried it yet, but we think it should be possible to build it for the Query Loop, in a similar way to the client-side pagination, except that the navigate calls are triggered from the search block instead of the pagination links.

[r-chrzan]

@luisherranz I'm working on one project as part of Interactivity tests and I managed to achieve the effect of searching in the Query Loop block, but it seems to work a little slower due to the (promises?), and I can't get full-page navigation in any way because there is no such thing at the moment options? Am I right?

Screen.record.2023-12-20.o.08.59.40.mov

[luisherranz]

@r-chrzan That's right, full-page client-side navigation is not available yet in Gutenberg. It will likely take a bit longer as it's something very complex to release and we need to do it carefully. That said, I think you should be able to achieve what you want with the region-based client-side navigation.

Can you show the code that you are using so I can take a look?

[r-chrzan]

@luisherranz If you want to help with this particular case I can send you a whole site exported from LocalWP, because for now i only check possibilities of using Interactivity, or you can provide me how to achieve display post when i have prefetching and client side nav. I based on code from docs and a bit of wpmovies

[r-chrzan]

Hello to everyone who is following this thread. Finally, I managed to achieve the effect of a instant search region-based(Query loop block) engine using the interactivity API(after public release v 1.0), using the pre_render_block and query_loop_block_query_vars filters. I can share an example plugin somewhere if anyone is interested. I am sharing a short video

interactivity.mp4

cc: @luisherranz

[cbravobernal]

Of course we are interested!

Feel free to share in the showcase discussion: #55642

[luisherranz]

That's pretty cool to see 😄👏

[r-chrzan]

Posted 💪🏻 here

[michalczaplinski]

Really nice stuff @r-chrzan! 👏

Just a very minor nitpick:

You don't need to import the router inside of *updateSearch() because it's not used there. You can instead put the import statement inside of updateURL() and use it there:

// We can use `await` here instead of `yield` because it's inside of a
// regular async function, not inside of a store action.
const { actions } = await import('@wordpress/interactivity-router');
actions.navigate(`${window.location.pathname}${url.search}`);

[r-chrzan]

@michalczaplinski thanks for a review! I pushed that small changes!