Updates to wc-settings

tl;dr

In WooCommerce Blocks 6.3.0/WooCommerce 6.0.0, any script that has a dependency on wc-settings will now be loaded in the footer, not the header.

The details

The enqueued script with the handle, wc-settings is composed of two things:

• The actual script that exposes a getSetting function for clients to consume.
• Inline script data provided by the server that’s consumed by the client.

For the second one to happen, the script must be loaded in the footer. This way any PHP on the server is able to append data during the request before the script is enqueued and printed in the frontend output.

However, if another script is getting loaded in the header, and that script lists wc-settings as a dependency, it would cause the wc-settings script to also load in the header, and the inline data appended after that point would never print. This would in turn cause all other scripts that are looking for this data (like Cart, Checkout, All Products blocks for example) to break.

What’s the solution being introduced here

The fix checks all scripts that depend on wc-settings and forces them to load in the footer.

Theres is also a console warning if a script listing wc-settings as a dependency is set to load in the header and ends up being forced to load in the footer.

Prior to this change, scripts that load in the header and depend on wc-settings would have been broken already, so we believe this should have minimal impact.

How can I tell if this affects me?

In the page that you load your script in, open the console tab in the inspector, if you see a warning like this:

Scripts that have a dependency on [wc-settings|wc-blocks-checkout|wc-price-format] must be loaded in the footer, {$handle} was registered to load in the header, but has been switched to load in the footer instead. See https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/5059

This means your script is affected.

What action should I take?

It’s recommended that all of your JS is loaded in the footer, and not the header. If your script must load in header, consider decoupling wc-settings from it.

Scripts load in the header by default in a call like this:

wp_enqueue_script( $handle, $src, $deps, $ver );
// or
wp_register_script( $handle, $src, $deps, $ver );

To load that script in the footer, the fifth param must be true.

wp_enqueue_script( $handle, $src, $deps, $ver, true );
// or
wp_register_script( $handle, $src, $deps, $ver, true );