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.