Script Modules API: Move the script modules to the footer in classic themes

[luisherranz]

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.

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• The Plugin and Theme Directories cannot be accessed within Playground.
• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

[luisherranz]

FWIW, as I removed the ability to call the print functions more than once because it's now unnecessary, I also removed the test_print_enqueued_script_modules_can_be_called_multiple_times and test_print_preloaded_script_modules_can_be_called_multiple_times tests.

[youknowriad]

Committed in https://core.trac.wordpress.org/changeset/57345

[cbravobernal]

I tested and is working as expected.

Trunk screenshots:

• Is bar in console log ❌
• There are errors on console ❌
• The scripts are in the footer in a classic theme. ❌

PR applied screenshots:

• Is bar in console log ✅
• There are no errors on console ✅
• The scripts are in the footer in a classic theme. ✅

[luisherranz]

Thanks, folks!