Experiment: Client side navigations in the Product Query block

[luisherranz]

What

This is an experiment to bring client-side navigations to the Product Query block.

Why

Users who interact with the Product Query block may not expect a full refresh, especially when using filters.

The main goal of this PR is to make this approach available for general testing and gather feedback about it.

How

This uses the same technique as the Directives hydration of the Block Hydration Experiments but is reduced to only affect the Product Query block children. This is a similar experiment, but done with the Query Loop block.

I don't expect that interactive blocks work yet (like the Add To Cart block).

I made a video explaining how it works:

https://www.loom.com/share/ea07ee75183a4963a20afa4296656e91

---

Accessibility

• I've tested using only a keyboard (no mouse)
• I've tested using a screen reader
• All animations respect prefers-reduced-motion
• All text has at least a 4.5 color contrast with its background

Other Checks

• This PR adds/removes a feature flag & I've updated this doc.
• This PR adds/removes an experimental interfaces and I've updated this doc.
• I tagged two reviewers because this PR makes queries to the database or I think it might have some security impact.

Screenshots

Before	After

Testing

Automated Tests

• Changes in this PR are covered by Automated Tests.
  • Unit tests
  • E2E tests

User Facing Testing

• Do not include in the Testing Notes

WooCommerce Visibility

• WooCommerce Core
• Feature plugin
• Experimental

Performance Impact

This should be around 6kbs (preact with hooks is 5.4kbs).
I haven't added requestIdleCallback yet but I plan to do so.

Changelog

Add suggested changelog entry here.

[gigitux]

Screen.Capture.on.2022-09-22.at.11-33-56.1.mp4

Awesome works! 🚀 I created a PR to show you what I did on the filter side to support the client-side navigations #7201

I noticed that sometimes it seems that there is a problem with the diff. I didn't investigate it, I just saw the error and shared it with you, maybe you already have an idea about what could be the issue:

Screen.Capture.on.2022-09-22.at.12-00-55.mp4

Also, as you can see in the PR that I shared, I didn't use the WPclientNavigation directive: the reason is that the filter blocks are CSR, so during the event DOMContentLoaded it is possible save in the virtual DOM only the skeleton, not the real block. For the filter blocks, I think that we have to run the logic contained in router.js when the skeleton disappears and the "real block" is loaded.

[luisherranz]

Nice 🙂

I noticed that sometimes it seems that there is a problem with the diff. I didn't investigate it, I just saw the error and shared it with you, maybe you already have an idea about what could be the issue:

If it happens when there are no products to show, then it's because I didn't take that use case into account yet. If not, it'd be great to have some steps to reproduce the issue.

I didn't use the WPclientNavigation directive

Yes, using navigate() in the filters is the expected DX. wp-client-navigation is only for links.

[gigitux]

If it happens when there are no products to show, then it's because I didn't take that use case into account yet.

During my tests, it happened when there were no products to show 👍

[SantosGuillamot]

For context: I took a look at the cst parameter in the query, that was causing issues with the prefetching. It seems it is just a fake argument as explained here. If I understood it correctly, it should be removed at some point.

[github-actions]

This PR has been marked as stale because it has not seen any activity within the past 60 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label - otherwise it will automatically be closed after 10 days.

[luisherranz]

because it has not seen any activity within the past 60 days

60 days you say? 😄

[github-actions]

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

[github-actions]

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

[github-actions]

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

[luisherranz]

Superseded by #10200.