Add Interactivity API runtime (#49994)

* Add interactivity runtime

Co-authored-by: David Arenas <david.arenas@automattic.com>

* Add it to the image block

This is still pretty basic, just to check that it works.

Co-authored-by: David Arenas <david.arenas@automattic.com>

* Add a separate webpack config

Co-authored-by: David Arenas <david.arenas@automattic.com>

* Make sure the runtime is imported only once

Co-authored-by: David Arenas <david.arenas@automattic.com>

* Use sideEffects instead of init

Co-authored-by: David Arenas <david.arenas@automattic.com>

* Move script registration to a general file

Co-authored-by: David Arenas <david.arenas@automattic.com>

* Add `defer` to the interactivity scripts

Co-authored-by: David Arenas <david.arenas@automattic.com>

* Revert changes of the image block

Co-authored-by: David Arenas <david.arenas@automattic.com>

* Fix init import name

Co-authored-by: David Arenas <david.arenas@automattic.com>

* Move and refactor the interactive scritps registration

* Fix code style violations

* Use `wp-interactivity-` prefix for script handles

* Improve the matcher for side effects in `package.json`

* Add custom useSignalEffect

* Call `init` after `store` has been initialized

* Update lib/experimental/interactivity-api/script-loader.php

Co-authored-by: Weston Ruter <westonruter@google.com>

* Plugin: Ensure that translations are set correctly when overriding scripts
This replicates the same logic in WordPress core:
https://github.com/WordPress/wordpress-develop/blob/a5f3087f6b5d9c52dbe67ed247165dc32427c57d/src/wp-includes/script-loader.php#L306-L308

---------

Co-authored-by: Luis Herranz <luisherranz@gmail.com>
Co-authored-by: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Co-authored-by: Weston Ruter <westonruter@google.com>

lib/client-assets.php

@@ -77,16 +77,8 @@ function gutenberg_override_script( $scripts, $handle, $src, $deps = array(), $v
 		$scripts->add( $handle, $src, $deps, $ver, ( $in_footer ? 1 : null ) );
 	}
 
-	/*
-	 * `WP_Dependencies::set_translations` will fall over on itself if setting
-	 * translations on the `wp-i18n` handle, since it internally adds `wp-i18n`
-	 * as a dependency of itself, exhausting memory. The same applies for the
-	 * polyfill and hooks scripts, which are dependencies _of_ `wp-i18n`.
-	 *
-	 * See: https://core.trac.wordpress.org/ticket/46089
-	 */
-	if ( ! in_array( $handle, array( 'wp-i18n', 'wp-polyfill', 'wp-hooks' ), true ) ) {
-		$scripts->set_translations( $handle, 'default' );
+	if ( in_array( 'wp-i18n', $deps, true ) ) {
+		$scripts->set_translations( $handle );
 	}
 
 	/*

lib/experimental/interactivity-api/script-loader.php

@@ -0,0 +1,50 @@
+<?php
+/**
+ * Updates the script-loader.php file
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Registers interactivity runtime and vendor scripts to use with interactive blocks.
+ *
+ * @param WP_Scripts $scripts WP_Scripts instance.
+ */
+function gutenberg_register_interactivity_scripts( $scripts ) {
+	gutenberg_override_script(
+		$scripts,
+		'wp-interactivity-runtime',
+		gutenberg_url(
+			'build/block-library/interactive-blocks/interactivity.min.js'
+		),
+		array( 'wp-interactivity-vendors' )
+	);
+
+	gutenberg_override_script(
+		$scripts,
+		'wp-interactivity-vendors',
+		gutenberg_url(
+			'build/block-library/interactive-blocks/vendors.min.js'
+		)
+	);
+}
+add_action( 'wp_default_scripts', 'gutenberg_register_interactivity_scripts', 10, 1 );
+
+/**
+ * Adds the "defer" attribute to all the interactivity script tags.
+ *
+ * @param string $tag    The generated script tag.
+ * @param string $handle The script's registered handle.
+ *
+ * @return string The modified script tag.
+ */
+function gutenberg_interactivity_scripts_add_defer_attribute( $tag, $handle ) {
+	if ( str_starts_with( $handle, 'wp-interactivity-' ) ) {
+		$p = new WP_HTML_Tag_Processor( $tag );
+		$p->next_tag( array( 'tag' => 'script' ) );
+		$p->set_attribute( 'defer', true );
+		return $p->get_updated_html();
+	}
+	return $tag;
+}
+add_filter( 'script_loader_tag', 'gutenberg_interactivity_scripts_add_defer_attribute', 10, 2 );

lib/load.php

@@ -98,6 +98,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/experimental/block-editor-settings-mobile.php';
 require __DIR__ . '/experimental/block-editor-settings.php';
 require __DIR__ . '/experimental/blocks.php';
+require __DIR__ . '/experimental/interactivity-api/script-loader.php';
 require __DIR__ . '/experimental/navigation-theme-opt-in.php';
 require __DIR__ . '/experimental/kses.php';
 require __DIR__ . '/experimental/l10n.php';

packages/block-library/package.json

@@ -27,10 +27,12 @@
 	"sideEffects": [
 		"build-style/**",
 		"src/**/*.scss",
-		"{src,build,build-module}/*/init.js"
+		"{src,build,build-module}/*/init.js",
+		"{src,build,build-module}/utils/interactivity/index.js"
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
+		"@preact/signals": "^1.1.3",
 		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/api-fetch": "file:../api-fetch",
 		"@wordpress/autop": "file:../autop",
@@ -63,12 +65,14 @@
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
+		"deepsignal": "^1.3.0",
 		"escape-html": "^1.0.3",
 		"fast-average-color": "^9.1.1",
 		"fast-deep-equal": "^3.1.3",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
 		"micromodal": "^0.4.10",
+		"preact": "^10.13.2",
 		"remove-accents": "^0.4.2"
 	},
 	"peerDependencies": {

packages/block-library/src/utils/interactivity/constants.js

@@ -0,0 +1 @@
+export const directivePrefix = 'data-wp-';