Lazy Editor: Fix script modules loading (WordPress#73237)

Author: youknowriad

lib/experimental/class-wp-rest-block-editor-settings-controller.php

@@ -544,12 +544,31 @@ private function process_assets( $html_templates = array() ) {
 				}
 			}
 
+			// Build an import map from registered script modules.
+			// the import map need to be dynamically extended in the frontend.
+			$script_modules = wp_script_modules();
+			$registered     = array();
+			$reflection     = new ReflectionClass( $script_modules );
+			$property       = $reflection->getProperty( 'registered' );
+			$property->setAccessible( true );
+			$registered = $property->getValue( $script_modules );
+			$import_map = array();
+			foreach ( $registered as $id => $module ) {
+				// Handle both array and object formats.
+				if ( is_array( $module ) && isset( $module['src'] ) ) {
+					$import_map[ $id ] = $module['src'];
+				} elseif ( is_object( $module ) && isset( $module->src ) ) {
+					$import_map[ $id ] = $module->src;
+				}
+			}
+
 			return array(
 				'scripts'        => $scripts_data,
 				'styles'         => $styles_data,
 				'inline_scripts' => $inline_scripts,
 				'inline_styles'  => $inline_styles,
 				'html_templates' => $html_templates,
+				'script_modules' => $import_map,
 			);
 		}
 
@@ -627,6 +646,11 @@ public function get_assets_schema() {
 						'type'        => 'object',
 						'readonly'    => true,
 					),
+					'script_modules' => array(
+						'description' => __( 'Script modules to load into the import map.', 'gutenberg' ),
+						'type'        => 'object',
+						'readonly'    => true,
+					),
 				),
 			);
 

packages/asset-loader/src/index.ts

@@ -4,17 +4,68 @@ type Style = {
 	version?: string;
 	media?: string;
 };
-
 type InlineStyle = string | string[];
-
 type Script = {
 	src: string;
 	deps?: string[];
 	version?: string;
 	in_footer?: boolean;
 };
-
 type InlineScript = string | string[];
+type ScriptModules = Record< string, string >;
+
+/**
+ * Injects or extends the import map with new module entries.
+ *
+ * @param scriptModules - Object mapping module specifiers to URLs
+ */
+function injectImportMap( scriptModules: Record< string, string > ): void {
+	if ( ! scriptModules || Object.keys( scriptModules ).length === 0 ) {
+		return;
+	}
+
+	// Find the existing import map script element
+	const existingMapElement = document.querySelector< HTMLScriptElement >(
+		'script#wp-importmap[type=importmap]'
+	);
+
+	if ( existingMapElement ) {
+		try {
+			// Parse the existing import map
+			const existingMap = JSON.parse( existingMapElement.text );
+
+			// Ensure the imports object exists
+			if ( ! existingMap.imports ) {
+				existingMap.imports = {};
+			}
+
+			// Merge new imports with existing ones (new entries take precedence)
+			existingMap.imports = {
+				...existingMap.imports,
+				...scriptModules,
+			};
+
+			// Update the script element's content
+			existingMapElement.text = JSON.stringify( existingMap, null, 2 );
+		} catch ( error ) {
+			// eslint-disable-next-line no-console
+			console.error( 'Failed to parse or update import map:', error );
+		}
+	} else {
+		// If no import map exists, create a new one
+		const script = document.createElement( 'script' );
+		script.type = 'importmap';
+		script.id = 'wp-importmap';
+		script.text = JSON.stringify(
+			{
+				imports: scriptModules,
+			},
+			null,
+			2
+		);
+		document.head.appendChild( script );
+	}
+}
 
 function loadStylesheet( handle: string, styleData: Style ): Promise< void > {
 	return new Promise( ( resolve ) => {
@@ -197,8 +248,14 @@ async function loadAssets(
 	inlineScripts: Record< 'before' | 'after', Record< string, InlineScript > >,
 	stylesData: Record< string, Style >,
 	inlineStyles: Record< 'before' | 'after', Record< string, InlineStyle > >,
-	htmlTemplates?: string[]
+	htmlTemplates?: string[],
+	scriptModules?: ScriptModules
 ): Promise< void > {
+	// Inject import map first so script modules can be resolved
+	if ( scriptModules ) {
+		injectImportMap( scriptModules );
+	}
+
 	// Build dependency-ordered lists
 	const orderedStyles = buildDependencyOrderedList( stylesData );
 	const orderedScripts = buildDependencyOrderedList( scriptsData );

packages/lazy-editor/src/hooks/use-editor-assets.tsx

@@ -23,7 +23,8 @@ export async function loadEditorAssets() {
 			editorAssets.inline_scripts || { before: {}, after: {} },
 			editorAssets.styles || {},
 			editorAssets.inline_styles || { before: {}, after: {} },
-			editorAssets.html_templates || []
+			editorAssets.html_templates || [],
+			editorAssets.script_modules || {}
 		);
 	};