From bce6f45c4f8041d00e35ebeca21f8e81b8506fa1 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Wed, 29 Nov 2023 16:48:39 +0100
Subject: [PATCH] Interactivity API: Use modules instead of scripts in the
 frontend (#56143)

* Bundle `@wordpress/interactivity` as an ES module

* Add the class with a basic API

* Make it work with the Navigation block

* Add versions

* Register `@wordpress/interactivity` module

* Add query and image blocks

* Add id with module identifier to the enqueued modules

* Add requried $usage for admin/frontend

* Avoid the use of enqueue to register modules

* Refactor versions

* Switch from `both` to `['admin', 'frontend']`

* Improve comments

* Add an optional static dependency graph

* Add static and dynamic dependencies in the server

* Add the file and search blocks

* Move $version out of $args to match wp_register_script

* Improve version logic

* Add polyfill

* Fix $version using its own arg in register calls

* Add unit tests

* Refactor tests, add test get import map

* Cleaning data

* Use gutenberg_url()

* Use wp_print_script_tag

* Fix DocBlock on get_import_map()

* Load navigation module only on Gutenberg plugin

* Load query module only on Gutenberg plugin

* Load search module only on Gutenberg plugin

* Load file module only on Gutenberg plugin

* Load image module only on Gutenberg plugin

* Make registration optional

* Improve navigation logic

* Remove unnecessary check

* Fix missing view file

* Don't print the import map if it's empty

* Load the importmap polyfill locally

* Move the es-modules-shims package to the top

* Use the public functions in the tests

* Update test to be more output oriented

* Remove we from comments.

* Start using modules in the interactivity e2e tests

* Update package-lock.json

---------

Co-authored-by: Carlos Bravo <carlos.bravo@automattic.com>
---
 docs/reference-guides/core-blocks.md          |   2 +-
 .../class-wp-navigation-block-renderer.php    |  32 ++-
 .../interactivity-api/modules.php             |  33 +++
 .../interactivity-api/scripts.php             |  40 ----
 .../modules/class-gutenberg-modules.php       | 195 +++++++++++++++
 lib/load.php                                  |   4 +-
 package-lock.json                             |  13 +
 package.json                                  |   1 +
 packages/block-library/src/file/index.php     |  37 ++-
 packages/block-library/src/image/block.json   |   1 +
 packages/block-library/src/image/index.php    |  19 +-
 .../block-library/src/navigation/index.php    |   9 +
 packages/block-library/src/query/index.php    |  42 +++-
 packages/block-library/src/search/index.php   |  58 ++---
 packages/e2e-tests/package.json               |   1 +
 .../e2e-tests/plugins/interactive-blocks.php  |   4 +-
 .../directive-bind/render.php                 |   2 +
 .../interactive-blocks/directive-bind/view.js |  62 ++---
 .../directive-body/render.php                 |   2 +
 .../interactive-blocks/directive-body/view.js |  21 +-
 .../directive-class/render.php                |   2 +
 .../directive-class/view.js                   |  39 +--
 .../directive-context/render.php              |   2 +
 .../directive-context/view.js                 |  93 ++++----
 .../directive-init/render.php                 |   2 +
 .../interactive-blocks/directive-init/view.js | 120 +++++-----
 .../directive-key/render.php                  |   1 +
 .../interactive-blocks/directive-key/view.js  |  27 ++-
 .../directive-on/render.php                   |   2 +
 .../interactive-blocks/directive-on/view.js   |  53 +++--
 .../directive-priorities/render.php           |   2 +
 .../directive-priorities/view.js              | 225 +++++++++---------
 .../directive-slots/render.php                |   2 +
 .../directive-slots/view.js                   |  33 +--
 .../directive-style/render.php                |   1 +
 .../directive-style/view.js                   |  41 ++--
 .../directive-text/render.php                 |   2 +
 .../interactive-blocks/directive-text/view.js |  31 +--
 .../directive-watch/render.php                |   2 +
 .../directive-watch/view.js                   | 100 ++++----
 .../negation-operator/render.php              |   2 +
 .../negation-operator/view.js                 |  32 ++-
 .../router-navigate/render.php                |   2 +-
 .../router-navigate/view.js                   |  55 ++---
 .../router-regions/render.php                 |   1 +
 .../interactive-blocks/router-regions/view.js |  76 +++---
 .../interactive-blocks/store-tag/render.php   |   3 +
 .../interactive-blocks/store-tag/view.js      |  40 ++--
 .../tovdom-islands/render.php                 |   2 +
 .../interactive-blocks/tovdom-islands/view.js |  46 ++--
 .../interactive-blocks/tovdom/render.php      |   2 +
 .../plugins/interactive-blocks/tovdom/view.js |   9 +-
 .../modules/class-gutenberg-modules-test.php  |  66 +++++
 tools/webpack/interactivity.js                |  39 ++-
 54 files changed, 1052 insertions(+), 681 deletions(-)
 create mode 100644 lib/experimental/interactivity-api/modules.php
 delete mode 100644 lib/experimental/interactivity-api/scripts.php
 create mode 100644 lib/experimental/modules/class-gutenberg-modules.php
 create mode 100644 phpunit/experimental/modules/class-gutenberg-modules-test.php

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 4f42550ba4cfb..dd7ef824aa6b0 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -378,7 +378,7 @@ Insert an image to make a visual statement. ([Source](https://github.com/WordPre
 
 -	**Name:** core/image
 -	**Category:** media
--	**Supports:** align (center, full, left, right, wide), anchor, color (~~background~~, ~~text~~), filter (duotone)
+-	**Supports:** align (center, full, left, right, wide), anchor, color (~~background~~, ~~text~~), filter (duotone), interactivity
 -	**Attributes:** alt, aspectRatio, caption, height, href, id, lightbox, linkClass, linkDestination, linkTarget, rel, scale, sizeSlug, title, url, width
 
 ## Latest Comments
diff --git a/lib/compat/wordpress-6.5/class-wp-navigation-block-renderer.php b/lib/compat/wordpress-6.5/class-wp-navigation-block-renderer.php
index 52ec4f508246a..9c2314ebe6890 100644
--- a/lib/compat/wordpress-6.5/class-wp-navigation-block-renderer.php
+++ b/lib/compat/wordpress-6.5/class-wp-navigation-block-renderer.php
@@ -543,20 +543,28 @@ private static function get_nav_element_directives( $should_load_view_script ) {
 	 */
 	private static function handle_view_script_loading( $attributes, $block, $inner_blocks ) {
 		$should_load_view_script = static::should_load_view_script( $attributes, $inner_blocks );
+		$is_gutenberg_plugin     = defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN;
+		$view_js_file            = 'wp-block-navigation-view';
+		$script_handles          = $block->block_type->view_script_handles;
 
-		$view_js_file = 'wp-block-navigation-view';
-
-		// If the script already exists, there is no point in removing it from viewScript.
-		if ( ! wp_script_is( $view_js_file ) ) {
-			$script_handles = $block->block_type->view_script_handles;
-
-			// If the script is not needed, and it is still in the `view_script_handles`, remove it.
-			if ( ! $should_load_view_script && in_array( $view_js_file, $script_handles, true ) ) {
-				$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file ) );
+		if ( $is_gutenberg_plugin ) {
+			if ( $should_load_view_script ) {
+				gutenberg_enqueue_module( '@wordpress/block-library/navigation-block' );
 			}
-			// If the script is needed, but it was previously removed, add it again.
-			if ( $should_load_view_script && ! in_array( $view_js_file, $script_handles, true ) ) {
-				$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file ) );
+			// Remove the view script because we are using the module.
+			$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file ) );
+		} else {
+			// If the script already exists, there is no point in removing it from viewScript.
+			if ( ! wp_script_is( $view_js_file ) ) {
+
+				// If the script is not needed, and it is still in the `view_script_handles`, remove it.
+				if ( ! $should_load_view_script && in_array( $view_js_file, $script_handles, true ) ) {
+					$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file ) );
+				}
+				// If the script is needed, but it was previously removed, add it again.
+				if ( $should_load_view_script && ! in_array( $view_js_file, $script_handles, true ) ) {
+					$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file ) );
+				}
 			}
 		}
 	}
diff --git a/lib/experimental/interactivity-api/modules.php b/lib/experimental/interactivity-api/modules.php
new file mode 100644
index 0000000000000..7db774de04fd7
--- /dev/null
+++ b/lib/experimental/interactivity-api/modules.php
@@ -0,0 +1,33 @@
+<?php
+/**
+ * Interactive modules.
+ *
+ * @package Gutenberg
+ * @subpackage Interactivity API
+ */
+
+/**
+ * Register the `@wordpress/interactivity` module.
+ */
+function gutenberg_register_interactivity_module() {
+	gutenberg_register_module(
+		'@wordpress/interactivity',
+		gutenberg_url( '/build/interactivity/index.min.js' ),
+		array(),
+		defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
+	);
+
+	// TODO: Replace with a simpler version that only provides support for import maps.
+	// TODO: Load only if the browser doesn't support import maps (https://github.com/guybedford/es-module-shims/issues/371).
+	wp_enqueue_script(
+		'es-module-shims',
+		gutenberg_url( '/build/importmap-polyfill.min.js' ),
+		array(),
+		null,
+		array(
+			'strategy' => 'defer',
+		)
+	);
+}
+
+add_action( 'wp_enqueue_scripts', 'gutenberg_register_interactivity_module' );
diff --git a/lib/experimental/interactivity-api/scripts.php b/lib/experimental/interactivity-api/scripts.php
deleted file mode 100644
index ed1fca8550070..0000000000000
--- a/lib/experimental/interactivity-api/scripts.php
+++ /dev/null
@@ -1,40 +0,0 @@
-<?php
-/**
- * Utils to optimize the interactive scripts.
- *
- * @package Gutenberg
- * @subpackage Interactivity API
- */
-
-/**
- * Makes sure that interactivity scripts execute after all `wp_store` directives have been printed to the page.
- *
- * In WordPress 6.3+ this is achieved by printing in the head but marking the scripts with defer. This has the benefit
- * of early discovery so the script is loaded by the browser, while at the same time not blocking rendering. In older
- * versions of WordPress, this is achieved by loading the scripts in the footer.
- *
- * @link https://make.wordpress.org/core/2023/07/14/registering-scripts-with-async-and-defer-attributes-in-wordpress-6-3/
- */
-function gutenberg_interactivity_move_interactive_scripts_to_the_footer() {
-	$supports_defer = version_compare( strtok( get_bloginfo( 'version' ), '-' ), '6.3', '>=' );
-	if ( $supports_defer ) {
-		// Defer execution of @wordpress/interactivity package but continue loading in head.
-		wp_script_add_data( 'wp-interactivity', 'strategy', 'defer' );
-		wp_script_add_data( 'wp-interactivity', 'group', 0 );
-	} else {
-		// Move the @wordpress/interactivity package to the footer.
-		wp_script_add_data( 'wp-interactivity', 'group', 1 );
-	}
-
-	// Move all the view scripts of the interactive blocks to the footer.
-	$registered_blocks = \WP_Block_Type_Registry::get_instance()->get_all_registered();
-	foreach ( array_values( $registered_blocks ) as $block ) {
-		if ( isset( $block->supports['interactivity'] ) && $block->supports['interactivity'] ) {
-			foreach ( $block->view_script_handles as $handle ) {
-				// Note that all block view scripts are already made defer by default.
-				wp_script_add_data( $handle, 'group', $supports_defer ? 0 : 1 );
-			}
-		}
-	}
-}
-add_action( 'wp_enqueue_scripts', 'gutenberg_interactivity_move_interactive_scripts_to_the_footer', 11 );
diff --git a/lib/experimental/modules/class-gutenberg-modules.php b/lib/experimental/modules/class-gutenberg-modules.php
new file mode 100644
index 0000000000000..ca74d863043ee
--- /dev/null
+++ b/lib/experimental/modules/class-gutenberg-modules.php
@@ -0,0 +1,195 @@
+<?php
+/**
+ * Modules API: Gutenberg_Modules class.
+ *
+ * Native support for ES Modules and Import Maps.
+ *
+ * @package Gutenberg
+ * @subpackage Modules
+ */
+
+/**
+ * Gutenberg_Modules class
+ */
+class Gutenberg_Modules {
+	/**
+	 * An array of registered modules, keyed by module identifier.
+	 *
+	 * @var array
+	 */
+	private static $registered = array();
+
+	/**
+	 * An array of queued modules.
+	 *
+	 * @var string[]
+	 */
+	private static $enqueued = array();
+
+	/**
+	 * Registers the module if no module with that module identifier already
+	 * exists.
+	 *
+	 * @param string           $module_identifier The identifier of the module. Should be unique. It will be used in the final import map.
+	 * @param string           $src               Full URL of the module, or path of the script relative to the WordPress root directory.
+	 * @param array            $dependencies      Optional. An array of module identifiers of the static and dynamic dependencies of this module. It can be an indexed array, in which case all the dependencies are static, or it can be an associative array, in which case it has to contain the keys `static` and `dynamic`.
+	 * @param string|bool|null $version           Optional. String specifying module version number. It is added to the URL as a query string for cache busting purposes. If SCRIPT_DEBUG is true, a timestamp is used. If it is set to false, a version number is automatically added equal to current installed WordPress version. If set to null, no version is added.
+	 */
+	public static function register( $module_identifier, $src, $dependencies = array(), $version = false ) {
+		// Register the module if it's not already registered.
+		if ( ! isset( self::$registered[ $module_identifier ] ) ) {
+			$deps = array(
+				'static'  => isset( $dependencies['static'] ) || isset( $dependencies['dynamic'] ) ? $dependencies['static'] ?? array() : $dependencies,
+				'dynamic' => isset( $dependencies['dynamic'] ) ? $dependencies['dynamic'] : array(),
+			);
+
+			self::$registered[ $module_identifier ] = array(
+				'src'          => $src,
+				'version'      => $version,
+				'dependencies' => $deps,
+			);
+		}
+	}
+
+	/**
+	 * Enqueues a module in the page.
+	 *
+	 * @param string $module_identifier The identifier of the module.
+	 */
+	public static function enqueue( $module_identifier ) {
+		// Add the module to the queue if it's not already there.
+		if ( ! in_array( $module_identifier, self::$enqueued, true ) ) {
+			self::$enqueued[] = $module_identifier;
+		}
+	}
+
+	/**
+	 * Returns the import map array.
+	 *
+	 * @return array Associative array with 'imports' key mapping to an array of module identifiers and their respective source strings.
+	 */
+	public static function get_import_map() {
+		$imports = array();
+		foreach ( self::get_dependencies( self::$enqueued, array( 'static', 'dynamic' ) ) as $module_identifier => $module ) {
+			$imports[ $module_identifier ] = $module['src'] . self::get_version_query_string( $module['version'] );
+		}
+		return array( 'imports' => $imports );
+	}
+
+	/**
+	 * Prints the import map.
+	 */
+	public static function print_import_map() {
+		$import_map = self::get_import_map();
+		if ( ! empty( $import_map['imports'] ) ) {
+			echo '<script type="importmap">' . wp_json_encode( self::get_import_map(), JSON_HEX_TAG | JSON_HEX_AMP ) . '</script>';
+		}
+	}
+
+	/**
+	 * Prints all the enqueued modules using <script type="module">.
+	 */
+	public static function print_enqueued_modules() {
+		foreach ( self::$enqueued as $module_identifier ) {
+			if ( isset( self::$registered[ $module_identifier ] ) ) {
+				$module = self::$registered[ $module_identifier ];
+				wp_print_script_tag(
+					array(
+						'type' => 'module',
+						'src'  => $module['src'] . self::get_version_query_string( $module['version'] ),
+						'id'   => $module_identifier,
+					)
+				);
+			}
+		}
+	}
+
+	/**
+	 * Prints the link tag with rel="modulepreload" for all the static
+	 * dependencies of the enqueued modules.
+	 */
+	public static function print_module_preloads() {
+		foreach ( self::get_dependencies( self::$enqueued, array( 'static' ) ) as $dependency_identifier => $module ) {
+				echo '<link rel="modulepreload" href="' . $module['src'] . self::get_version_query_string( $module['version'] ) . '" id="' . $dependency_identifier . '">';
+		}
+	}
+
+	/**
+	 * Gets the module's version. It either returns a timestamp (if SCRIPT_DEBUG
+	 * is true), the explicit version of the module if it is set and not false, or
+	 * an empty string if none of the above conditions are met.
+	 *
+	 * @param array $version The version of the module.
+	 * @return string A string presenting the version.
+	 */
+	private static function get_version_query_string( $version ) {
+		if ( SCRIPT_DEBUG ) {
+			return '?ver=' . time();
+		} elseif ( false === $version ) {
+			return '?ver=' . get_bloginfo( 'version' );
+		} elseif ( null !== $version ) {
+			return '?ver=' . $version;
+		}
+		return '';
+	}
+
+	/**
+	 * Returns all unique static and/or dynamic dependencies for the received modules. It's
+	 * recursive, so it will also get the static or dynamic dependencies of the dependencies.
+	 *
+	 * @param array $module_identifiers The identifiers of the modules to get dependencies for.
+	 * @param array $types              The type of dependencies to retrieve. It can be `static`, `dynamic` or both.
+	 * @return array The array containing the unique dependencies of the modules.
+	 */
+	private static function get_dependencies( $module_identifiers, $types = array( 'static', 'dynamic' ) ) {
+		return array_reduce(
+			$module_identifiers,
+			function ( $dependency_modules, $module_identifier ) use ( $types ) {
+				if ( ! isset( self::$registered[ $module_identifier ] ) ) {
+					return $dependency_modules;
+				}
+
+				$dependencies = array();
+				foreach ( $types as $type ) {
+					$dependencies = array_merge( $dependencies, self::$registered[ $module_identifier ]['dependencies'][ $type ] );
+				}
+				$dependencies       = array_unique( $dependencies );
+				$dependency_modules = array_intersect_key( self::$registered, array_flip( $dependencies ) );
+
+				return array_merge( $dependency_modules, $dependency_modules, self::get_dependencies( $dependencies, $types ) );
+			},
+			array()
+		);
+	}
+}
+
+/**
+ * Registers a JavaScript module. It will be added to the import map.
+ *
+ * @param string           $module_identifier The identifier of the module. Should be unique. It will be used in the final import map.
+ * @param string           $src               Full URL of the module, or path of the script relative to the WordPress root directory.
+ * @param array            $dependencies      Optional. An array of module identifiers of the static and dynamic dependencies of this module. It can be an indexed array, in which case all the dependencies are static, or it can be an associative array, in which case it has to contain the keys `static` and `dynamic`.
+ * @param string|bool|null $version           Optional. String specifying module version number. It is added to the URL as a query string for cache busting purposes. If SCRIPT_DEBUG is true, a timestamp is used. If it is set to false, a version number is automatically added equal to current installed WordPress version. If set to null, no version is added.
+ */
+function gutenberg_register_module( $module_identifier, $src, $dependencies = array(), $version = false ) {
+	Gutenberg_Modules::register( $module_identifier, $src, $dependencies, $version );
+}
+
+/**
+ * Enqueues a JavaScript module. It will be added to both the import map and a
+ * script tag with the "module" type.
+ *
+ * @param string $module_identifier The identifier of the module. Should be unique. It will be used in the final import map.
+ */
+function gutenberg_enqueue_module( $module_identifier ) {
+	Gutenberg_Modules::enqueue( $module_identifier );
+}
+
+// Prints the import map in the head tag.
+add_action( 'wp_head', array( 'Gutenberg_Modules', 'print_import_map' ) );
+
+// Prints the enqueued modules in the head tag.
+add_action( 'wp_head', array( 'Gutenberg_Modules', 'print_enqueued_modules' ) );
+
+// Prints the preloaded modules in the head tag.
+add_action( 'wp_head', array( 'Gutenberg_Modules', 'print_module_preloads' ) );
diff --git a/lib/load.php b/lib/load.php
index e2d804befe7d7..5da1a1126da26 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -115,7 +115,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 
 require __DIR__ . '/experimental/interactivity-api/class-wp-interactivity-store.php';
 require __DIR__ . '/experimental/interactivity-api/store.php';
-require __DIR__ . '/experimental/interactivity-api/scripts.php';
+require __DIR__ . '/experimental/interactivity-api/modules.php';
 require __DIR__ . '/experimental/interactivity-api/class-wp-directive-processor.php';
 require __DIR__ . '/experimental/interactivity-api/class-wp-directive-context.php';
 require __DIR__ . '/experimental/interactivity-api/directive-processing.php';
@@ -125,6 +125,8 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/experimental/interactivity-api/directives/wp-style.php';
 require __DIR__ . '/experimental/interactivity-api/directives/wp-text.php';
 
+require __DIR__ . '/experimental/modules/class-gutenberg-modules.php';
+
 // Fonts API / Font Face.
 remove_action( 'plugins_loaded', '_wp_theme_json_webfonts_handler' ); // Turns off WordPress 6.0's stopgap handler.
 
diff --git a/package-lock.json b/package-lock.json
index 4f293d8e6f64b..667f491fb6859 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -79,6 +79,7 @@
 				"@wordpress/warning": "file:packages/warning",
 				"@wordpress/widgets": "file:packages/widgets",
 				"@wordpress/wordcount": "file:packages/wordcount",
+				"es-module-shims": "^1.8.2",
 				"wicg-inert": "3.1.2"
 			},
 			"devDependencies": {
@@ -26353,6 +26354,11 @@
 			"integrity": "sha512-JUFAyicQV9mXc3YRxPnDlrfBKpqt6hUYzz9/boprUJHs4e4KVr3XwOF70doO6gwXUor6EWZJAyWAfKki84t20Q==",
 			"dev": true
 		},
+		"node_modules/es-module-shims": {
+			"version": "1.8.2",
+			"resolved": "https://registry.npmjs.org/es-module-shims/-/es-module-shims-1.8.2.tgz",
+			"integrity": "sha512-7vIYVzpOhXtpc3Yn03itB+GSgVZFW7oL4kdydA+iL+IEi7HiSLBUxM05QFw4SxTl6e++pMpGqZPo2+vdNs3TbA=="
+		},
 		"node_modules/es-set-tostringtag": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz",
@@ -55186,6 +55192,7 @@
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@wordpress/e2e-test-utils": "file:../e2e-test-utils",
+				"@wordpress/interactivity": "file:../interactivity",
 				"@wordpress/jest-console": "file:../jest-console",
 				"@wordpress/jest-puppeteer-axe": "file:../jest-puppeteer-axe",
 				"@wordpress/scripts": "file:../scripts",
@@ -70441,6 +70448,7 @@
 			"version": "file:packages/e2e-tests",
 			"requires": {
 				"@wordpress/e2e-test-utils": "file:../e2e-test-utils",
+				"@wordpress/interactivity": "file:../interactivity",
 				"@wordpress/jest-console": "file:../jest-console",
 				"@wordpress/jest-puppeteer-axe": "file:../jest-puppeteer-axe",
 				"@wordpress/scripts": "file:../scripts",
@@ -77477,6 +77485,11 @@
 			"integrity": "sha512-JUFAyicQV9mXc3YRxPnDlrfBKpqt6hUYzz9/boprUJHs4e4KVr3XwOF70doO6gwXUor6EWZJAyWAfKki84t20Q==",
 			"dev": true
 		},
+		"es-module-shims": {
+			"version": "1.8.2",
+			"resolved": "https://registry.npmjs.org/es-module-shims/-/es-module-shims-1.8.2.tgz",
+			"integrity": "sha512-7vIYVzpOhXtpc3Yn03itB+GSgVZFW7oL4kdydA+iL+IEi7HiSLBUxM05QFw4SxTl6e++pMpGqZPo2+vdNs3TbA=="
+		},
 		"es-set-tostringtag": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz",
diff --git a/package.json b/package.json
index d46d146cb9baf..74ca63258e49c 100644
--- a/package.json
+++ b/package.json
@@ -91,6 +91,7 @@
 		"@wordpress/warning": "file:packages/warning",
 		"@wordpress/widgets": "file:packages/widgets",
 		"@wordpress/wordcount": "file:packages/wordcount",
+		"es-module-shims": "^1.8.2",
 		"wicg-inert": "3.1.2"
 	},
 	"devDependencies": {
diff --git a/packages/block-library/src/file/index.php b/packages/block-library/src/file/index.php
index 8bcce69ef8968..5910a63e6cf18 100644
--- a/packages/block-library/src/file/index.php
+++ b/packages/block-library/src/file/index.php
@@ -15,19 +15,29 @@
  * @return string Returns the block content.
  */
 function render_block_core_file( $attributes, $content, $block ) {
+	$is_gutenberg_plugin     = defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN;
 	$should_load_view_script = ! empty( $attributes['displayPreview'] );
 	$view_js_file            = 'wp-block-file-view';
-	// If the script already exists, there is no point in removing it from viewScript.
-	if ( ! wp_script_is( $view_js_file ) ) {
-		$script_handles = $block->block_type->view_script_handles;
+	$script_handles          = $block->block_type->view_script_handles;
 
-		// If the script is not needed, and it is still in the `view_script_handles`, remove it.
-		if ( ! $should_load_view_script && in_array( $view_js_file, $script_handles, true ) ) {
-			$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file ) );
+	if ( $is_gutenberg_plugin ) {
+		if ( $should_load_view_script ) {
+			gutenberg_enqueue_module( '@wordpress/block-library/file-block' );
 		}
-		// If the script is needed, but it was previously removed, add it again.
-		if ( $should_load_view_script && ! in_array( $view_js_file, $script_handles, true ) ) {
-			$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file ) );
+		// Remove the view script because we are using the module.
+		$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file ) );
+	} else {
+		// If the script already exists, there is no point in removing it from viewScript.
+		if ( ! wp_script_is( $view_js_file ) ) {
+
+			// If the script is not needed, and it is still in the `view_script_handles`, remove it.
+			if ( ! $should_load_view_script && in_array( $view_js_file, $script_handles, true ) ) {
+				$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file ) );
+			}
+			// If the script is needed, but it was previously removed, add it again.
+			if ( $should_load_view_script && ! in_array( $view_js_file, $script_handles, true ) ) {
+				$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file ) );
+			}
 		}
 	}
 
@@ -96,5 +106,14 @@ function register_block_core_file() {
 			'render_callback' => 'render_block_core_file',
 		)
 	);
+
+	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
+		gutenberg_register_module(
+			'@wordpress/block-library/file-block',
+			gutenberg_url( '/build/interactivity/file.min.js' ),
+			array( '@wordpress/interactivity' ),
+			defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
+		);
+	}
 }
 add_action( 'init', 'register_block_core_file' );
diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json
index b46829e5059a2..cfe91a71ff4f9 100644
--- a/packages/block-library/src/image/block.json
+++ b/packages/block-library/src/image/block.json
@@ -92,6 +92,7 @@
 		}
 	},
 	"supports": {
+		"interactivity": true,
 		"align": [ "left", "center", "right", "wide", "full" ],
 		"anchor": true,
 		"color": {
diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php
index 5667c71c45aff..48e6e0585b96e 100644
--- a/packages/block-library/src/image/index.php
+++ b/packages/block-library/src/image/index.php
@@ -37,6 +37,7 @@ function render_block_core_image( $attributes, $content, $block ) {
 	$link_destination  = isset( $attributes['linkDestination'] ) ? $attributes['linkDestination'] : 'none';
 	$lightbox_settings = block_core_image_get_lightbox_settings( $block->parsed_block );
 
+	$is_gutenberg_plugin = defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN;
 	$view_js_file_handle = 'wp-block-image-view';
 	$script_handles      = $block->block_type->view_script_handles;
 
@@ -50,9 +51,11 @@ function render_block_core_image( $attributes, $content, $block ) {
 		isset( $lightbox_settings['enabled'] ) &&
 		true === $lightbox_settings['enabled']
 	) {
-		$block->block_type->supports['interactivity'] = true;
-
-		if ( ! in_array( $view_js_file_handle, $script_handles, true ) ) {
+		if ( $is_gutenberg_plugin ) {
+			gutenberg_enqueue_module( '@wordpress/block-library/image' );
+			// Remove the view script because we are using the module.
+			$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file_handle ) );
+		} elseif ( ! in_array( $view_js_file_handle, $script_handles, true ) ) {
 			$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file_handle ) );
 		}
 
@@ -71,6 +74,7 @@ function render_block_core_image( $attributes, $content, $block ) {
 		 * other Image blocks.
 		 */
 		remove_filter( 'render_block_core/image', 'block_core_image_render_lightbox', 15 );
+
 		// If the script is not needed, and it is still in the `view_script_handles`, remove it.
 		if ( in_array( $view_js_file_handle, $script_handles, true ) ) {
 			$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file_handle ) );
@@ -358,5 +362,14 @@ function register_block_core_image() {
 			'render_callback' => 'render_block_core_image',
 		)
 	);
+
+	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
+		gutenberg_register_module(
+			'@wordpress/block-library/image',
+			gutenberg_url( '/build/interactivity/image.min.js' ),
+			array( '@wordpress/interactivity' ),
+			defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
+		);
+	}
 }
 add_action( 'init', 'register_block_core_image' );
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index 6550d896656b1..eb06e731ccb8f 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -426,6 +426,15 @@ function register_block_core_navigation() {
 			'render_callback' => 'render_block_core_navigation',
 		)
 	);
+
+	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
+		gutenberg_register_module(
+			'@wordpress/block-library/navigation-block',
+			gutenberg_url( '/build/interactivity/navigation.min.js' ),
+			array( '@wordpress/interactivity' ),
+			defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
+		);
+	}
 }
 
 add_action( 'init', 'register_block_core_navigation' );
diff --git a/packages/block-library/src/query/index.php b/packages/block-library/src/query/index.php
index 6daf2411233bd..75b5218364d7b 100644
--- a/packages/block-library/src/query/index.php
+++ b/packages/block-library/src/query/index.php
@@ -63,19 +63,28 @@ class="wp-block-query__enhanced-pagination-animation"
 		}
 	}
 
-	$view_asset = 'wp-block-query-view';
-	if ( ! wp_script_is( $view_asset ) ) {
-		$script_handles = $block->block_type->view_script_handles;
-		// If the script is not needed, and it is still in the `view_script_handles`, remove it.
-		if (
-			( ! $attributes['enhancedPagination'] || ! isset( $attributes['queryId'] ) )
-			&& in_array( $view_asset, $script_handles, true )
-		) {
-			$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_asset ) );
+	$is_gutenberg_plugin     = defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN;
+	$should_load_view_script = $attributes['enhancedPagination'] && isset( $attributes['queryId'] );
+	$view_asset              = 'wp-block-query-view';
+	$script_handles          = $block->block_type->view_script_handles;
+
+	if ( $is_gutenberg_plugin ) {
+		if ( $should_load_view_script ) {
+			gutenberg_enqueue_module( '@wordpress/block-library/query' );
 		}
-		// If the script is needed, but it was previously removed, add it again.
-		if ( $attributes['enhancedPagination'] && isset( $attributes['queryId'] ) && ! in_array( $view_asset, $script_handles, true ) ) {
-			$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_asset ) );
+		// Remove the view script because we are using the module.
+		$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_asset ) );
+	} else {
+		if ( ! wp_script_is( $view_asset ) ) {
+			// If the script is not needed, and it is still in the `view_script_handles`, remove it.
+			if ( ! $should_load_view_script && in_array( $view_asset, $script_handles, true )
+			) {
+				$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_asset ) );
+			}
+			// If the script is needed, but it was previously removed, add it again.
+			if ( $should_load_view_script && ! in_array( $view_asset, $script_handles, true ) ) {
+				$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_asset ) );
+			}
 		}
 	}
 
@@ -127,6 +136,15 @@ function register_block_core_query() {
 			'render_callback' => 'render_block_core_query',
 		)
 	);
+
+	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
+		gutenberg_register_module(
+			'@wordpress/block-library/query',
+			'/wp-content/plugins/gutenberg/build/interactivity/query.min.js',
+			array( '@wordpress/interactivity' ),
+			defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
+		);
+	}
 }
 add_action( 'init', 'register_block_core_query' );
 
diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index ec7e763ecb1f6..f5391eefc8cac 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -87,18 +87,28 @@ function render_block_core_search( $attributes, $content, $block ) {
 			$input->set_attribute( 'tabindex', '-1' );
 		}
 
-		// If the script already exists, there is no point in removing it from viewScript.
-		$view_js_file = 'wp-block-search-view';
-		if ( ! wp_script_is( $view_js_file ) ) {
-			$script_handles = $block->block_type->view_script_handles;
-
-			// If the script is not needed, and it is still in the `view_script_handles`, remove it.
-			if ( ! $is_expandable_searchfield && in_array( $view_js_file, $script_handles, true ) ) {
-				$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file ) );
+		$is_gutenberg_plugin = defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN;
+		$script_handles      = $block->block_type->view_script_handles;
+		$view_js_file        = 'wp-block-search-view';
+
+		if ( $is_gutenberg_plugin ) {
+			if ( $is_expandable_searchfield ) {
+				gutenberg_enqueue_module( '@wordpress/block-library/search-block' );
 			}
-			// If the script is needed, but it was previously removed, add it again.
-			if ( $is_expandable_searchfield && ! in_array( $view_js_file, $script_handles, true ) ) {
-				$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file ) );
+			// Remove the view script because we are using the module.
+			$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file ) );
+		} else {
+			// If the script already exists, there is no point in removing it from viewScript.
+			if ( ! wp_script_is( $view_js_file ) ) {
+
+				// If the script is not needed, and it is still in the `view_script_handles`, remove it.
+				if ( ! $is_expandable_searchfield && in_array( $view_js_file, $script_handles, true ) ) {
+					$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file ) );
+				}
+				// If the script is needed, but it was previously removed, add it again.
+				if ( $is_expandable_searchfield && ! in_array( $view_js_file, $script_handles, true ) ) {
+					$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file ) );
+				}
 			}
 		}
 	}
@@ -203,27 +213,17 @@ function register_block_core_search() {
 			'render_callback' => 'render_block_core_search',
 		)
 	);
-}
-add_action( 'init', 'register_block_core_search' );
 
-/**
- * Ensure that the view script has the `wp-interactivity` dependency.
- *
- * @since 6.4.0
- *
- * @global WP_Scripts $wp_scripts
- */
-function block_core_search_ensure_interactivity_dependency() {
-	global $wp_scripts;
-	if (
-		isset( $wp_scripts->registered['wp-block-search-view'] ) &&
-		! in_array( 'wp-interactivity', $wp_scripts->registered['wp-block-search-view']->deps, true )
-	) {
-		$wp_scripts->registered['wp-block-search-view']->deps[] = 'wp-interactivity';
+	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
+		gutenberg_register_module(
+			'@wordpress/block-library/search-block',
+			gutenberg_url( '/build/interactivity/search.min.js' ),
+			array( '@wordpress/interactivity' ),
+			defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
+		);
 	}
 }
-
-add_action( 'wp_print_scripts', 'block_core_search_ensure_interactivity_dependency' );
+add_action( 'init', 'register_block_core_search' );
 
 /**
  * Builds the correct top level classnames for the 'core/search' block.
diff --git a/packages/e2e-tests/package.json b/packages/e2e-tests/package.json
index f3cabf4d6a2c9..70fc4f26f654e 100644
--- a/packages/e2e-tests/package.json
+++ b/packages/e2e-tests/package.json
@@ -24,6 +24,7 @@
 	},
 	"dependencies": {
 		"@wordpress/e2e-test-utils": "file:../e2e-test-utils",
+		"@wordpress/interactivity": "file:../interactivity",
 		"@wordpress/jest-console": "file:../jest-console",
 		"@wordpress/jest-puppeteer-axe": "file:../jest-puppeteer-axe",
 		"@wordpress/scripts": "file:../scripts",
diff --git a/packages/e2e-tests/plugins/interactive-blocks.php b/packages/e2e-tests/plugins/interactive-blocks.php
index c551127548e80..1236ecd7d277f 100644
--- a/packages/e2e-tests/plugins/interactive-blocks.php
+++ b/packages/e2e-tests/plugins/interactive-blocks.php
@@ -21,10 +21,10 @@ function () {
 
 				$view_file = plugin_dir_url( $block_folder ) . $name . '/' . 'view.js';
 
-				wp_register_script(
+				gutenberg_register_module(
 					$name . '-view',
 					$view_file,
-					array( 'wp-interactivity' ),
+					array( '@wordpress/interactivity' ),
 					filemtime( $view_file ),
 					true
 				);
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-bind/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-bind/render.php
index f313262b7c058..efa62c3a18b7e 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-bind/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-bind/render.php
@@ -5,7 +5,9 @@
  * @package gutenberg-test-interactive-blocks
  */
 
+gutenberg_enqueue_module( 'directive-bind-view' );
 ?>
+
 <div data-wp-interactive='{ "namespace": "directive-bind" }'>
 	<a
 		data-wp-bind--href="state.url"
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-bind/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-bind/view.js
index 4affe5a42735f..0d93e93ba1450 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-bind/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-bind/view.js
@@ -1,35 +1,37 @@
-( ( { wp } ) => {
-	const { store, getContext } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
 
-	const { state, foo } = store( 'directive-bind', {
-		state: {
-			url: '/some-url',
-			checked: true,
-			show: false,
-			width: 1,
+const { state, foo } = store( 'directive-bind', {
+	state: {
+		url: '/some-url',
+		checked: true,
+		show: false,
+		width: 1,
+	},
+	foo: {
+		bar: 1,
+	},
+	actions: {
+		toggle: () => {
+			state.url = '/some-other-url';
+			state.checked = ! state.checked;
+			state.show = ! state.show;
+			state.width += foo.bar;
 		},
-		foo: {
-			bar: 1,
-		},
-		actions: {
-			toggle: () => {
-				state.url = '/some-other-url';
-				state.checked = ! state.checked;
-				state.show = ! state.show;
-				state.width += foo.bar;
-			},
-			toggleValue: () => {
-				const context = getContext();
-				const previousValue = ( 'previousValue' in context )
+		toggleValue: () => {
+			const context = getContext();
+			const previousValue =
+				'previousValue' in context
 					? context.previousValue
-					// Any string works here; we just want to toggle the value
-					// to ensure Preact renders the same we are hydrating in the
-					// first place.
-					: 'tacocat';
+					: // Any string works here; we just want to toggle the value
+					  // to ensure Preact renders the same we are hydrating in the
+					  // first place.
+					  'tacocat';
 
-				context.previousValue = context.value;
-				context.value = previousValue;
-			}
+			context.previousValue = context.value;
+			context.value = previousValue;
 		},
-	} );
-} )( window );
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-body/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-body/render.php
index efca342b1babc..16178815c2486 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-body/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-body/render.php
@@ -5,7 +5,9 @@
  * @package gutenberg-test-interactive-blocks
  */
 
+gutenberg_enqueue_module( 'directive-body-view' );
 ?>
+
 <div
 	data-wp-interactive='{ "namespace":"directive-body" }'
 	data-wp-context='{"text":"text-1"}'
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-body/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-body/view.js
index 764855643d6f6..40f3f9e3be5d1 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-body/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-body/view.js
@@ -1,12 +1,13 @@
-( ( { wp } ) => {
-	const { store, getContext } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
 
-	store( 'directive-body', {
-		actions: {
-			toggleText: () => {
-				const context = getContext();
-				context.text = context.text === 'text-1' ? 'text-2' : 'text-1';
-			},
+store( 'directive-body', {
+	actions: {
+		toggleText: () => {
+			const context = getContext();
+			context.text = context.text === 'text-1' ? 'text-2' : 'text-1';
 		},
-	} );
-} )( window );
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-class/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-class/render.php
index 92e0c7c78a082..96b3b086abdbf 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-class/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-class/render.php
@@ -5,7 +5,9 @@
  * @package gutenberg-test-interactive-blocks
  */
 
+gutenberg_enqueue_module( 'directive-class-view' );
 ?>
+
 <div data-wp-interactive='{"namespace": "directive-class"}'>
 	<button
 		data-wp-on--click="actions.toggleTrueValue"
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-class/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-class/view.js
index b3a771884f67a..f008ae910673f 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-class/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-class/view.js
@@ -1,22 +1,23 @@
-( ( { wp } ) => {
-	const { store, getContext } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
 
-	const { state } = store( "directive-class", {
-		state: {
-			trueValue: true,
-			falseValue: false,
+const { state } = store( 'directive-class', {
+	state: {
+		trueValue: true,
+		falseValue: false,
+	},
+	actions: {
+		toggleTrueValue: () => {
+			state.trueValue = ! state.trueValue;
 		},
-		actions: {
-			toggleTrueValue: () => {
-				state.trueValue = ! state.trueValue;
-			},
-			toggleFalseValue: () => {
-				state.falseValue = ! state.falseValue;
-			},
-			toggleContextFalseValue: () => {
-				const context = getContext();
-				context.falseValue = ! context.falseValue;
-			},
+		toggleFalseValue: () => {
+			state.falseValue = ! state.falseValue;
 		},
-	} );
-} )( window );
+		toggleContextFalseValue: () => {
+			const context = getContext();
+			context.falseValue = ! context.falseValue;
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-context/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-context/render.php
index 6793d0b124aed..fe9a6c4f85a16 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-context/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-context/render.php
@@ -5,7 +5,9 @@
  * @package gutenberg-test-interactive-blocks
  */
 
+gutenberg_enqueue_module( 'directive-context-view' );
 ?>
+
 <div data-wp-interactive='{"namespace": "directive-context"}'>
 	<div
 		data-wp-context='{ "prop1":"parent","prop2":"parent","obj":{"prop4":"parent","prop5":"parent"},"array":[1,2,3] }'
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-context/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-context/view.js
index db07405977e3f..8317f155d190e 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-context/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-context/view.js
@@ -1,29 +1,31 @@
-( ( { wp } ) => {
-	const { store, navigate, getContext } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store, navigate, getContext } from '@wordpress/interactivity';
 
-	store( 'directive-context', {
-		state: {
-			get renderContext() {
-				const ctx = getContext()
-				return JSON.stringify( ctx, undefined, 2 );
-			},
+store( 'directive-context', {
+	state: {
+		get renderContext() {
+			const ctx = getContext();
+			return JSON.stringify( ctx, undefined, 2 );
 		},
-		actions: {
-			updateContext( event ) {
-				const ctx = getContext();
-				const { name, value } = event.target;
-				const [ key, ...path ] = name.split( '.' ).reverse();
-				const obj = path.reduceRight( ( o, k ) => o[ k ], ctx );
-				obj[ key ] = value;
-			},
-			toggleContextText() {
-				const ctx = getContext();
-				ctx.text = ctx.text === 'Text 1' ? 'Text 2' : 'Text 1';
-			},
-		}
-	} );
+	},
+	actions: {
+		updateContext( event ) {
+			const ctx = getContext();
+			const { name, value } = event.target;
+			const [ key, ...path ] = name.split( '.' ).reverse();
+			const obj = path.reduceRight( ( o, k ) => o[ k ], ctx );
+			obj[ key ] = value;
+		},
+		toggleContextText() {
+			const ctx = getContext();
+			ctx.text = ctx.text === 'Text 1' ? 'Text 2' : 'Text 1';
+		},
+	},
+} );
 
-	const html = `
+const html = `
 		<div
 			data-wp-interactive='{ "namespace": "directive-context-navigate" }'
 			data-wp-navigation-id="navigation"
@@ -37,27 +39,26 @@
 			<button data-testid="async navigate" data-wp-on--click="actions.asyncNavigate">Async Navigate</button>
 		</div>`;
 
-	const { actions } = store( 'directive-context-navigate', {
-		actions: {
-			toggleText() {
-				const ctx = getContext();
-				ctx.text = "changed dynamically";
-			},
-			addNewText() {
-				const ctx = getContext();
-				ctx.newText = 'some new text';
-			},
-			navigate() {
-				return navigate( window.location, {
-					force: true,
-					html,
-				} );
-			},
-			* asyncNavigate() {
-				yield actions.navigate();
-				const ctx = getContext();
-				ctx.newText = 'changed from async action';
-			}
+const { actions } = store( 'directive-context-navigate', {
+	actions: {
+		toggleText() {
+			const ctx = getContext();
+			ctx.text = 'changed dynamically';
+		},
+		addNewText() {
+			const ctx = getContext();
+			ctx.newText = 'some new text';
+		},
+		navigate() {
+			return navigate( window.location, {
+				force: true,
+				html,
+			} );
+		},
+		*asyncNavigate() {
+			yield actions.navigate();
+			const ctx = getContext();
+			ctx.newText = 'changed from async action';
 		},
-	} );
-} )( window );
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-init/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-init/render.php
index 1d6774335442a..6ee0115ff05ba 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-init/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-init/render.php
@@ -5,7 +5,9 @@
  * @package gutenberg-test-interactive-blocks
  */
 
+gutenberg_enqueue_module( 'directive-init-view' );
 ?>
+
 <div data-wp-interactive='{ "namespace": "directive-init" }'>
 	<div
 		data-testid="single init"
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-init/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-init/view.js
index d9474fbff8caa..333dbd6d7f501 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-init/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-init/view.js
@@ -1,68 +1,62 @@
-( ( { wp } ) => {
-	const { store, directive, getContext } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store, directive, getContext } from '@wordpress/interactivity';
 
-	// Mock `data-wp-show` directive to test when things are removed from the
-	// DOM.  Replace with `data-wp-show` when it's ready.
-	directive(
-		'show-mock',
-		( {
-			directives: { 'show-mock': showMock },
-			element,
-			evaluate,
-		} ) => {
-			const entry = showMock.find( ( { suffix} ) => suffix === 'default');
-			if ( ! evaluate( entry ) ) {
-				return null;
-			}
-			return element;
+// Mock `data-wp-show` directive to test when things are removed from the
+// DOM.  Replace with `data-wp-show` when it's ready.
+directive(
+	'show-mock',
+	( { directives: { 'show-mock': showMock }, element, evaluate } ) => {
+		const entry = showMock.find( ( { suffix } ) => suffix === 'default' );
+		if ( ! evaluate( entry ) ) {
+			return null;
 		}
-	);
+		return element;
+	}
+);
 
-
-	store( 'directive-init', {
-		state: {
-			get isReady() {
-				const { isReady } = getContext();
-				return isReady
-					.map(v => v ? 'true': 'false')
-					.join(',');
-			},
-			get calls() {
-				const { calls } = getContext();
-				return calls.join(',');
-			},
-			get isMounted() {
-				const { isMounted } = getContext();
-				return isMounted ? 'true' : 'false';
-			},
+store( 'directive-init', {
+	state: {
+		get isReady() {
+			const { isReady } = getContext();
+			return isReady.map( ( v ) => ( v ? 'true' : 'false' ) ).join( ',' );
+		},
+		get calls() {
+			const { calls } = getContext();
+			return calls.join( ',' );
+		},
+		get isMounted() {
+			const { isMounted } = getContext();
+			return isMounted ? 'true' : 'false';
+		},
+	},
+	actions: {
+		initOne() {
+			const { isReady, calls } = getContext();
+			isReady[ 0 ] = true;
+			// Subscribe to changes in that prop.
+			calls[ 0 ]++;
+		},
+		initTwo() {
+			const { isReady, calls } = getContext();
+			isReady[ 1 ] = true;
+			calls[ 1 ]++;
+		},
+		initMount() {
+			const ctx = getContext();
+			ctx.isMounted = true;
+			return () => {
+				ctx.isMounted = false;
+			};
+		},
+		reset() {
+			const { isReady } = getContext();
+			isReady.fill( false );
 		},
-		actions: {
-			initOne() {
-				const { isReady, calls } = getContext();
-				isReady[0] = true;
-				// Subscribe to changes in that prop.
-				calls[0]++;
-			},
-			initTwo() {
-				const { isReady, calls } = getContext();
-				isReady[1] = true;
-				calls[1]++;
-			},
-			initMount() {
-				const ctx = getContext();
-				ctx.isMounted = true;
-				return () => {
-					ctx.isMounted = false;
-				}
-			},
-			reset() {
-				const { isReady } = getContext();
-				isReady.fill(false);
-			},
-			toggle() {
-				const ctx = getContext();
-				ctx.isVisible = ! ctx.isVisible;
-			},
+		toggle() {
+			const ctx = getContext();
+			ctx.isVisible = ! ctx.isVisible;
 		},
-	} );
-} )( window );
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-key/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-key/render.php
index c163a0523420f..1a5f57b526fbf 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-key/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-key/render.php
@@ -5,6 +5,7 @@
  * @package gutenberg-test-interactive-blocks
  */
 
+gutenberg_enqueue_module( 'directive-key-view' );
 ?>
 
 <div
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-key/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-key/view.js
index 28a862eaef4ff..cdbcb5b597304 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-key/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-key/view.js
@@ -1,7 +1,9 @@
-( ( { wp } ) => {
-	const { store, navigate } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store, navigate } from '@wordpress/interactivity';
 
-	const html = `
+const html = `
 		<div
 			data-wp-interactive='{ "namespace": "directive-key" }'
 			data-wp-navigation-id="some-id"
@@ -13,14 +15,13 @@
 			</ul>
 		</div>`;
 
-	store( 'directive-key', {
-		actions: {
-			navigate() {
-				navigate( window.location, {
-					force: true,
-					html,
-				} );
-			},
+store( 'directive-key', {
+	actions: {
+		navigate() {
+			navigate( window.location, {
+				force: true,
+				html,
+			} );
 		},
-	} );
-} )( window );
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-on/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-on/render.php
index 3df028b9907d1..ebf144660fd2a 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-on/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-on/render.php
@@ -5,7 +5,9 @@
  * @package gutenberg-test-interactive-blocks
  */
 
+gutenberg_enqueue_module( 'directive-on-view' );
 ?>
+
 <div data-wp-interactive='{ "namespace": "directive-on" }'>
 	<div>
 		<p data-wp-text="state.counter" data-testid="counter">0</p>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-on/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-on/view.js
index 3fc1e63784fbc..69378b53e14c0 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-on/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-on/view.js
@@ -1,29 +1,30 @@
-( ( { wp } ) => {
-	const { store, getContext } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
 
-	const { state } = store( 'directive-on', {
-		state: {
-			counter: 0,
-			text: ''
+const { state } = store( 'directive-on', {
+	state: {
+		counter: 0,
+		text: '',
+	},
+	actions: {
+		clickHandler: ( event ) => {
+			state.counter += 1;
+			event.target.dispatchEvent(
+				new CustomEvent( 'customevent', { bubbles: true } )
+			);
 		},
-		actions: {
-			clickHandler: ( event ) => {
-				state.counter += 1;
-				event.target.dispatchEvent(
-					new CustomEvent( 'customevent', { bubbles: true } )
-				);
-			},
-			inputHandler: ( event ) => {
-				state.text = event.target.value;
-			},
-			selectHandler: ( event ) => {
-				const context = getContext();
-				context.option = event.target.value;
-			},
-			customEventHandler: () => {
-				const context = getContext();
-				context.customEvents += 1;
-			},
+		inputHandler: ( event ) => {
+			state.text = event.target.value;
 		},
-	} );
-} )( window );
+		selectHandler: ( event ) => {
+			const context = getContext();
+			context.option = event.target.value;
+		},
+		customEventHandler: () => {
+			const context = getContext();
+			context.customEvents += 1;
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/render.php
index 0502189e86679..f082d44dd8fdf 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/render.php
@@ -5,7 +5,9 @@
  * @package gutenberg-test-interactive-blocks
  */
 
+gutenberg_enqueue_module( 'directive-priorities-view' );
 ?>
+
 <div data-wp-interactive='{ "namespace": "directive-priorities" }'>
 	<pre data-testid="execution order"></pre>
 
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/view.js
index e3c14741e1bb5..4d47084e34362 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/view.js
@@ -1,126 +1,117 @@
-( ( { wp } ) => {
-	/**
-	 * WordPress dependencies
-	 */
-	const {
-		store,
-		getContext,
-		directive,
-		deepSignal,
-		useEffect,
-		createElement: h
-	} = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import {
+	store,
+	getContext,
+	directive,
+	deepSignal,
+	useEffect,
+	createElement as h,
+} from '@wordpress/interactivity';
 
-	/**
-	 * Namespace used in custom directives and store.
-	 */
-	const namespace = 'directive-priorities';
+/**
+ * Namespace used in custom directives and store.
+ */
+const namespace = 'directive-priorities';
 
-	/**
-	 * Util to check that render calls happen in order.
-	 *
-	 * @param {string} n Name passed from the directive being executed.
-	 */
-	const executionProof = ( n ) => {
-		const el = document.querySelector( '[data-testid="execution order"]' );
-		if ( ! el.textContent ) el.textContent = n;
-		else el.textContent += `, ${ n }`;
-	};
+/**
+ * Util to check that render calls happen in order.
+ *
+ * @param {string} n Name passed from the directive being executed.
+ */
+const executionProof = ( n ) => {
+	const el = document.querySelector( '[data-testid="execution order"]' );
+	if ( ! el.textContent ) el.textContent = n;
+	else el.textContent += `, ${ n }`;
+};
 
-	/**
-	 * Simple context directive, just for testing purposes. It provides a deep
-	 * signal with these two properties:
-	 * - attribute: 'from context'
-	 * - text: 'from context'
-	 */
-	directive(
-		'test-context',
-		( { context: { Provider }, props: { children } } ) => {
-			executionProof( 'context' );
-			const value = deepSignal(
-				{
-					[namespace]: {
-						attribute: 'from context',
-						text: 'from context',
-					}
-				}
-			);
-			return h( Provider, { value }, children );
-		},
-		{ priority: 8 }
-	);
+/**
+ * Simple context directive, just for testing purposes. It provides a deep
+ * signal with these two properties:
+ * - attribute: 'from context'
+ * - text: 'from context'
+ */
+directive(
+	'test-context',
+	( { context: { Provider }, props: { children } } ) => {
+		executionProof( 'context' );
+		const value = deepSignal( {
+			[ namespace ]: {
+				attribute: 'from context',
+				text: 'from context',
+			},
+		} );
+		return h( Provider, { value }, children );
+	},
+	{ priority: 8 }
+);
 
-	/**
-	 * Simple attribute directive, for testing purposes. It reads the value of
-	 * `attribute` from context and populates `data-attribute` with it.
-	 */
-	directive( 'test-attribute', ( { evaluate, element } ) => {
-		executionProof( 'attribute' );
-		const attributeValue = evaluate(
-			{ namespace, value: 'context.attribute' }
-		);
-		useEffect( () => {
-			element.ref.current.setAttribute(
-				'data-attribute',
-				attributeValue,
-			);
-		}, [] );
-		element.props[ 'data-attribute' ] = attributeValue;
+/**
+ * Simple attribute directive, for testing purposes. It reads the value of
+ * `attribute` from context and populates `data-attribute` with it.
+ */
+directive( 'test-attribute', ( { evaluate, element } ) => {
+	executionProof( 'attribute' );
+	const attributeValue = evaluate( {
+		namespace,
+		value: 'context.attribute',
 	} );
+	useEffect( () => {
+		element.ref.current.setAttribute( 'data-attribute', attributeValue );
+	}, [] );
+	element.props[ 'data-attribute' ] = attributeValue;
+} );
 
-	/**
-	 * Simple text directive, for testing purposes. It reads the value of
-	 * `text` from context and populates `children` with it.
-	 */
-	directive(
-		'test-text',
-		( { evaluate, element } ) => {
-			executionProof( 'text' );
-			const textValue = evaluate(
-				{ namespace, value: 'context.text' }
-			);
-			element.props.children =
-				h( 'p', { 'data-testid': 'text' }, textValue );
-		},
-		{ priority: 12 }
-	);
+/**
+ * Simple text directive, for testing purposes. It reads the value of
+ * `text` from context and populates `children` with it.
+ */
+directive(
+	'test-text',
+	( { evaluate, element } ) => {
+		executionProof( 'text' );
+		const textValue = evaluate( { namespace, value: 'context.text' } );
+		element.props.children = h( 'p', { 'data-testid': 'text' }, textValue );
+	},
+	{ priority: 12 }
+);
 
-	/**
-	 * Children directive, for testing purposes. It adds a wrapper around
-	 * `children`, including two buttons to modify `text` and `attribute` values
-	 * from the received context.
-	 */
-	directive(
-		'test-children',
-		( { evaluate, element } ) => {
-			executionProof( 'children' );
-			const updateAttribute = () => {
-				evaluate( { namespace, value: 'actions.updateAttribute' } );
-			};
-			const updateText = () => {
-				evaluate( { namespace, value: 'actions.updateText' } );
-			};
-			element.props.children = h(
-				'div',
-				{},
-				element.props.children,
-				h( 'button', { onClick: updateAttribute }, 'Update attribute' ),
-				h( 'button', { onClick: updateText }, 'Update text' )
-			);
-		},
-		{ priority: 14 }
-	);
+/**
+ * Children directive, for testing purposes. It adds a wrapper around
+ * `children`, including two buttons to modify `text` and `attribute` values
+ * from the received context.
+ */
+directive(
+	'test-children',
+	( { evaluate, element } ) => {
+		executionProof( 'children' );
+		const updateAttribute = () => {
+			evaluate( { namespace, value: 'actions.updateAttribute' } );
+		};
+		const updateText = () => {
+			evaluate( { namespace, value: 'actions.updateText' } );
+		};
+		element.props.children = h(
+			'div',
+			{},
+			element.props.children,
+			h( 'button', { onClick: updateAttribute }, 'Update attribute' ),
+			h( 'button', { onClick: updateText }, 'Update text' )
+		);
+	},
+	{ priority: 14 }
+);
 
-	store( 'directive-priorities', {
-		actions: {
-			updateText() {
-				const context = getContext();
-				context.text = 'updated';
-			},
-			updateAttribute() {
-				const context = getContext();
-				context.attribute = 'updated';
-			},
+store( 'directive-priorities', {
+	actions: {
+		updateText() {
+			const context = getContext();
+			context.text = 'updated';
 		},
-	} );
-} )( window );
+		updateAttribute() {
+			const context = getContext();
+			context.attribute = 'updated';
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-slots/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-slots/render.php
index 8419069baa640..c9a989ccaf027 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-slots/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-slots/render.php
@@ -5,7 +5,9 @@
  * @package gutenberg-test-interactive-blocks
  */
 
+gutenberg_enqueue_module( 'directive-slots-view' );
 ?>
+
 <div
 	data-wp-interactive='{ "namespace": "directive-slots" }'
 	data-wp-slot-provider
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-slots/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-slots/view.js
index 1768cc493a199..a8673fea9eba9 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-slots/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-slots/view.js
@@ -1,19 +1,20 @@
-( ( { wp } ) => {
-	const { store, getContext } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
 
-	const { state } = store( 'directive-slots', {
-		state: {
-			slot: ''
+const { state } = store( 'directive-slots', {
+	state: {
+		slot: '',
+	},
+	actions: {
+		changeSlot( event ) {
+			state.slot = event.target.dataset.slot;
 		},
-		actions: {
-			changeSlot( event ) {
-				state.slot = event.target.dataset.slot;
-			},
-			updateSlotText() {
-				const context = getContext();
-				const n = context.text[1];
-				context.text = `[${n} updated]`;
-			},
+		updateSlotText() {
+			const context = getContext();
+			const n = context.text[ 1 ];
+			context.text = `[${ n } updated]`;
 		},
-	} );
-} )( window );
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-style/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-style/render.php
index a62f055617a32..b31f13cf1335c 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-style/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-style/render.php
@@ -5,6 +5,7 @@
  * @package gutenberg-test-interactive-blocks
  */
 
+gutenberg_enqueue_module( 'directive-style-view' );
 ?>
 
 <div data-wp-interactive='{ "namespace": "directive-style" }'>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-style/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-style/view.js
index 4a3024302dc77..ccf366844276c 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-style/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-style/view.js
@@ -1,23 +1,24 @@
-( ( { wp } ) => {
-	const { store, getContext } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
 
-	const { state } = store( 'directive-style', {
-		state: {
-			falseValue: false,
-			color: "red",
-			border: "2px solid yellow"
+const { state } = store( 'directive-style', {
+	state: {
+		falseValue: false,
+		color: 'red',
+		border: '2px solid yellow',
+	},
+	actions: {
+		toggleColor() {
+			state.color = state.color === 'red' ? 'blue' : 'red';
 		},
-		actions: {
-			toggleColor() {
-				state.color = state.color === "red" ? "blue" : "red";
-			},
-			switchColorToFalse() {
-				state.color = false;
-			},
-			toggleContext() {
-				const context = getContext();
-				context.color = context.color === "red" ? "blue" : "red";
-			},
+		switchColorToFalse() {
+			state.color = false;
 		},
-	} );
-} )( window );
+		toggleContext() {
+			const context = getContext();
+			context.color = context.color === 'red' ? 'blue' : 'red';
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-text/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-text/render.php
index 1746cbe940a7e..98803669c6b0b 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-text/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-text/render.php
@@ -5,7 +5,9 @@
  * @package gutenberg-test-interactive-blocks
  */
 
+gutenberg_enqueue_module( 'directive-text-view' );
 ?>
+
 <div data-wp-interactive='{ "namespace": "directive-context" }'>
 	<div>
 		<span
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-text/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-text/view.js
index 8e3e18f66d106..82f37f4f78f1f 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-text/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-text/view.js
@@ -1,18 +1,19 @@
-( ( { wp } ) => {
-	const { store, getContext } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
 
-	const { state } = store( 'directive-context', {
-		state: {
-			text: 'Text 1',
+const { state } = store( 'directive-context', {
+	state: {
+		text: 'Text 1',
+	},
+	actions: {
+		toggleStateText() {
+			state.text = state.text === 'Text 1' ? 'Text 2' : 'Text 1';
 		},
-		actions: {
-			toggleStateText() {
-				state.text = state.text === 'Text 1' ? 'Text 2' : 'Text 1';
-			},
-			toggleContextText() {
-				const context = getContext();
-				context.text = context.text === 'Text 1' ? 'Text 2' : 'Text 1';
-			},
+		toggleContextText() {
+			const context = getContext();
+			context.text = context.text === 'Text 1' ? 'Text 2' : 'Text 1';
 		},
-	} );
-} )( window );
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-watch/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-watch/render.php
index 9434bd777fd24..4fc7dd96ee883 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-watch/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-watch/render.php
@@ -5,7 +5,9 @@
  * @package gutenberg-test-interactive-blocks
  */
 
+gutenberg_enqueue_module( 'directive-watch-view' );
 ?>
+
 <div data-wp-interactive='{ "namespace": "directive-watch" }'>
 	<div data-wp-show-mock="state.isOpen">
 		<input
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-watch/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-watch/view.js
index cd844bef9efb1..d1acd45970dd6 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-watch/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-watch/view.js
@@ -1,61 +1,53 @@
-( ( { wp } ) => {
-	const { store, directive } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store, directive } from '@wordpress/interactivity';
 
-	// Fake `data-wp-show-mock` directive to test when things are removed from the
-	// DOM.  Replace with `data-wp-show` when it's ready.
-	directive(
-		'show-mock',
-		( {
-			directives: {
-				"show-mock": showMock,
-			},
-			element,
-			evaluate,
-		} ) => {
-			const entry = showMock.find(
-				( { suffix } ) => suffix === 'default'
-			);
-			if ( ! evaluate( entry ) ) return null;
-			return element;
-		}
-	);
+// Fake `data-wp-show-mock` directive to test when things are removed from the
+// DOM.  Replace with `data-wp-show` when it's ready.
+directive(
+	'show-mock',
+	( { directives: { 'show-mock': showMock }, element, evaluate } ) => {
+		const entry = showMock.find( ( { suffix } ) => suffix === 'default' );
+		if ( ! evaluate( entry ) ) return null;
+		return element;
+	}
+);
 
-	const { state } = store( 'directive-watch', {
-		state: {
-			isOpen: true,
-			isElementInTheDOM: false,
-			counter: 0,
-			get elementInTheDOM() {
-				return state.isElementInTheDOM
-					? 'element is in the DOM'
-					: 'element is not in the DOM';
-			}
+const { state } = store( 'directive-watch', {
+	state: {
+		isOpen: true,
+		isElementInTheDOM: false,
+		counter: 0,
+		get elementInTheDOM() {
+			return state.isElementInTheDOM
+				? 'element is in the DOM'
+				: 'element is not in the DOM';
+		},
+	},
+	actions: {
+		toggle() {
+			state.isOpen = ! state.isOpen;
 		},
-		actions: {
-			toggle() {
-				state.isOpen = ! state.isOpen;
-			},
-			increment() {
-				state.counter = state.counter + 1;
-			},
+		increment() {
+			state.counter = state.counter + 1;
 		},
-		callbacks: {
-			elementAddedToTheDOM: () => {
-				state.isElementInTheDOM = true;
+	},
+	callbacks: {
+		elementAddedToTheDOM: () => {
+			state.isElementInTheDOM = true;
 
-				return () => {
-					state.isElementInTheDOM = false;
-				};
-			},
-			changeFocus: () => {
-				if ( state.isOpen ) {
-					document.querySelector( "[data-testid='input']" ).focus();
-				}
-			},
-			infiniteLoop: () => {
-				state.counter = state.counter + 1;
+			return () => {
+				state.isElementInTheDOM = false;
+			};
+		},
+		changeFocus: () => {
+			if ( state.isOpen ) {
+				document.querySelector( "[data-testid='input']" ).focus();
 			}
 		},
-	} );
-
-} )( window );
+		infiniteLoop: () => {
+			state.counter = state.counter + 1;
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/negation-operator/render.php b/packages/e2e-tests/plugins/interactive-blocks/negation-operator/render.php
index 29b7dcbd32dfd..8d686e6c3ff46 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/negation-operator/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/negation-operator/render.php
@@ -5,7 +5,9 @@
  * @package gutenberg-test-interactive-blocks
  */
 
+gutenberg_enqueue_module( 'negation-operator-view' );
 ?>
+
 <div data-wp-interactive='{ "namespace": "negation-operator" }'>
 	<button
 		data-wp-on--click="actions.toggle"
diff --git a/packages/e2e-tests/plugins/interactive-blocks/negation-operator/view.js b/packages/e2e-tests/plugins/interactive-blocks/negation-operator/view.js
index 58f6180cade69..7d5e163e7fc7c 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/negation-operator/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/negation-operator/view.js
@@ -1,20 +1,18 @@
-( ( { wp } ) => {
-	/**
-	 * WordPress dependencies
-	 */
-	const { store } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store } from '@wordpress/interactivity';
 
-	const { state } = store( 'negation-operator', {
-		state: {
-			active: false,
-			get isActive() {
-				return state.active;
-			},
+const { state } = store( 'negation-operator', {
+	state: {
+		active: false,
+		get isActive() {
+			return state.active;
 		},
-		actions: {
-			toggle() {
-				state.active = ! state.active;
-			},
+	},
+	actions: {
+		toggle() {
+			state.active = ! state.active;
 		},
-	} );
-} )( window );
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-navigate/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-navigate/render.php
index 621d240064f0a..6dceffa32da8f 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-navigate/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-navigate/render.php
@@ -6,9 +6,9 @@
  * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
  */
 
+gutenberg_enqueue_module( 'router-navigate-view' );
 ?>
 
-
 <div
 	data-wp-interactive='{ "namespace": "router" }'
 	data-wp-navigation-id="region-1"
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-navigate/view.js b/packages/e2e-tests/plugins/interactive-blocks/router-navigate/view.js
index 9b17bbcff9f2e..59d0e4b56f70c 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-navigate/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-navigate/view.js
@@ -1,37 +1,34 @@
-( ( { wp } ) => {
-	/**
-	 * WordPress dependencies
-	 */
-	const { store, navigate } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store, navigate } from '@wordpress/interactivity';
 
-	const { state } = store( 'router', {
-		state: {
-			status: 'idle',
-			navigations: 0,
-			timeout: 10000,
-		},
-		actions: {
-			* navigate( e ) {
-				e.preventDefault();
+const { state } = store( 'router', {
+	state: {
+		status: 'idle',
+		navigations: 0,
+		timeout: 10000,
+	},
+	actions: {
+		*navigate( e ) {
+			e.preventDefault();
 
-				state.navigations += 1;
-				state.status = 'busy';
+			state.navigations += 1;
+			state.status = 'busy';
 
-				const force = e.target.dataset.forceNavigation === 'true';
-				const { timeout } = state;
+			const force = e.target.dataset.forceNavigation === 'true';
+			const { timeout } = state;
 
-				yield navigate( e.target.href, { force, timeout } );
+			yield navigate( e.target.href, { force, timeout } );
 
-				state.navigations -= 1;
+			state.navigations -= 1;
 
-				if ( state.navigations === 0) {
-					state.status = 'idle';
-				}
-			},
-			toggleTimeout() {
-				state.timeout =
-					state.timeout === 10000 ? 0 : 10000;
+			if ( state.navigations === 0 ) {
+				state.status = 'idle';
 			}
 		},
-	} );
-} )( window );
+		toggleTimeout() {
+			state.timeout = state.timeout === 10000 ? 0 : 10000;
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-regions/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-regions/render.php
index dc38107a12a4c..0bcc14ccb266f 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-regions/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-regions/render.php
@@ -6,6 +6,7 @@
  * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
  */
 
+gutenberg_enqueue_module( 'router-regions-view' );
 ?>
 
 <section>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-regions/view.js b/packages/e2e-tests/plugins/interactive-blocks/router-regions/view.js
index 213c61a5a9174..302086c8168f2 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-regions/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-regions/view.js
@@ -1,47 +1,45 @@
-( ( { wp } ) => {
-	/**
-	 * WordPress dependencies
-	 */
-	const { store, navigate, getContext } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store, navigate, getContext } from '@wordpress/interactivity';
 
-	const { state } = store( 'router-regions', {
-		state: {
-			region1: {
-				text: 'hydrated'
-			},
-			region2: {
-				text: 'hydrated'
+const { state } = store( 'router-regions', {
+	state: {
+		region1: {
+			text: 'hydrated',
+		},
+		region2: {
+			text: 'hydrated',
+		},
+		counter: {
+			value: 0,
+		},
+	},
+	actions: {
+		router: {
+			*navigate( e ) {
+				e.preventDefault();
+				yield navigate( e.target.href );
 			},
-			counter: {
-				value: 0,
+			back() {
+				history.back();
 			},
 		},
-		actions: {
-			router: {
-				* navigate( e ) {
-					e.preventDefault();
-					yield navigate( e.target.href );
-				},
-				back() {
-					history.back();
-				},
+		counter: {
+			increment() {
+				const context = getContext();
+				if ( context?.counter ) {
+					context.counter.value += 1;
+				} else {
+					state.counter.value += 1;
+				}
 			},
-			counter: {
-				increment() {
-					const context = getContext();
-					if ( context?.counter ) {
-						context.counter.value += 1;
-					} else {
-						state.counter.value += 1;
-					}
-				},
-				init() {
-					const context = getContext();
-					if ( context.counter ) {
-						context.counter.value = context.counter.initialValue;
-					}
+			init() {
+				const context = getContext();
+				if ( context.counter ) {
+					context.counter.value = context.counter.initialValue;
 				}
 			},
 		},
-	} );
-} )( window );
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/store-tag/render.php b/packages/e2e-tests/plugins/interactive-blocks/store-tag/render.php
index 7bab5b3f5d58b..57200f295c33b 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/store-tag/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/store-tag/render.php
@@ -6,10 +6,13 @@
  * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
  */
 
+gutenberg_enqueue_module( 'store-tag-view' );
+
 // These variables simulates SSR.
 $test_store_tag_counter = 'ok' === $attributes['condition'] ? 3 : 0;
 $test_store_tag_double  = $test_store_tag_counter * 2;
 ?>
+
 <div data-wp-interactive='{ "namespace": "store-tag" }'>
 	<div>
 		Counter:
diff --git a/packages/e2e-tests/plugins/interactive-blocks/store-tag/view.js b/packages/e2e-tests/plugins/interactive-blocks/store-tag/view.js
index 99bbf93cf18e0..0faa9625cedd7 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/store-tag/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/store-tag/view.js
@@ -1,26 +1,24 @@
-( ( { wp } ) => {
-	/**
-	 * WordPress dependencies
-	 */
-	const { store } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store } from '@wordpress/interactivity';
 
-	const { state } = store( 'store-tag', {
-		state: {
-			counter: {
-				// `value` is defined in the server.
-				get double() {
-					return state.counter.value * 2
-				},
-				clicks: 0,
+const { state } = store( 'store-tag', {
+	state: {
+		counter: {
+			// `value` is defined in the server.
+			get double() {
+				return state.counter.value * 2;
 			},
+			clicks: 0,
 		},
-		actions: {
-			counter: {
-				increment() {
-					state.counter.value += 1;
-					state.counter.clicks += 1;
-				},
+	},
+	actions: {
+		counter: {
+			increment() {
+				state.counter.value += 1;
+				state.counter.clicks += 1;
 			},
 		},
-	} );
-} )( window );
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/render.php b/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/render.php
index 581ac2c2b2664..7b1bc6513977b 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/render.php
@@ -5,7 +5,9 @@
  * @package gutenberg-test-interactive-blocks
  */
 
+gutenberg_enqueue_module( 'tovdom-islands-view' );
 ?>
+
 <div>
 	<div data-wp-show-mock="state.falseValue">
 		<span data-testid="not inside an island">
diff --git a/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/view.js b/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/view.js
index 188b5577258b2..ba6106801fbc7 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/view.js
@@ -1,29 +1,27 @@
-( ( { wp } ) => {
-	const { store, directive, createElement: h } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store, directive, createElement as h } from '@wordpress/interactivity';
 
-	// Fake `data-wp-show-mock` directive to test when things are removed from the
-	// DOM.  Replace with `data-wp-show` when it's ready.
+// Fake `data-wp-show-mock` directive to test when things are removed from the
+// DOM.  Replace with `data-wp-show` when it's ready.
 directive(
-		'show-mock',
-		( {
-			directives: { 'show-mock': showMock },
-			element,
-			evaluate,
-		} ) => {
-			const entry = showMock.find(
-				( { suffix} ) => suffix === 'default'
-			);
+	'show-mock',
+	( { directives: { 'show-mock': showMock }, element, evaluate } ) => {
+		const entry = showMock.find( ( { suffix } ) => suffix === 'default' );
 
-			if ( ! evaluate( entry ) ) {
-				element.props.children =
-					h( "template", null, element.props.children );
-			}
+		if ( ! evaluate( entry ) ) {
+			element.props.children = h(
+				'template',
+				null,
+				element.props.children
+			);
 		}
-	);
+	}
+);
 
-	store( 'tovdom-islands', {
-		state: {
-			falseValue: false,
-		},
-	} );
-} )( window );
+store( 'tovdom-islands', {
+	state: {
+		falseValue: false,
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/tovdom/render.php b/packages/e2e-tests/plugins/interactive-blocks/tovdom/render.php
index 06c5f404220b9..309b42a582935 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/tovdom/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/tovdom/render.php
@@ -8,6 +8,8 @@
 $plugin_url   = plugin_dir_url( __DIR__ );
 $src_proc_ins = $plugin_url . 'tovdom/processing-instructions.js';
 $src_cdata    = $plugin_url . 'tovdom/cdata.js';
+
+gutenberg_enqueue_module( 'tovdom-view' );
 ?>
 
 <div data-wp-interactive='{ "namespace": "tovdom" }'>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/tovdom/view.js b/packages/e2e-tests/plugins/interactive-blocks/tovdom/view.js
index 3051680d22414..75987cf19c5c7 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/tovdom/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/tovdom/view.js
@@ -1,5 +1,6 @@
-( ( { wp } ) => {
-	const { store } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store } from '@wordpress/interactivity';
 
-	store( 'tovdom', {} );
-} )( window );
+store( 'tovdom', {} );
diff --git a/phpunit/experimental/modules/class-gutenberg-modules-test.php b/phpunit/experimental/modules/class-gutenberg-modules-test.php
new file mode 100644
index 0000000000000..87ff6e6647d7b
--- /dev/null
+++ b/phpunit/experimental/modules/class-gutenberg-modules-test.php
@@ -0,0 +1,66 @@
+<?php
+/**
+ * Tests Gutenberg_Modules_Test
+ *
+ * @package WordPress
+ */
+
+/**
+ * Tests for the Gutenberg_Modules_Test class.
+ */
+class Gutenberg_Modules_Test extends WP_UnitTestCase {
+
+	protected $old_wp_scripts;
+	protected $old_modules_markup;
+
+	public function set_up() {
+		parent::set_up();
+
+		$this->old_wp_scripts = isset( $GLOBALS['wp_scripts'] ) ? $GLOBALS['wp_scripts'] : null;
+		remove_action( 'wp_default_scripts', 'wp_default_scripts' );
+		remove_action( 'wp_default_scripts', 'wp_default_packages' );
+		$GLOBALS['wp_scripts']    = new WP_Scripts();
+		$this->old_modules_markup = get_echo( array( 'Gutenberg_Modules', 'print_enqueued_modules' ) );
+	}
+
+	public function tear_down() {
+		$GLOBALS['wp_scripts'] = $this->old_wp_scripts;
+		add_action( 'wp_default_scripts', 'wp_default_scripts' );
+		parent::tear_down();
+	}
+
+	public function test_wp_enqueue_module() {
+		global $wp_version;
+		gutenberg_register_module( 'no-deps-no-version', 'interactivity-api-1.js' );
+		gutenberg_enqueue_module( 'no-deps-no-version' );
+		gutenberg_register_module( 'deps-no-version', 'interactivity-api-2.js', array( 'no-deps-no-version' ) );
+		gutenberg_enqueue_module( 'deps-no-version' );
+
+		$modules_markup    = get_echo( array( 'Gutenberg_Modules', 'print_enqueued_modules' ) );
+		$import_map_markup = get_echo( array( 'Gutenberg_Modules', 'print_import_map' ) );
+		$preload_markup    = get_echo( array( 'Gutenberg_Modules', 'print_module_preloads' ) );
+
+		$previous_tags      = new WP_HTML_Tag_Processor( $this->old_modules_markup );
+		$previous_src_stack = array();
+		while ( $previous_tags->next_tag( array( 'type' => 'module' ) ) ) {
+			$previous_src_stack[] = $previous_tags->get_attribute( 'src' );
+		}
+		// Test that there are 2 new <script type="module"> added to the markup.
+		$tags      = new WP_HTML_Tag_Processor( $modules_markup );
+		$src_stack = array();
+		while ( $tags->next_tag( array( 'type' => 'module' ) ) ) {
+			$src_stack[] = $tags->get_attribute( 'src' );
+		}
+		$new_src_stack = array_values( array_diff( $src_stack, $previous_src_stack ) );
+		$this->assertEquals( 2, count( $new_src_stack ) );
+		$this->assertEquals( 'interactivity-api-1.js?ver=' . $wp_version, $new_src_stack[0] );
+		$this->assertEquals( 'interactivity-api-2.js?ver=' . $wp_version, $new_src_stack[1] );
+		// Test that there is 1 <script type="importmap"> added to the markup.
+		$tags = new WP_HTML_Tag_Processor( $import_map_markup );
+		$this->assertEquals( true, $tags->next_tag( array( 'rel' => 'importmap' ) ) );
+
+		// Test that there is 1 <link type="modulepreload"> added to the markup.
+		$tags = new WP_HTML_Tag_Processor( $preload_markup );
+		$this->assertEquals( true, $tags->next_tag( array( 'rel' => 'modulepreload' ) ) );
+	}
+}
diff --git a/tools/webpack/interactivity.js b/tools/webpack/interactivity.js
index e70bf47606228..bf14e74dbc6b6 100644
--- a/tools/webpack/interactivity.js
+++ b/tools/webpack/interactivity.js
@@ -2,28 +2,39 @@
  * External dependencies
  */
 const { join } = require( 'path' );
+const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
 
 /**
  * Internal dependencies
  */
-const { baseConfig } = require( './shared' );
+const { baseConfig, plugins } = require( './shared' );
 
 module.exports = {
 	...baseConfig,
 	name: 'interactivity',
 	entry: {
-		index: {
-			import: `./packages/interactivity/src/index.js`,
-			library: {
-				name: [ 'wp', 'interactivity' ],
-				type: 'window',
-			},
-		},
+		index: `./packages/interactivity/src/index.js`,
+		navigation: './packages/block-library/src/navigation/view.js',
+		query: './packages/block-library/src/query/view.js',
+		image: './packages/block-library/src/image/view.js',
+		file: './packages/block-library/src/file/view.js',
+		search: './packages/block-library/src/search/view.js',
+	},
+	experiments: {
+		outputModule: true,
 	},
 	output: {
 		devtoolNamespace: 'wp',
 		filename: './build/interactivity/[name].min.js',
+		library: {
+			type: 'module',
+		},
 		path: join( __dirname, '..', '..' ),
+		environment: { module: true },
+	},
+	externalsType: 'module',
+	externals: {
+		'@wordpress/interactivity': '@wordpress/interactivity',
 	},
 	resolve: {
 		extensions: [ '.js', '.ts', '.tsx' ],
@@ -57,6 +68,18 @@ module.exports = {
 			},
 		],
 	},
+	plugins: [
+		...plugins,
+		// TODO: Move it to a different Webpack file.
+		new CopyWebpackPlugin( {
+			patterns: [
+				{
+					from: './node_modules/es-module-shims/dist/es-module-shims.wasm.js',
+					to: './build/importmap-polyfill.min.js',
+				},
+			],
+		} ),
+	],
 	watchOptions: {
 		ignored: [ '**/node_modules' ],
 		aggregateTimeout: 500,