optimize-loading-separate-core-block-assets-in-classic-themes.php

<?php
/**
 * Optimize Loading Separate Core Block Assets in Classic Themes Plugin.
 *
 * @package OptimizeLoadingSeparateCoreBlockAssetsInClassicThemes
 * @author Weston Ruter
 * @link https://gist.github.com/westonruter/25187db63a7666f08b151ca53497ffb5
 * @license GPL-2.0-or-later
 * @copyright 2023 Google Inc.
 *
 * @wordpress-plugin
 * Plugin Name: Optimize Loading Separate Core Block Assets in Classic Themes
 * Plugin URI: https://gist.github.com/westonruter/25187db63a7666f08b151ca53497ffb5
 * Description: Opt-in to <code>should_load_separate_core_block_assets</code> in Classic Themes and ensure that all late-printed styles are moved to the <code>head</code> to prevent shift and flash of unstyled content. See <a href="https://github.com/WordPress/gutenberg/issues/49927">gutenberg#49927</a>.
 * Version: 0.1.0
 * Author: Weston Ruter
 * Author URI: https://weston.ruter.net/
 * License: GPLv2 or later
 * License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
 * Requires at least: 5.8
 * Requires PHP: 5.6
 * Update URI: false
 */

namespace OptimizeLoadingSeparateCoreBlockAssetsInClassicThemes;

add_action(
	'setup_theme',
	static function () {
		if ( ! wp_is_block_theme() ) {
			capture_late_styles_for_head();
		}
	}
);

/**
 * Capture late styles printed in footer and move to head via output buffering.
 *
 * This function starts output buffering in the head right after head styles
 * are printed. It also captures the output of late-printed styles in the footer
 * and when the page finishes rendering and the output buffer is processed,
 * the late-printed styles are prepended to the returned buffer.
 *
 * @see _wp_footer_scripts()
 */
function capture_late_styles_for_head() {
	$head_priority   = has_action( 'wp_head', 'wp_print_styles' );
	$footer_priority = has_action( 'wp_print_footer_scripts', '_wp_footer_scripts' );

	// Abort if the expected hooks aren't registered.
	if ( false === $head_priority || false === $footer_priority ) {
		return;
	}

	// Opt-in to loading separate core block assets.
	add_filter( 'should_load_separate_core_block_assets', '__return_true' );

	// Variable in which we store output of print_late_styles().
	$late_styles = '';

	// Start output buffering the entire page right after head styles are printed.
	add_action(
		'wp_head',
		static function () use ( &$late_styles ) {
			ob_start(
				static function ( $buffer ) use ( &$late_styles ) {
					return
						"<!-- Begin output from print_late_styles() -->\n"
						. $late_styles
						. "<!-- End output from print_late_styles() -->\n"
						. $buffer;
				}
			);
		},
		// Make sure it happens after wp_print_styles().
		$head_priority + 1
	);

	/*
	 * Replace _wp_footer_scripts() with another version that captures the
	 * output of print_late_styles().
	 */
	remove_action( 'wp_print_footer_scripts', '_wp_footer_scripts', $footer_priority );
	add_action(
		'wp_print_footer_scripts',
		static function () use ( &$late_styles ) {
			// Capture the output of print_late_styles() so we can move to the head.
			ob_start();
			print_late_styles();
			$late_styles = ob_get_clean();

			print_footer_scripts();
		},
		$footer_priority
	);
}