Trac 64389: Refine hoisted stylesheet ordering in classic themes #10875
+374
−140
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2551,21 +2551,42 @@ function wp_enqueue_global_styles() { | |
| $is_block_theme = wp_is_block_theme(); | ||
| $is_classic_theme = ! $is_block_theme; | ||
|
|
||
| /** | ||
| * Global styles should be printed in the HEAD for block themes, or for classic themes when loading assets on | ||
| * demand is disabled (which is no longer the default since WordPress 6.9). | ||
| * | ||
| * @link https://core.trac.wordpress.org/ticket/53494 | ||
| * @link https://core.trac.wordpress.org/ticket/61965 | ||
| */ | ||
| if ( | ||
| doing_action( 'wp_footer' ) && | ||
| ( | ||
| $is_block_theme || | ||
| ( $is_classic_theme && ! $assets_on_demand ) | ||
| ) | ||
| ) { | ||
| return; | ||
| } | ||
|
|
||
| /** | ||
| * The footer should only be used for classic themes when loading assets on demand is enabled. In WP 6.9 this is the | ||
| * default with the introduction of hoisting late-printed styles (via {@see wp_load_classic_theme_block_styles_on_demand()}). | ||
| * So even though the main global styles are not printed here in the HEAD for classic themes with on-demand asset | ||
| * loading, a placeholder for the global styles is still enqueued. Then when {@see wp_hoist_late_printed_styles()} | ||
| * processes the output buffer, it can locate the placeholder and inject the global styles from the footer into the | ||
|
westonruter marked this conversation as resolved.
|
||
| * HEAD, replacing the placeholder. | ||
| * | ||
| * @link https://core.trac.wordpress.org/ticket/64099 | ||
| */ | ||
| if ( $is_classic_theme && doing_action( 'wp_enqueue_scripts' ) && $assets_on_demand ) { | ||
| if ( has_action( 'wp_template_enhancement_output_buffer_started', 'wp_hoist_late_printed_styles' ) ) { | ||
| wp_register_style( 'wp-global-styles-placeholder', false ); | ||
| wp_add_inline_style( 'wp-global-styles-placeholder', ':root { --wp-internal-comment: "Placeholder for wp_hoist_late_printed_styles() to replace with the global-styles printed at wp_footer." }' ); | ||
|
westonruter marked this conversation as resolved.
Member
There was a problem hiding this comment. Thats cure, I've never seen style comments added like this.
Member
Author
There was a problem hiding this comment. Just a CSS custom property (variable) leveraged as a comment 😄 |
||
| wp_enqueue_style( 'wp-global-styles-placeholder' ); | ||
| } | ||
| return; | ||
| } | ||
|
|
||
| /* | ||
| * If loading the CSS for each block separately, then load the theme.json CSS conditionally. | ||
| * This removes the CSS from the global-styles stylesheet and adds it to the inline CSS for each block. | ||
|
|
@@ -2741,6 +2762,16 @@ function wp_should_load_block_assets_on_demand() { | |
| */ | ||
| function wp_enqueue_registered_block_scripts_and_styles() { | ||
| if ( wp_should_load_block_assets_on_demand() ) { | ||
| /** | ||
| * Add placeholder for where block styles would historically get enqueued in a classic theme when block assets | ||
| * are not loaded on demand. This happens right after {@see wp_common_block_scripts_and_styles()} is called | ||
| * at which time wp-block-library is enqueued. | ||
| */ | ||
| if ( ! wp_is_block_theme() && has_action( 'wp_template_enhancement_output_buffer_started', 'wp_hoist_late_printed_styles' ) ) { | ||
| wp_register_style( 'wp-block-styles-placeholder', false ); | ||
| wp_add_inline_style( 'wp-block-styles-placeholder', ':root { --wp-internal-comment: "Placeholder for wp_hoist_late_printed_styles() to replace with the block styles printed at wp_footer." }' ); | ||
|
westonruter marked this conversation as resolved.
|
||
| wp_enqueue_style( 'wp-block-styles-placeholder' ); | ||
| } | ||
| return; | ||
| } | ||
|
|
||
|
|
@@ -3700,42 +3731,30 @@ function wp_load_classic_theme_block_styles_on_demand() { | |
| * @see wp_load_classic_theme_block_styles_on_demand() | ||
| * @see _wp_footer_scripts() | ||
| */ | ||
| function wp_hoist_late_printed_styles(): void { | ||
| // Skip the embed template on-demand styles aren't relevant, and there is no wp_head action. | ||
| if ( is_embed() ) { | ||
| return; | ||
| } | ||
|
|
||
|
Comment on lines
-3709
to
-3725
Member
Author
There was a problem hiding this comment. This code is obsolete as it was just used to set the |
||
| /* | ||
| * Add a placeholder comment into the inline styles for wp-block-library, after which the late block styles | ||
| * can be hoisted from the footer to be printed in the header by means of a filter below on the template enhancement | ||
| * output buffer. | ||
| * | ||
| * Note that wp_maybe_inline_styles() prepends the inlined style to the extra 'after' array, which happens after | ||
| * this code runs. This ensures that the placeholder appears right after any inlined wp-block-library styles, | ||
| * which would be common.css. | ||
| */ | ||
| $placeholder = sprintf( '/*%s*/', uniqid( 'wp_block_styles_on_demand_placeholder:' ) ); | ||
| $dependency = wp_styles()->query( 'wp-block-library', 'registered' ); | ||
| if ( $dependency ) { | ||
| if ( ! isset( $dependency->extra['after'] ) ) { | ||
| wp_add_inline_style( 'wp-block-library', $placeholder ); | ||
| } else { | ||
| array_unshift( $dependency->extra['after'], $placeholder ); | ||
| } | ||
| } | ||
|
|
||
| /* | ||
| * Create a substitute for `print_late_styles()` which is aware of block styles. This substitute does not print | ||
|
|
@@ -3765,29 +3784,29 @@ static function () use ( $placeholder ) { | |
| } | ||
|
|
||
| /* | ||
| * First print all styles related to core blocks which should be inserted right after the wp-block-library stylesheet | ||
| * to preserve the CSS cascade. The logic in this `if` statement is derived from `wp_print_styles()`. | ||
| */ | ||
| $enqueued_core_block_styles = array_values( array_intersect( $all_core_block_style_handles, wp_styles()->queue ) ); | ||
| if ( count( $enqueued_core_block_styles ) > 0 ) { | ||
| ob_start(); | ||
| wp_styles()->do_items( $enqueued_core_block_styles ); | ||
| $printed_core_block_styles = (string) ob_get_clean(); | ||
| } | ||
|
|
||
| // Capture non-core block styles so they can get printed at the point where wp_enqueue_registered_block_scripts_and_styles() runs. | ||
| $enqueued_other_block_styles = array_values( array_intersect( $all_other_block_style_handles, wp_styles()->queue ) ); | ||
| if ( count( $enqueued_other_block_styles ) > 0 ) { | ||
| ob_start(); | ||
| wp_styles()->do_items( $enqueued_other_block_styles ); | ||
| $printed_other_block_styles = (string) ob_get_clean(); | ||
| } | ||
|
|
||
| // Capture the global-styles so that it can be printed at the point where wp_enqueue_global_styles() runs. | ||
| if ( wp_style_is( 'global-styles' ) ) { | ||
| ob_start(); | ||
| wp_styles()->do_items( array( 'global-styles' ) ); | ||
| $printed_global_styles = (string) ob_get_clean(); | ||
| } | ||
|
|
||
| /* | ||
|
|
@@ -3797,7 +3816,7 @@ static function () use ( $placeholder ) { | |
| */ | ||
| ob_start(); | ||
| wp_styles()->do_footer_items(); | ||
| $printed_late_styles = (string) ob_get_clean(); | ||
| }; | ||
|
|
||
| /* | ||
|
|
@@ -3828,7 +3847,7 @@ static function () use ( $capture_late_styles ) { | |
| // Replace placeholder with the captured late styles. | ||
| add_filter( | ||
| 'wp_template_enhancement_output_buffer', | ||
| static function ( $buffer ) use ( $placeholder, &$printed_core_block_styles, &$printed_other_block_styles, &$printed_global_styles, &$printed_late_styles ) { | ||
|
|
||
| // Anonymous subclass of WP_HTML_Tag_Processor which exposes underlying bookmark spans. | ||
| $processor = new class( $buffer ) extends WP_HTML_Tag_Processor { | ||
|
|
@@ -3848,7 +3867,7 @@ private function get_span(): WP_HTML_Span { | |
| * | ||
| * @param string $text Text to insert. | ||
| */ | ||
| public function insert_before( string $text ): void { | ||
| $this->lexical_updates[] = new WP_HTML_Text_Replacement( $this->get_span()->start, 0, $text ); | ||
| } | ||
|
|
||
|
|
@@ -3857,7 +3876,7 @@ public function insert_before( string $text ) { | |
| * | ||
| * @param string $text Text to insert. | ||
| */ | ||
| public function insert_after( string $text ): void { | ||
| $span = $this->get_span(); | ||
|
|
||
| $this->lexical_updates[] = new WP_HTML_Text_Replacement( $span->start + $span->length, 0, $text ); | ||
|
|
@@ -3866,47 +3885,60 @@ public function insert_after( string $text ) { | |
| /** | ||
| * Removes the current token. | ||
| */ | ||
| public function remove(): void { | ||
| $span = $this->get_span(); | ||
|
|
||
| $this->lexical_updates[] = new WP_HTML_Text_Replacement( $span->start, $span->length, '' ); | ||
| } | ||
|
|
||
| /** | ||
| * Replaces the current token. | ||
| * | ||
| * @param string $text Text to replace with. | ||
| */ | ||
| public function replace( string $text ): void { | ||
| $span = $this->get_span(); | ||
|
|
||
| $this->lexical_updates[] = new WP_HTML_Text_Replacement( $span->start, $span->length, $text ); | ||
| } | ||
| }; | ||
|
|
||
| // Locate the insertion points in the HEAD. | ||
| while ( $processor->next_tag( array( 'tag_closers' => 'visit' ) ) ) { | ||
| if ( | ||
| 'STYLE' === $processor->get_tag() && | ||
| 'wp-global-styles-placeholder-inline-css' === $processor->get_attribute( 'id' ) | ||
| ) { | ||
| /** This is added in {@see wp_enqueue_global_styles()} */ | ||
| $processor->set_bookmark( 'wp_global_styles_placeholder' ); | ||
| } elseif ( | ||
| 'STYLE' === $processor->get_tag() && | ||
| 'wp-block-styles-placeholder-inline-css' === $processor->get_attribute( 'id' ) | ||
| ) { | ||
| /** This is added in {@see wp_enqueue_registered_block_scripts_and_styles()} */ | ||
| $processor->set_bookmark( 'wp_block_styles_placeholder' ); | ||
| } elseif ( | ||
| 'STYLE' === $processor->get_tag() && | ||
| 'wp-block-library-inline-css' === $processor->get_attribute( 'id' ) | ||
| ) { | ||
| /** This is added here in {@see wp_hoist_late_printed_styles()} */ | ||
| $processor->set_bookmark( 'wp_block_library' ); | ||
| } elseif ( 'HEAD' === $processor->get_tag() && $processor->is_tag_closer() ) { | ||
| $processor->set_bookmark( 'head_end' ); | ||
| break; | ||
|
Comment on lines
-3886
to
-3906
Member
Author
There was a problem hiding this comment. This condition is obsolete because the |
||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Replace the placeholder for global styles enqueued during {@see wp_enqueue_global_styles()}. This is done | ||
| * even if $printed_global_styles is empty. | ||
| */ | ||
| if ( $processor->has_bookmark( 'wp_global_styles_placeholder' ) ) { | ||
| $processor->seek( 'wp_global_styles_placeholder' ); | ||
| $processor->replace( $printed_global_styles ); | ||
| $printed_global_styles = ''; | ||
| } | ||
|
|
||
| /* | ||
| * Insert block styles right after wp-block-library (if it is present). The placeholder CSS comment will | ||
| * always be added to the wp-block-library inline style since it gets printed at `wp_head` before the blocks | ||
|
|
@@ -3921,13 +3953,34 @@ public function remove() { | |
| $css_text = $processor->get_modifiable_text(); | ||
|
|
||
| /* | ||
| * Split the block library inline style by the placeholder to identify the original inlined CSS, which | ||
| * likely would be common.css, followed by any inline styles which had been added by the theme or | ||
| * plugins via `wp_add_inline_style( 'wp-block-library', '...' )`. The separate block styles loaded on | ||
| * demand will get inserted after the inlined common.css and before the extra inline styles added by the | ||
| * user. | ||
| */ | ||
| $css_text_around_placeholder = explode( $placeholder, $css_text, 2 ); | ||
| $extra_inline_styles = ''; | ||
| if ( count( $css_text_around_placeholder ) === 2 ) { | ||
| $css_text = $css_text_around_placeholder[0]; | ||
| if ( '' !== trim( $css_text ) ) { | ||
| $inlined_src = wp_styles()->get_data( 'wp-block-library', 'inlined_src' ); | ||
| if ( $inlined_src ) { | ||
| $css_text .= sprintf( | ||
| "\n/*# sourceURL=%s */\n", | ||
| esc_url_raw( $inlined_src ) | ||
| ); | ||
| } | ||
| } | ||
| $extra_inline_styles = $css_text_around_placeholder[1]; | ||
| } | ||
|
|
||
| /* | ||
| * The placeholder CSS comment was added to the inline style in order to force an inline STYLE tag to | ||
| * be printed. Now that the inline style has been located and the placeholder comment has been removed, if | ||
| * there is no CSS left in the STYLE tag after removal, then remove the STYLE tag entirely. | ||
| */ | ||
| if ( '' === trim( $css_text ) ) { | ||
| $processor->remove(); | ||
| } else { | ||
| $processor->set_modifiable_text( $css_text ); | ||
|
|
@@ -3936,44 +3989,33 @@ public function remove() { | |
| $inserted_after = $printed_core_block_styles; | ||
| $printed_core_block_styles = ''; | ||
|
|
||
| /* | ||
| * Add a new inline style for any user styles added via wp_add_inline_style( 'wp-block-library', '...' ). | ||
| * This must be added here after $printed_core_block_styles to preserve the original CSS cascade when | ||
| * the combined block library stylesheet was used. The pattern here is checking to see if it is not just | ||
| * a sourceURL comment after the placeholder above is removed. | ||
| */ | ||
| if ( ! preg_match( ':^\s*(/\*# sourceURL=\S+? \*/\s*)?$:s', $extra_inline_styles ) ) { | ||
| $style_processor = new WP_HTML_Tag_Processor( '<style></style>' ); | ||
| $style_processor->next_tag(); | ||
| $style_processor->set_attribute( 'id', 'wp-block-library-inline-css-extra' ); | ||
| $style_processor->set_modifiable_text( $extra_inline_styles ); | ||
| $inserted_after .= "{$style_processor->get_updated_html()}\n"; | ||
| } | ||
|
|
||
| if ( '' !== $inserted_after ) { | ||
| $processor->insert_after( "\n" . $inserted_after ); | ||
| } | ||
| } | ||
|
|
||
| // Insert block styles at the point where wp_enqueue_registered_block_scripts_and_styles() normally enqueues styles. | ||
| if ( $processor->has_bookmark( 'wp_block_styles_placeholder' ) ) { | ||
| $processor->seek( 'wp_block_styles_placeholder' ); | ||
| if ( '' !== $printed_other_block_styles ) { | ||
| $processor->replace( "\n" . $printed_other_block_styles ); | ||
| } else { | ||
| $processor->remove(); | ||
| } | ||
| $printed_other_block_styles = ''; | ||
| } | ||
|
|
||
|
|
||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.