diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 4f42550ba4cfbc..dd7ef824aa6b0c 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 52ec4f508246ac..9c2314ebe6890c 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 00000000000000..7db774de04fd79
--- /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 ed1fca85500701..00000000000000
--- 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 00000000000000..ca74d863043ee6
--- /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 e2d804befe7d79..5da1a1126da26b 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 ba125cefbbcb3f..b4814765fdd886 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": {
@@ -26354,6 +26355,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",
@@ -55286,6 +55292,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",
@@ -70401,6 +70408,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",
@@ -77344,6 +77352,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 d46d146cb9bafb..74ca63258e49cf 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 8bcce69ef8968d..5910a63e6cf182 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 b46829e5059a25..cfe91a71ff4f97 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 5667c71c45affc..48e6e0585b96ec 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 6550d896656b1b..eb06e731ccb8f9 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 6daf2411233bdb..75b5218364d7b1 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 ec7e763ecb1f60..f5391eefc8caca 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 f3cabf4d6a2c92..70fc4f26f654ec 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 c551127548e801..1236ecd7d277f5 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 f313262b7c0587..efa62c3a18b7e6 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 4affe5a42735f6..0d93e93ba14504 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 efca342b1babcc..16178815c24869 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 764855643d6f6a..40f3f9e3be5d11 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 92e0c7c78a082f..96b3b086abdbf9 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 b3a771884f67a0..f008ae910673fd 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 6793d0b124aed5..fe9a6c4f85a161 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 db07405977e3fb..8317f155d190e9 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 1d6774335442af..6ee0115ff05bac 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 d9474fbff8caa3..333dbd6d7f5013 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 c163a0523420fd..1a5f57b526fbf2 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 28a862eaef4ffa..cdbcb5b5973046 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 3df028b9907d19..ebf144660fd2af 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 3fc1e63784fbc0..69378b53e14c0a 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 0502189e866792..f082d44dd8fdfa 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 e3c14741e1bb55..4d47084e343625 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 8419069baa6401..c9a989ccaf0275 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 1768cc493a199a..a8673fea9eba92 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 a62f055617a32b..b31f13cf1335c0 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 4a3024302dc779..ccf366844276ca 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 1746cbe940a7eb..98803669c6b0bc 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 8e3e18f66d106a..82f37f4f78f1fe 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 9434bd777fd24a..4fc7dd96ee883d 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 cd844bef9efb10..d1acd45970dd6a 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 29b7dcbd32dfd9..8d686e6c3ff464 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 58f6180cade69f..7d5e163e7fc7c2 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 621d240064f0ab..6dceffa32da8f8 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 9b17bbcff9f2ed..59d0e4b56f70c7 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 dc38107a12a4c1..0bcc14ccb266f7 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 213c61a5a9174d..302086c8168f22 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 7bab5b3f5d58b5..57200f295c33b4 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 99bbf93cf18e0f..0faa9625cedd78 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 581ac2c2b2664e..7b1bc6513977b8 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 188b5577258b2f..ba6106801fbc7d 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 06c5f404220b91..309b42a5829359 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 3051680d224143..75987cf19c5c74 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 00000000000000..87ff6e6647d7bf
--- /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 e70bf476062284..bf14e74dbc6b67 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,