Add Interactivity API runtime (#49994)

* Add interactivity runtime Co-authored-by: David Arenas <[email protected]> * Add it to the image block This is still pretty basic, just to check that it works. Co-authored-by: David Arenas <[email protected]> * Add a separate webpack config Co-authored-by: David Arenas <[email protected]> * Make sure the runtime is imported only once Co-authored-by: David Arenas <[email protected]> * Use sideEffects instead of init Co-authored-by: David Arenas <[email protected]> * Move script registration to a general file Co-authored-by: David Arenas <[email protected]> * Add `defer` to the interactivity scripts Co-authored-by: David Arenas <[email protected]> * Revert changes of the image block Co-authored-by: David Arenas <[email protected]> * Fix init import name Co-authored-by: David Arenas <[email protected]> * 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 <[email protected]> * 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 <[email protected]> Co-authored-by: Grzegorz Ziolkowski <[email protected]> Co-authored-by: Weston Ruter <[email protected]>
BreadGuy007 · May 5, 2023 · 1257242 · 1257242
1 parent 93636b4
commit 1257242
Show file tree

Hide file tree

Showing 15 changed files with 801 additions and 139 deletions.
diff --git a/lib/client-assets.php b/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 );
 	}
 
 	/*

diff --git a/lib/experimental/interactivity-api/script-loader.php b/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 );
diff --git a/lib/load.php b/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';

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/block-library/package.json b/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": {

diff --git a/packages/block-library/src/utils/interactivity/constants.js b/packages/block-library/src/utils/interactivity/constants.js
@@ -0,0 +1 @@
+export const directivePrefix = 'data-wp-';