Add Interactivity API runtime

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-';