Tracking issue: Adding directives to WooCommerce blocks

[DAreRodz]

This aims to be the tracking issue to follow the progress of including the Interactivity API in some WooCommerce blocks, especially the Product block. As WooCommerce blocks could potentially benefit from this new API, we want to understand what is needed in order to implement some of the blocks using it.

Note that the mentioned API will ideally be included in Gutenberg and WordPress core at some point. However, to start experimenting as soon as possible, we are moving the needed scripts into the repo so we can start testing the API now.

Experiments

• Experiment: Simple price filter block using the Interactivity API woocommerce-blocks#9926
• Stackblitz - Interactivity API demo: filters with multiple product queries

Done

• Add the Interactivity API runtime to WooCommerce blocks woocommerce-blocks#8220
• Update directives prefix to data-woo- woocommerce-blocks#8316
• Serialize the Interactivity API's store from PHP and hydrate it on the client woocommerce-blocks#8447
• Update the Interactivity API files to include latest changes woocommerce-blocks#9924
• Interactivity API: add afterLoad callbacks to store() function woocommerce-blocks#10338
• Interactivity API: Update interactive regions during client-side navigation woocommerce-blocks#10200
• Migrate Add to Cart button block to use the Interactivity API. Interactivity API and Product Button woocommerce-blocks#10006
• Interactivity API: implement the new store() API woocommerce-blocks#11065

In progress

• Frontend Filters Improvements #42255

Next

• Provide APIs to handle different loading states and error handling.
• Define and add the opt-in mechanism for client-side navigation.
• Polish and finish the needed directives.
• Add test coverage.
• Review the bundling process and ensure we are shipping the Interactivity API correctly.

[DAreRodz]

I asked @SantosGuillamot to update woocommerce/woocommerce-blocks#8026 title and description. It should be ready to review now. 😊

• Add the Interactivity API runtime to WooCommerce blocks woocommerce-blocks#8026

EDIT: the PR was moved to woocommerce/woocommerce-blocks#8220. This is now the one to be reviewed.

• Add the Interactivity API runtime to WooCommerce blocks woocommerce-blocks#8220

[DAreRodz]

I've made some progress with the experiment and recorded a video showing how the simple price filter block behaves now. You can see it in the PR description.

• Experiment: Add a simple price filter block with directives woocommerce-blocks#8221

[luisherranz]

Let's try using data-woo- to see how it feels like.

Ref: WordPress/block-interactivity-experiments#132

[luisherranz]

Let's try using wooStore instead of woox as well.

Ref: WordPress/block-interactivity-experiments#136

[DAreRodz]

PR woocommerce/woocommerce-blocks#8220 is now merged. 🚀

• Add the Interactivity API runtime to WooCommerce blocks woocommerce-blocks#8220

[DAreRodz]

I've added a link to an experiment that shows how to use the Interactivity API for filters with multiple product query blocks.

Remember that it's still WIP 🚧, as it depends on WordPress/block-interactivity-experiments#139 to be finished and merged.

I'll work on documenting everything as well once the code is ready.

[DAreRodz]

I've started working on replacing all the wp- prefixes with woo ones. It's still a draft because it depends on WordPress/block-interactivity-experiments#142 to be approved and merged.

• Update directives prefix to data-woo- woocommerce-blocks#8316

Also, I've updated both demos to use these changes, so now directives start with data-woo instead of wp.

[DAreRodz]

BTW, I forgot to mention that the Stackblitz - Interactivity API demo: filters with multiple product queries demo is working now.

I still have to document it, but you can take a look at the code already if you want. 😄

[DAreRodz]

Another update:

• The Stackblitz - Interactivity API demo: filters with multiple product queries demo has been updated to remove some preact components I was using to simulate SSR and use plain HTML instead. I hope that makes the code clearer.
• I've started working on store serialization and hydration in the main repo (Serialize store in PHP WordPress/block-interactivity-experiments#147). Once merged, I'll port those changes to this repo.

[DAreRodz]

Quick update:

The changes for the directives prefix have been recently merged:

• Update directives prefix to data-woo- woocommerce-blocks#8316

The PR that adds store serialization and hydration (among other things) is ready to review:

• Serialize the Interactivity API's store from PHP and hydrate it on the client woocommerce-blocks#8447

[DAreRodz]

Forgot to mention that I also updated woocommerce/woocommerce-blocks#8221 (the Simple Price Filter demo) with the latest changes in woocommerce/woocommerce-blocks#8447. 🙂

[DAreRodz]

Sorry for the long silence here. 😅

A while ago, I started working on woocommerce/woocommerce-blocks#8524 to make the Filter blocks start using the Interactivity API, which will close issue woocommerce/woocommerce-blocks#8456.

• Use navigate function inside filter blocks woocommerce-blocks#8524

It got stale because it depended on WordPress/block-interactivity-experiments#163, which is already implemented and merged. I'll move those changes to woocommerce/woocommerce-blocks#8524 and continue working on the remaining tasks there. 🙂

[DAreRodz]

I've finished updating the Interactivity API code inside WooCommerce blocks. This is the PR for these changes, ready for review.

• Update the Interactivity API files to include latest changes woocommerce-blocks#9924

I also created a new PR for the Simple Price Filter block, showcasing how to use the updated Interactivity API in blocks. The old one is closed.

• Experiment: Simple price filter block using the Interactivity API woocommerce-blocks#9926

[DAreRodz]

I've opened a PR implementing server-side-rendered updates for interactive regions during client-side navigation.

• Interactivity API: Update interactive regions during client-side navigation woocommerce-blocks#10200

I also updated the Tracking Issue description to reflect the current status.

[DAreRodz]

The Woo team has started working on the Filter blocks and created their own Epic:

• Frontend Filters Improvements #42255

I decided to close the related issue and PR we created a while ago, as the work there was unfinished.

• Interactivity API: make current filter blocks (client-side rendered) work with client-side navigation woocommerce-blocks#8456
• Use navigate function inside filter blocks woocommerce-blocks#8524

[DAreRodz]

Heads up, we have started working on the new store() API, as proposed in WordPress/gutenberg#53586. The work is being tracked here:

• Interactivity API: implement the new store() API woocommerce-blocks#11065

[DAreRodz]

I forgot to announce that the new Interactivity store() API was finally implemented, and interactive blocks were migrated to the new API.

• Interactivity API: implement the new store() API woocommerce-blocks#11065

Now, the Frontend Filters improvements can benefit from these changes. 😊