Experiment: A simple Modules API with no server dependency graph

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:** anchor, color (~~background~~, ~~text~~), filter (duotone)
+-	**Supports:** anchor, color (~~background~~, ~~text~~), filter (duotone), interactivity
 -	**Attributes:** align, alt, aspectRatio, caption, height, href, id, lightbox, linkClass, linkDestination, linkTarget, rel, scale, sizeSlug, title, url, width
 
 ## Latest Comments

lib/experimental/interactivity-api/modules.php

@@ -0,0 +1,35 @@
+<?php
+/**
+ * Interactive modules.
+ *
+ * @package Gutenberg
+ * @subpackage Interactivity API
+ */
+
+/**
+ * Register the `@wordpress/interactivity` module.
+ */
+function gutenberg_register_interactivity_module() {
+	gutenberg_register_module(
+		'@wordpress/interactivity',
+		'/wp-content/plugins/gutenberg/build/interactivity/index.min.js',
+		'frontend',
+		array(
+			'version' => defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' ),
+		)
+	);
+
+	// TODO: Move this to a local file and replace with a simpler version that
+	// only provides support for import maps.
+	wp_enqueue_script(
+		'es-module-shims',
+		'https://ga.jspm.io/npm:es-module-shims@1.8.2/dist/es-module-shims.js',
+		array(),
+		null,
+		array(
+			'strategy' => 'defer',
+		)
+	);
+}
+
+add_action( 'wp_enqueue_scripts', 'gutenberg_register_interactivity_module' );

lib/experimental/modules/class-gutenberg-modules.php

@@ -0,0 +1,179 @@
+<?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 string|array $usage             Specifies where the module would be used. Can be 'admin', 'frontend', or an array of such strings.
+	 * @param array        $args     {
+	 *      Optional array of arguments.
+	 *
+	 *      @type string|bool $ver Optional. String specifying script version number, if it has one, it is added to the URL
+	 *                             as a query string for cache busting purposes. If version is set to false, a version
+	 *                             number is automatically added equal to current installed WordPress version. If SCRIPT_DEBUG
+	 *                             is set to true, it uses the timestamp instead.
+	 * }
+	 */
+	public static function register( $module_identifier, $src, $usage, $args = array() ) {
+		// Normalize $usage to an array.
+		if ( ! is_array( $usage ) ) {
+			$usage = array( $usage );
+		}
+
+		// Register the module if it's not already registered.
+		if ( ! isset( self::$registered[ $module_identifier ] ) ) {
+			self::$registered[ $module_identifier ] = array(
+				'src'     => $src,
+				'usage'   => $usage,
+				'version' => isset( $args['version'] ) ? $args['version'] : '',
+			);
+		}
+	}
+
+	/**
+	 * 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 string The import map.
+	 */
+	public static function get_import_map() {
+		$import_map = array(
+			'imports' => array(),
+		);
+
+		foreach ( self::$registered as $module_identifier => $module ) {
+			if ( self::get_appropriate_usage( $module['usage'] ) ) {
+				$import_map['imports'][ $module_identifier ] = $module['src'] . self::get_module_version( $module );
+			}
+		}
+
+		return $import_map;
+	}
+
+	/**
+	 * Prints the import map.
+	 */
+	public static function print_import_map() {
+		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 tags with type "module".
+	 */
+	public static function print_enqueued_modules() {
+		foreach ( self::$enqueued as $module_identifier ) {
+			if ( isset( self::$registered[ $module_identifier ] ) && self::get_appropriate_usage( self::$registered[ $module_identifier ]['usage'] ) ) {
+					$module  = self::$registered[ $module_identifier ];
+					$version = self::get_module_version( $module );
+					echo '<script type="module" src="' . $module['src'] . $version . '" id="' . $module_identifier . '"></script>';
+			}
+		}
+	}
+
+	/**
+	 * Determines if the usage is appropriate for the current context.
+	 *
+	 * @param array $usage Specifies the usage of the module. Can contain 'admin' or 'frontend'.
+	 * @return bool Returns true if it's appropriate to load the module in the current WP context.
+	 */
+	private static function get_appropriate_usage( $usage ) {
+		if ( in_array( 'admin', $usage, true ) && is_admin() ) {
+			return true;
+		}
+		if ( in_array( 'frontend', $usage, true ) && ! is_admin() ) {
+			return true;
+		}
+		return false;
+	}
+
+	/**
+	 * 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 $module The data of the module.
+	 * @return string A string presenting the version.
+	 */
+	private static function get_module_version( $module ) {
+		if ( SCRIPT_DEBUG ) {
+			return '?ver=' . time();
+		} elseif ( $module['version'] ) {
+			return '?ver=' . $module['version'];
+		}
+		return '';
+	}
+}
+
+/**
+ * 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 string $usage             Specifies where the module would be used. Can be 'admin', 'frontend', or 'both'.
+ * @param array  $args     {
+ *      Optional array of arguments.
+ *
+ *      @type string|bool $ver Optional. String specifying script version number, if it has one, it is added to the URL
+ *                             as a query string for cache busting purposes. If version is set to false, a version
+ *                             number is automatically added equal to current installed WordPress version. If SCRIPT_DEBUG
+ *                             is set to true, it uses the timestamp instead.
+ * }
+ */
+function gutenberg_register_module( $module_identifier, $src, $usage, $args = array() ) {
+	Gutenberg_Modules::register( $module_identifier, $src, $usage, $args );
+}
+
+/**
+ * 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' ) );

lib/load.php

@@ -138,7 +138,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';
@@ -148,6 +148,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.
 

packages/block-library/src/file/block.json

@@ -72,7 +72,6 @@
 		},
 		"interactivity": true
 	},
-	"viewScript": "file:./view.min.js",
 	"editorStyle": "wp-block-file-editor",
 	"style": "wp-block-file"
 }

packages/block-library/src/file/index.php

@@ -16,19 +16,8 @@
  */
 function render_block_core_file( $attributes, $content, $block ) {
 	$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;
-
-		// 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 ) );
-		}
+	if ( $should_load_view_script ) {
+		gutenberg_enqueue_module( '@wordpress/block-library/file-block' );
 	}
 
 	// Update object's aria-label attribute if present in block HTML.
@@ -96,5 +85,14 @@ function register_block_core_file() {
 			'render_callback' => 'render_block_core_file',
 		)
 	);
+
+	gutenberg_register_module(
+		'@wordpress/block-library/file-block',
+		'/wp-content/plugins/gutenberg/build/interactivity/file.min.js',
+		'frontend',
+		array(
+			'version' => defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' ),
+		)
+	);
 }
 add_action( 'init', 'register_block_core_file' );

packages/block-library/src/image/block.json

@@ -95,6 +95,7 @@
 		}
 	},
 	"supports": {
+		"interactivity": true,
 		"anchor": true,
 		"color": {
 			"text": false,
@@ -130,6 +131,5 @@
 		{ "name": "rounded", "label": "Rounded" }
 	],
 	"editorStyle": "wp-block-image-editor",
-	"style": "wp-block-image",
-	"viewScript": "file:./view.min.js"
+	"style": "wp-block-image"
 }

packages/block-library/src/image/index.php

@@ -37,9 +37,6 @@ 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 );
 
-	$view_js_file_handle = 'wp-block-image-view';
-	$script_handles      = $block->block_type->view_script_handles;
-
 	/*
 	 * If the lightbox is enabled and the image is not linked, add the filter
 	 * and the JavaScript view file.
@@ -50,11 +47,7 @@ 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 ) ) {
-			$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file_handle ) );
-		}
+		gutenberg_enqueue_module( '@wordpress/block-library/image' );
 
 		/*
 		 * This render needs to happen in a filter with priority 15 to ensure
@@ -71,10 +64,6 @@ 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 ) );
-		}
 	}
 
 	return $processor->get_updated_html();
@@ -362,5 +351,14 @@ function register_block_core_image() {
 			'render_callback' => 'render_block_core_image',
 		)
 	);
+
+	gutenberg_register_module(
+		'@wordpress/block-library/image',
+		'/wp-content/plugins/gutenberg/build/interactivity/image.min.js',
+		'frontend',
+		array(
+			'version' => defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' ),
+		)
+	);
 }
 add_action( 'init', 'register_block_core_image' );