WordPress.org
Get WordPress

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 3 years ago

#55148 closed defect (bug) (fixed)

In block themes, styles should load in the head

Reported by: oandregal's profile oandregal Owned by: audrasjb's profile audrasjb
Milestone: 5.9.1 Priority: normal
Severity: normal Version: 5.9
Component: Script Loader Keywords: has-patch
Focuses: Cc:

Description

WordPress 5.8 introduced some logic to load some styles in the bottom of the body for classic themes that opted-in into loading block assets separately. For classic themes that didn't opt-in and block themes, the styles should be loaded in the head.

Specifically, in https://core.trac.wordpress.org/ticket/53494 global styles were set to do that. However, at some point during the WordPress 5.9 cycle, a regression was introduced that made block themes to have the global styles in the body.

Similarly, block styles generated by WordPress dynamically (layout and elements) should have been loaded following the same logic. Instead, these are always loaded in the body.

Change History (22)

#1 @oandregal
3 years ago

  • Keywords has-patch added

I've got a PR to fix the global styles ​https://github.com/WordPress/wordpress-develop/pull/2303

This ticket was mentioned in ​PR #2303 on ​WordPress/wordpress-develop by ​oandregal.
3 years ago #2

Trac ticket https://core.trac.wordpress.org/ticket/55148
Backports ​https://github.com/WordPress/gutenberg/pull/38745

In the linked trac ticket we added some logic to load the global stylesheet in the bottom of <body> for classic themes that opted-in into loading individual block styles instead of a single stylesheet for them all. At the time, block themes always loaded the global stylesheet in the <head>.

When block themes landed in core during the WordPress 5.9 this logic wasn't updated to consider them, hence the global stylesheet loaded in the <body> for them. This PR fixes this.

## How to test

  • Block theme: load a site using TwentyTwentyTwo and verify that the global-styles-inline-css embedded stylesheet is loaded in the <head>.
  • Classic theme that doesn't opt in into should_load_separate_core_block_assets: load a site using TwentyTwenty and verify that the global-styles-inline-css embedded stylesheet is loaded in the <head>.
  • Classic theme that opts-in into should_load_separate_core_block_assets:
    • Use TwentyTwenty.
    • Add add_filter( 'should_load_separate_core_block_assets', '__return_true' ); to its functions.php.
    • Load the site and verify that the global-styles-inline-css is loaded at the bottom of the <body>.

#3 @youknowriad
3 years ago

  • Milestone changed from Awaiting Review to 5.9.1

#4 @wpsoul
3 years ago

I think the problem is not only in global styles. Also, inline styles for container and elements are loaded in body

This is set to place style tags wp_footer in files

wp-includes/block-supports/elements.php
wp-includes/block-supports/layouts.php

When, I changed to wp_head - everything starts to work smoothly. Can we load inline styles in head for block themes?

Version 0, edited 3 years ago by wpsoul (next)

#5 @audrasjb
3 years ago

  • Keywords commit added
  • Owner set to audrasjb
  • Status changed from new to assigned

The proposed PR was reviewed by @aristath.
Self assigning for commit.

#6 @audrasjb
3 years ago

  • Component changed from Editor to Script Loader

#7 @audrasjb
3 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 52738:

Script Loader: Load block themes styles in the head section.

Previously, some logic was added to load the global stylesheet in the bottom of <body> for classic themes that opted-in into loading individual block styles instead of a single stylesheet for them all. At the time, block themes always loaded the global stylesheet in the <head>. When block themes landed in core during WordPress 5.9 this logic wasn’t updated to consider them, hence the global stylesheet loaded in the <body> for them. This changeset fixes this.

Props oandregal, aristath.
Fixes #55148.

#9 @audrasjb
3 years ago

  • Keywords fixed-major added
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for backport

#10 @audrasjb
3 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 52739:

Script Loader: Load block themes styles in the head section.

Previously, some logic was added to load the global stylesheet in the bottom of <body> for classic themes that opted-in into loading individual block styles instead of a single stylesheet for them all. At the time, block themes always loaded the global stylesheet in the <head>. When block themes landed in core during WordPress 5.9 this logic wasn’t updated to consider them, hence the global stylesheet loaded in the <body> for them. This changeset fixes this.

Props oandregal, aristath.
Merges [52738] to the 5.9 branch.
Fixes #55148.

This ticket was mentioned in ​PR #2323 on ​WordPress/wordpress-develop by ​oandregal.
3 years ago #11

Part of https://core.trac.wordpress.org/ticket/55148#comment:10
Backports ​https://github.com/WordPress/gutenberg/pull/38750

The dynamic block styles for layout and elements should be loaded in the <head> for block themes. While that should also be the case for classic themes, the current mechanism we use (render_block) does not allow us to do that, hence, this PR doesn't change anything for them and will be loaded the <body>.

## How to test

Block theme in WordPress 5.9:

  • Use TwentyTwentyTwo and load the front end.
  • Verify the embedded styles for elements (.wp-elements-UUID ...) and layout (.wp-container-UUUID ...) are loaded in the <head>.

Classic theme in WordPress 5.9:

  • Use TwentyTwenty and load the front end.
  • Verify the embedded styles for elements (.wp-elements-UUID ...) and layout (.wp-container-UUUID ...) are loaded in the <body>.

#12 @oandregal
3 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

For this ticket to be fully fixed, we also need to enqueue the block support styles (layout, elements) in the head for block themes. I've prepared a PR for that at ​https://github.com/WordPress/wordpress-develop/pull/2323

(Also to be backported to 5.9.1)

#13 @audrasjb
3 years ago

  • Keywords commit fixed-major removed

#14 @jorgefilipecosta
3 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 52741:

Script Loader: Load block support styles in the head for block themes.

The dynamic block styles for layout and elements should be loaded in the head for block themes. While that should also be the case for classic themes, the current mechanism we use (render_block) does not allow us to do that, hence, this PR doesn't change anything for them and will be loaded the body.

Props oandregal, youknowriad, wpsoul.
Fixes #55148.

#15 @jorgefilipecosta
3 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopenning for backport to 5.9.1.

​oandregal commented on ​PR #2323:
3 years ago #16

@swissspidy @hellofromtonya I see this had already been approved&commited at https://core.trac.wordpress.org/changeset/52741

Is there anyone with commit access that can do those changes directly? I also can prepare a follow-up if it's convenient for people.

​hellofromtonya commented on ​PR #2323:
3 years ago #17

@jorgefilipecosta is preparing a follow-up commit ​https://wordpress.slack.com/archives/C02RQBWTW/p1645035406929929

This ticket was mentioned in ​PR #2328 on ​WordPress/wordpress-develop by ​jorgefilipecosta.
3 years ago #18

Applies feedback to ​https://github.com/WordPress/wordpress-develop/pull/2323

This commit applies feedback given to commit 52741. It changes the new function name, the file where it is located, and improves its documentation and marks.

Follow-up to [52741].
Props hellofromtonya, swissspidy, oandregal.
See #55148.

#19 @jorgefilipecosta
3 years ago

In 52743:

Script Loader: Improvements to the load block support styles mechanism.

This commit applies feedback given to commit 52741. It changes the new function name, the file where it is located, and improves its documentation and marks.

Follow-up to [52741].
Props hellofromtonya, swissspidy, oandregal.
See #55148.

#20 @jorgefilipecosta
3 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 52747:

Script Loader: Load block support styles in the head for block themes.

The dynamic block styles for layout and elements should be loaded in the head for block themes. While that should also be the case for classic themes, the current mechanism we use (render_block) does not allow us to do that, hence, this PR doesn't change anything for them and will be loaded the body.

Props oandregal, youknowriad, wpsoul.
Merges [52741] to the 5.9 branch.
Fixes #55148.

#21 @jorgefilipecosta
3 years ago

In 52748:

Script Loader: Improvements to the load block support styles mechanism.

This commit applies feedback given to commit 52741. It changes the new function name, the file where it is located, and improves its documentation and marks.

Follow-up to [52741].
Props hellofromtonya, swissspidy, oandregal.
Merges [52743] to the 5.9 branch.
See #55148.

#22 @audrasjb
3 years ago

In 53234:

Editor: Move wp_enqueue_block_style() to wp-includes/script-loader.php, for better consistency.

As a result of [52741] and [52743], wp_enqueue_block_support_styles() was moved to wp-includes/script-loader.php. However, wp_enqueue_block_style() was still defined in wp-includes/blocks.php. This changeset also moves wp_enqueue_block_support_styles() to wp-includes/script-loader.php for better consistency.

Follow-up to [52741], [52743].

Props SergeyBiryukov, mukesh27, audrasjb.
Fixes #55182.
See #55148.

Note: See TracTickets for help on using tickets.