Script Loader: Load block styles on demand in classic themes even when wp-block-styles support is absent.

This reverts part of [61076] which made `wp-block-styles` theme support a precondition for opting in to `should_load_separate_core_block_assets` and `should_load_block_assets_on_demand`. This meant that the Twenty Twenty theme (and other themes without this support declared) would not benefit from on-demand block style loading. Nevertheless, even though such themes were not getting block styles loaded on demand, the  `wp_load_classic_theme_block_styles_on_demand()` function was proceeding to opt in to the output buffer for hoisting late-printed styles, even though it was unlikely there would then be any. This meant the template enhancement output buffer was being opened for no reason.

Enabling on-demand block style loading is measured to improve FCP and LCP in Twenty Twenty, for example a ~13% improvement over a Fast 4G connection when loading the Sample Page.

Developed in #10457

Follow-up to [61008], [61076], [60936].

Props westonruter.
See #64099, #64150, #64166, #43258.


git-svn-id: https://develop.svn.wordpress.org/trunk@61122 602fd350-edb4-49c9-b593-d223f7449a82

Author: westonruter

src/wp-includes/script-loader.php

@@ -3577,8 +3577,11 @@ function wp_remove_surrounding_empty_script_tags( $contents ) {
  * Adds hooks to load block styles on demand in classic themes.
  *
  * @since 6.9.0
+ *
+ * @see _add_default_theme_supports()
  */
 function wp_load_classic_theme_block_styles_on_demand() {
+	// This is not relevant to block themes, as they are opted in to loading separate styles on demand via _add_default_theme_supports().
 	if ( wp_is_block_theme() ) {
 		return;
 	}
@@ -3590,25 +3593,29 @@ function wp_load_classic_theme_block_styles_on_demand() {
 	 */
 	add_filter( 'wp_should_output_buffer_template_for_enhancement', '__return_true', 0 );
 
+	// If a site has opted out of the template enhancement output buffer, then bail.
 	if ( ! wp_should_output_buffer_template_for_enhancement() ) {
 		return;
 	}
 
+	// The following two filters are added by default for block themes in _add_default_theme_supports().
+
 	/*
-	 * If the theme supports block styles, add filters to ensure they are loaded separately and on demand. Without this,
-	 * if a theme does not want or support block styles, then enabling these filters can result in undesired separate
-	 * block-specific styles being enqueued, though a theme may also be trying to nullify the wp-block-library
-	 * stylesheet.
+	 * Load separate block styles so that the large block-library stylesheet is not enqueued unconditionally,
+	 * and so that block-specific styles will only be enqueued when they are used on the page.
+	 * A priority of zero allows for this to be easily overridden by themes which wish to opt out.
 	 */
-	if ( current_theme_supports( 'wp-block-styles' ) ) {
-		/*
-		 * Load separate block styles so that the large block-library stylesheet is not enqueued unconditionally,
-		 * and so that block-specific styles will only be enqueued when they are used on the page.
-		 */
-		add_filter( 'should_load_separate_core_block_assets', '__return_true', 0 );
+	add_filter( 'should_load_separate_core_block_assets', '__return_true', 0 );
 
-		// Also ensure that block assets are loaded on demand (although the default value is from should_load_separate_core_block_assets).
-		add_filter( 'should_load_block_assets_on_demand', '__return_true', 0 );
+	/*
+	 * Also ensure that block assets are loaded on demand (although the default value is from should_load_separate_core_block_assets).
+	 * As above, a priority of zero allows for this to be easily overridden by themes which wish to opt out.
+	 */
+	add_filter( 'should_load_block_assets_on_demand', '__return_true', 0 );
+
+	// If a site has explicitly opted out of loading block styles on demand via filters with priorities higher than above, then abort.
+	if ( ! wp_should_load_separate_core_block_assets() || ! wp_should_load_block_assets_on_demand() ) {
+		return;
 	}
 
 	// Add hooks which require the presence of the output buffer. Ideally the above two filters could be added here, but they run too early.

tests/phpunit/tests/template.php

@@ -1393,34 +1393,45 @@ public function test_wp_load_classic_theme_block_styles_on_demand_in_block_theme
 	 */
 	public function data_wp_load_classic_theme_block_styles_on_demand(): array {
 		return array(
-			'block_theme'                                => array(
+			'block_theme'                              => array(
 				'theme'                   => 'block-theme',
 				'set_up'                  => static function () {},
-				'expected_on_demand'      => false,
+				'expected_load_separate'  => true,
+				'expected_on_demand'      => true,
 				'expected_buffer_started' => false,
 			),
-			'classic_theme_with_output_buffer_blocked'   => array(
+			'classic_theme_with_output_buffer_blocked' => array(
 				'theme'                   => 'default',
 				'set_up'                  => static function () {
 					add_filter( 'wp_should_output_buffer_template_for_enhancement', '__return_false' );
 				},
+				'expected_load_separate'  => false,
 				'expected_on_demand'      => false,
 				'expected_buffer_started' => false,
 			),
-			'classic_theme_with_block_styles_support'    => array(
+			'classic_theme_with_should_load_separate_core_block_assets_opt_out' => array(
 				'theme'                   => 'default',
 				'set_up'                  => static function () {
-					add_theme_support( 'wp-block-styles' );
+					add_filter( 'should_load_separate_core_block_assets', '__return_false' );
 				},
+				'expected_load_separate'  => false,
 				'expected_on_demand'      => true,
-				'expected_buffer_started' => true,
+				'expected_buffer_started' => false,
 			),
-			'classic_theme_without_block_styles_support' => array(
+			'classic_theme_with_should_load_block_assets_on_demand_out_out' => array(
 				'theme'                   => 'default',
 				'set_up'                  => static function () {
-					remove_theme_support( 'wp-block-styles' );
+					add_filter( 'should_load_block_assets_on_demand', '__return_false' );
 				},
+				'expected_load_separate'  => true,
 				'expected_on_demand'      => false,
+				'expected_buffer_started' => false,
+			),
+			'classic_theme_without_any_opt_out'        => array(
+				'theme'                   => 'default',
+				'set_up'                  => static function () {},
+				'expected_load_separate'  => true,
+				'expected_on_demand'      => true,
 				'expected_buffer_started' => true,
 			),
 		);
@@ -1436,7 +1447,7 @@ public function data_wp_load_classic_theme_block_styles_on_demand(): array {
 	 *
 	 * @dataProvider data_wp_load_classic_theme_block_styles_on_demand
 	 */
-	public function test_wp_load_classic_theme_block_styles_on_demand( string $theme, ?Closure $set_up, bool $expected_on_demand, bool $expected_buffer_started ) {
+	public function test_wp_load_classic_theme_block_styles_on_demand( string $theme, ?Closure $set_up, bool $expected_load_separate, bool $expected_on_demand, bool $expected_buffer_started ) {
 		$this->assertFalse( wp_should_load_separate_core_block_assets(), 'Expected wp_should_load_separate_core_block_assets() to return false initially.' );
 		$this->assertFalse( wp_should_load_block_assets_on_demand(), 'Expected wp_should_load_block_assets_on_demand() to return true' );
 		$this->assertFalse( has_action( 'wp_template_enhancement_output_buffer_started', 'wp_hoist_late_printed_styles' ), 'Expected wp_template_enhancement_output_buffer_started action to be added for classic themes.' );
@@ -1447,8 +1458,9 @@ public function test_wp_load_classic_theme_block_styles_on_demand( string $theme
 		}
 
 		wp_load_classic_theme_block_styles_on_demand();
+		_add_default_theme_supports();
 
-		$this->assertSame( $expected_on_demand, wp_should_load_separate_core_block_assets(), 'Expected wp_should_load_separate_core_block_assets() return value.' );
+		$this->assertSame( $expected_load_separate, wp_should_load_separate_core_block_assets(), 'Expected wp_should_load_separate_core_block_assets() return value.' );
 		$this->assertSame( $expected_on_demand, wp_should_load_block_assets_on_demand(), 'Expected wp_should_load_block_assets_on_demand() return value.' );
 		$this->assertSame( $expected_buffer_started, (bool) has_action( 'wp_template_enhancement_output_buffer_started', 'wp_hoist_late_printed_styles' ), 'Expected wp_template_enhancement_output_buffer_started action added status.' );
 	}