diff --git a/lib/experimental/interactivity-api/scripts.php b/lib/experimental/interactivity-api/scripts.php index 545d984f6f76a..ed1fca8550070 100644 --- a/lib/experimental/interactivity-api/scripts.php +++ b/lib/experimental/interactivity-api/scripts.php @@ -7,21 +7,32 @@ */ /** - * Move interactive scripts to the footer and make them load with the defer strategy. - * This ensures they work with `wp_store`. + * Makes sure that interactivity scripts execute after all `wp_store` directives have been printed to the page. + * + * In WordPress 6.3+ this is achieved by printing in the head but marking the scripts with defer. This has the benefit + * of early discovery so the script is loaded by the browser, while at the same time not blocking rendering. In older + * versions of WordPress, this is achieved by loading the scripts in the footer. + * + * @link https://make.wordpress.org/core/2023/07/14/registering-scripts-with-async-and-defer-attributes-in-wordpress-6-3/ */ function gutenberg_interactivity_move_interactive_scripts_to_the_footer() { - // Move the @wordpress/interactivity package to the footer. - wp_script_add_data( 'wp-interactivity', 'group', 1 ); - wp_script_add_data( 'wp-interactivity', 'strategy', 'defer' ); + $supports_defer = version_compare( strtok( get_bloginfo( 'version' ), '-' ), '6.3', '>=' ); + if ( $supports_defer ) { + // Defer execution of @wordpress/interactivity package but continue loading in head. + wp_script_add_data( 'wp-interactivity', 'strategy', 'defer' ); + wp_script_add_data( 'wp-interactivity', 'group', 0 ); + } else { + // Move the @wordpress/interactivity package to the footer. + wp_script_add_data( 'wp-interactivity', 'group', 1 ); + } // Move all the view scripts of the interactive blocks to the footer. $registered_blocks = \WP_Block_Type_Registry::get_instance()->get_all_registered(); foreach ( array_values( $registered_blocks ) as $block ) { if ( isset( $block->supports['interactivity'] ) && $block->supports['interactivity'] ) { foreach ( $block->view_script_handles as $handle ) { - wp_script_add_data( $handle, 'group', 1 ); - wp_script_add_data( $handle, 'strategy', 'defer' ); + // Note that all block view scripts are already made defer by default. + wp_script_add_data( $handle, 'group', $supports_defer ? 0 : 1 ); } } }