Modules: Load the import map polyfill when needed

WordPress · Jan 4, 2024 · 1843b3f · 1843b3f
1 parent 1ba116b
commit 1843b3f
Showing 1 changed file with 16 additions and 10 deletions.
diff --git a/lib/experimental/modules/class-gutenberg-modules.php b/lib/experimental/modules/class-gutenberg-modules.php
@@ -152,15 +152,21 @@ public static function print_module_preloads() {
 	 * import maps (https://github.com/guybedford/es-module-shims/issues/406).
 	 */
 	public static function print_import_map_polyfill() {
-		$import_map = self::get_import_map();
-		if ( ! empty( $import_map['imports'] ) ) {
-			wp_print_script_tag(
-				array(
-					'src'   => gutenberg_url( '/build/modules/importmap-polyfill.min.js' ),
-					'defer' => true,
-				)
-			);
-		}
+		$test = 'HTMLScriptElement.supports?.("importmap")';
+		$src  = gutenberg_url( '/build/modules/importmap-polyfill.min.js' );
+
+		echo (
+			// Test presence of feature...
+			'<script>( ' . $test . ' ) || ' .
+			/*
+			 * ...appending polyfill on any failures. Cautious viewers may balk
+			 * at the `document.write`. Its caveat of synchronous mid-stream
+			 * blocking write is exactly the behavior we need though.
+			 */
+			'document.write( \'<script src="' .
+			$src .
+			'"></scr\' + \'ipt>\' );</script>'
+		);
 	}
 
 	/**
@@ -273,4 +279,4 @@ function gutenberg_dequeue_module( $module_identifier ) {
 add_action( $modules_position, array( 'Gutenberg_Modules', 'print_module_preloads' ) );
 
 // Prints the script that loads the import map polyfill in the footer.
-add_action( 'wp_footer', array( 'Gutenberg_Modules', 'print_import_map_polyfill' ), 11 );
+add_action( 'wp_head', array( 'Gutenberg_Modules', 'print_import_map_polyfill' ), 11 );