Trac ticket: https://core.trac.wordpress.org/ticket/60240

What

Moves the script module prints to the footer in classic themes. It also removes the ability to call the print functions more than once because it's now unnecessary.

Why

In the ticket that introduced the Script Modules API (#56313), I added a logic that prints as many enqueued and preloads as possible in the head, then prints the remaining ones in the footer and includes the import map. I explain my reasoning ​in this comment.

But @cbravobernal realized that import maps fail if they appear after the modules. That means that there's no other way but printing the import map first, and then all the modules and preloads (yes, preloads also fail!). So we need to check if we are on a classic or block theme, and if we are in a classic theme, move everything to the footer.

How

By leveraging wp_is_block_theme() and moving everything to the footer in classic themes:

public function add_hooks() {
  $position = wp_is_block_theme() ? 'wp_head' : 'wp_footer';
  add_action( $position, array( $this, 'print_import_map' ) );
  add_action( $position, array( $this, 'print_enqueued_modules' ) );
  add_action( $position, array( $this, 'print_module_preloads' ) );
}

Additional comments

@westonruter mentioned that we could optimize this in the future if we have a way to filter the output before sending the response to the client:

• Script Modules API: update the code and move it to the compat/wordpress-6.5 folder gutenberg#57778 (comment)

Testing instructions

To check that this fixes the order of the import map:

1. Create a new plugin with three files:

   // test-plugin/test.php
   <?php
   /*
   Plugin Name: Test Script Modules
   Version: 1.0.0
   */
   
   wp_register_script_module(
     'bar',
     plugins_url( '/bar.js', __FILE__ )
   );
   
   wp_enqueue_script_module(
     'foo',
     plugins_url( '/foo.js', __FILE__ ),
     array( 'bar' )
   );

   // test-plugin/foo.js
   import bar from "bar";
   
   bar();

   // test-plugin/bar.js
   export default function bar() {
     console.log("bar");
   }

2. Activate the plugin.
3. Open the site (frontend).
4. Check that "bar" was printed in the console.

To check that this fixes the positioning of the scripts/link in the classic themes:

1. Load a block theme.
2. Check that the scripts with type="importmap" and type="module", and the link with rel="modulepreload" are printed in the head.
3. Load a classic theme.
4. Check that the scripts with type="importmap" and type="module", and the link with rel="modulepreload" are printed in the footer.