Add the Interactivity API runtime to WooCommerce blocks

[SantosGuillamot]

What?

⚠️ Superseded by #8220

Includes the current WP directives runtime inside the WooCommerce blocks repository and makes it ready to use.

Tracking issue: woocommerce/woocommerce#42486

Why?

This is required to start testing the Interactivity API in WooCommerce blocks until it is natively available in WordPress.

How?

• Copy-pasting the WP directives runtime code.
• Updating the Webpack configuration to compile the directive's JSX code into Preact.
• Adding an experimental filter to enable directives hydration (false by default).

Testing instructions

See #8026 (comment)

---

I'm commenting the rest of the sections until this PR is more ready to be merged in order to add as less noise as possible. Hope that's okay.

[luisherranz]

This aims to be the tracking issue to follow the progress of the implementation of the Interactivity API in some WooCommerce blocks, especially the Product Query

Pardon me Mario, but how will this serve as the Tracking Issue if it's a pull request that needs to be merged before than anything else in this initiative? Shouldn't it be better to open a separate issue for that? 😅

[SantosGuillamot]

Pardon me Mario, but how will this serve as the Tracking Issue if it's a pull request that needs to be merged before than anything else in this initiative? Shouldn't it be better to open a separate issue for that?

Oh, sorry! The way I understood it was that, as the code is in a branch of a fork, and pull requests will be made against that branch, there was no need to merge this one for the initial phase of integrating the Interactivity API code. So I thought it could serve as tracking issue even though it is a pull request 😅 But maybe you are right and we should open a separate issue from the beginning.

[luisherranz]

Ohh, ok. I guess we need to start merging pull requests at some point, yes.

[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.

[DAreRodz]

Hey, I've been working on this PR for a bit to fix the problem with JSX. I was able to do so by copy-pasting our Webpack configuration from the block hydration experiments and installing the @babel/preset-proposal-optional-chaining, which is required as this repo still uses Webpack 4.

That preset can be removed later when #8013 is merged.

[DAreRodz]

I would consider this PR ready to review, although I cannot change the description or the status; only @SantosGuillamot can, as he created it. 😅 It would be better if further work is done in separate PRs.

Currently, only the Interactivity API (up to WordPress/block-interactivity-experiments@0c2d3d9) is included, with a Webpack configuration to build the library and some PHP code to enqueue it using a WP filter.

I've recorded a video to show the changes quickly.

Experiment - Tracking issue: Implement Interactivity API in WooCommerce blocks by SantosGuillamot · Pull Request woocommerce/woocommerce-blocks#8026 · woocommerce/woocommerce-blocks - 13 January 2023 - Watch Video

By using the following diff on this branch, you should be able to test the changes and see it working.

diff --git a/woocommerce-gutenberg-products-block.php b/woocommerce-gutenberg-products-block.php
index e2d22105e..91b24501f 100644
--- a/woocommerce-gutenberg-products-block.php
+++ b/woocommerce-gutenberg-products-block.php
@@ -317,3 +317,30 @@ function wp_directives_register_scripts() {
 	wp_enqueue_script( 'wp-directives-runtime' );
 }
 add_action( 'wp_enqueue_scripts', 'wp_directives_register_scripts' );
+
+// Enqueue the WP directives runtime.
+add_filter( '__experimental_woocommerce_blocks_enqueue_directives_runtime', function () { return true; } );
+
+// Insert the required meta tag for client-side transitions.
+function add_cst_meta_tag() {
+	echo '<meta itemprop="wp-client-side-transitions" content="active">';
+	add_filter(
+		'client_side_transitions',
+		true
+	);
+}
+
+add_action('wp_head', 'add_cst_meta_tag');
+
+// Modify links inside the query pagination block so they use the `wp-link`
+// directive for client-side transitions.
+function prefetch_navigation_links($block_content, $block, $instance) {
+	$block_content = str_replace(
+		'<a ',
+		'<a wp-link=\'{"prefetch": true, "scroll": false}\'',
+		$block_content
+	);
+	return $block_content;
+}
+
+add_filter('render_block_core/query-pagination', 'prefetch_navigation_links', 10, 3);

[luisherranz]

I noticed all the packages we added are using compatible with version prefix (^), while all the WooCommerce packages use fixed versions.

We should respect that, although it would be nice to know what were the reasons that led them to fix all versions 🙂

[luisherranz]

My mistake, most of the packages use fixed versions, but not all. So forget what I said.

[SantosGuillamot]

I've just marked it as ready. I've tested it, and it seems to be working fine. But as I opened the PR, I shouldn't be the one reviewing it I guess 😄

[DAreRodz]

The work on this PR continues in #8220