Inline global styles are now printed in the footer (Gutenberg Trunk and WP5.9 Beta4)

[briceduclos]

Description

Until Gutenberg 12.1.0, <style id="global-styles-inline-css"></style> was printed in the header. Now in Gutenberg and WP5.9 Beta 4, the style is printed in the footer.
Since #37335, WordPress core handles the style enqueuing and prints it in the footer, making it harder to override the CSS. Is it on purpose?

Step-by-step reproduction instructions

1. Use Gutenberg 12.2.0 and the Twenty Twenty-Two theme.
2. Inspect the HTML code of a front page.
3. Observe that <style id="global-styles-inline-css"></style> is printed at the end of the document just before the closing </body> tag.

Screenshots, screen recording, code snippet

No response

Environment info

WordPress 5.9 Beta 4, Gutenberg 12.2.0, Twenty Twenty-Two theme.

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[oandregal]

👋 This is how it works since WordPress 5.8. For themes that opt-in into loading separate stylesheets for blocks, the global stylesheet is enqueued in the footer. See this track ticket in WordPress core https://core.trac.wordpress.org/ticket/53494

What happens is that the logic to opt-in into this has been updated in WordPress 5.9 and all themes considered "block themes" opt into this. See https://core.trac.wordpress.org/ticket/54597 and #35593.

Because TwentyTwentyTwo is considered a block theme, this setting is enabled.

[gregm-mwb]

Hi can we reopen this I have an alternative solution

[gregm-mwb]

Hi, you can intercept the Html and move the CSS block to the head using a Cloudflare worker,

It removes potential layout shifts and keeps WordPress w3c compliant and fast as it causes no browser errors.

First, wrap the CSS code from Guttenberg into a div. Here's my function to do this:

``
function my_cool_function () {

echo '

';

 }

add_action('wp_footer', 'my_cool_function',10,2);

function my_cool_function_two () {

echo '

';

 }

add_action('wp_footer', 'my_cool_function_two',11,2);

[gregm-mwb]

Next create a Cloudflare Worker to intercept the HTML and move the div element containing the CSS to the bottom of the head

Here's my code for the Cloudflare worker:

` addEventListener('fetch', event => {
let { pathname } = new URL(event.request.url);

// Allow "/ignore/*" URLs to hit origin
if (pathname.startsWith('/wp-content/')) return;
if (pathname.startsWith('/wp-admin/')) return;
if (pathname.startsWith('/video/')) return;
if (pathname.startsWith('/wp-includes/')) return;
if (pathname.startsWith('/jetpack-temp/')) return;
if (pathname.startsWith('/conf/')) return;
if (pathname.startsWith('/imagify-backup/')) return;

// Otherwise, respond with something
event.respondWith(handleRequest(event.request))
});
/**

• Fetch and log a given request object
• @param {Request} request
  /
  async function handleRequest(request) {
  const response = await fetch(request)
  var html = await response.text()
  // test ^[\s\S]?([^<>]?)</p>
  // Simple replacement regex
  var stylesheets = html.replace( /^[\s\S]?<div id="inlinestyle">|</div>[\s\S]*$/g , '')

html = html.replace( stylesheets, '' )

// Inject scripts
html = html.replace( /<\/head>/ , stylesheets)
html = html.replace( /<body/ , '</head><body' )
// return modified response
return new Response(html, {
	headers: response.headers
})

}`

[gregm-mwb]

All works very nicely, please collaborate to improve code, working example:

https://www.metaverseworldbuilders.com/