Change location of block support styles in `<head>` #39164

ndiego · 2022-03-02T15:07:21Z

Description

#38750 moved to block support styles to <head>, which was great. However these styles were loaded before block/global inline styles. This causes block support styles (which includes user styles set in the Editor) to be potentially overwritten by block/global inline styles.

In this PR, instead of using wp_enqueue_scripts, we use wp_head instead. This ensures that block support styles are loaded after the block/global inline styles in <head>.

There may be a better option than wp_head, but I have so far not been able to find one that works. Any insight would be greatly appreciated!

Screenshots

Here are some screenshots looking at the Site Title block. In theme.json, there is a link color applied. Before this change, this color overrides the custom orange color set by the user in the Editor. After the change, the user color takes precedent.

Before:

After:

Types of changes

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
I've tested my changes with keyboard and screen readers.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).
I've updated related schemas if appropriate.

ndiego · 2022-03-02T15:51:52Z

Just a quick note for those reviewing. While this PR places the styles in the correct spot in <head> and I do think we need to get this updated asap, in testing, we stumbled upon other specificity issues related to global styles. I will continue investigating this and add a separate issue(s) as needed.

ndiego · 2022-03-02T17:02:13Z

@c4rl0sbr4v0 I was just doing some more testing and discovered other issues that this PR fixes. Without this fix, block styles override blockGap, which should not happen. Here is an example using the Image block.

This can be tested using Twenty Twenty-Two:

Add a new page with some text
Add an Image block
Notice that blockGap is not getting applies to the image on the Frontend.

Note that it still looks ok in the Editor because the styles are still loaded in the footer.

alexstine

@ndiego Is there no option to maybe use $deps?

https://developer.wordpress.org/reference/functions/wp_enqueue_script/
https://developer.wordpress.org/reference/functions/wp_enqueue_style/

E.g. Must have XYZ included? I am not really understanding what the issue is so I am probably not the right person to be reviewing this.

ndiego · 2022-03-02T17:27:38Z

Thanks for taking a look @alexstine. The issue is not about what is be loaded, more about where. All of these styles need to get added, just after all the inline block/global styles. In Gutenberg 12.6, the block support styles were loaded in the footer. #38750 fixed this by placing them in the <header>, but at the top. This PR just moves them down which mocks the Gutenberg 12.6 implementation.

alexstine

Left another idea after checking the code.

alexstine · 2022-03-02T17:48:14Z

lib/compat/wordpress-5.9/script-loader.php

@@ -63,7 +63,7 @@ function gutenberg_enqueue_global_styles_assets() {
 function gutenberg_enqueue_block_support_styles( $style ) {
 $action_hook_name = 'wp_footer';
 if ( wp_is_block_theme() ) {
- $action_hook_name = 'wp_enqueue_scripts';


@ndiego Why not add:

$action_hook_priority = 999;

Then the block support styles can load after the global styles as default priority on hooks is 10. If you are looking to do the reverse, you can make the priority 9 or lower as it will load before the priority of 10. Does this make sense?

ndiego · 2022-03-02T18:16:14Z

@MaggieCabrera pinging you here to see if this fix resolves the issues you were having in #39014. I believe it does but would love your review if you have time.

cbravobernal

The PR brings back visual consistency between 12.6 and 12.7. I tested and everything seems fine. We will still need to work on styles cascade :-)

Looks good to me!

* Use wp_head instead of wp_enqueue_scripts * Updates documentation

youknowriad · 2022-03-02T20:56:58Z

Did the original PR made it to the WP minor @oandregal @jorgefilipecosta ? wondering whether we should flag this for potential next minor.

MaggieCabrera · 2022-03-03T08:11:26Z

Thanks for bringing this in! +1 to flagging this for next minor

* Use wp_head instead of wp_enqueue_scripts * Updates documentation

Backports changes from WordPress/gutenberg#39164. Props ndiego, alexstine, cbravobernal, mamaduka. See #55474. git-svn-id: https://develop.svn.wordpress.org/trunk@53015 602fd350-edb4-49c9-b593-d223f7449a82

Backports changes from WordPress/gutenberg#39164. Props ndiego, alexstine, cbravobernal, mamaduka. See #55474. Built from https://develop.svn.wordpress.org/trunk@53015 git-svn-id: http://core.svn.wordpress.org/trunk@52604 1a063a9b-81f0-0310-95a4-ce76da25c4cd

Backports changes from WordPress/gutenberg#39164. Props ndiego, alexstine, cbravobernal, mamaduka. See #55474. Built from https://develop.svn.wordpress.org/trunk@53015 git-svn-id: https://core.svn.wordpress.org/trunk@52604 1a063a9b-81f0-0310-95a4-ce76da25c4cd

Backports changes from WordPress/gutenberg#39164. Props ndiego, alexstine, cbravobernal, mamaduka. Merges [53015] to the 5.9 branch. See #55474. git-svn-id: https://develop.svn.wordpress.org/branches/5.9@53017 602fd350-edb4-49c9-b593-d223f7449a82

Backports changes from WordPress/gutenberg#39164. Props ndiego, alexstine, cbravobernal, mamaduka. Merges [53015] to the 5.9 branch. See #55474. Built from https://develop.svn.wordpress.org/branches/5.9@53017 git-svn-id: http://core.svn.wordpress.org/branches/5.9@52606 1a063a9b-81f0-0310-95a4-ce76da25c4cd

Backports changes from WordPress/gutenberg#39164. Props ndiego, alexstine, cbravobernal, mamaduka. Merges [53015] to the 5.9 branch. See #55474. Built from https://develop.svn.wordpress.org/branches/5.9@53017 git-svn-id: https://core.svn.wordpress.org/branches/5.9@52606 1a063a9b-81f0-0310-95a4-ce76da25c4cd

Backports changes from WordPress/gutenberg#39164. Props ndiego, alexstine, cbravobernal, mamaduka. Merges [53015] to the 5.9 branch. See #55474. Built from https://develop.svn.wordpress.org/branches/5.9@53017

Backports changes from WordPress/gutenberg#39164. Props ndiego, alexstine, cbravobernal, mamaduka. Merges [53015] to the 5.9 branch. See #55474. Built from https://develop.svn.wordpress.org/branches/5.9@53017 git-svn-id: http://core.svn.wordpress.org/branches/5.9@52606 1a063a9b-81f0-0310-95a4-ce76da25c4cd

ndiego added 2 commits March 2, 2022 09:56

Use wp_head instead of wp_enqueue_scripts

8d5afe9

Updates documentation

f963fbb

ndiego requested review from Mamaduka, youknowriad, oandregal and jorgefilipecosta March 2, 2022 15:07

ndiego requested review from TimothyBJacobs and spacedmonkey as code owners March 2, 2022 15:07

ndiego added the [Type] Bug An existing feature does not function as intended label Mar 2, 2022

ndiego self-assigned this Mar 2, 2022

cbravobernal added this to the Gutenberg 12.7 milestone Mar 2, 2022

cbravobernal added the CSS Styling Related to editor and front end styles, CSS-specific issues. label Mar 2, 2022

cbravobernal removed this from the Gutenberg 12.7 milestone Mar 2, 2022

alexstine reviewed Mar 2, 2022

View reviewed changes

jasmussen mentioned this pull request Mar 2, 2022

WIP: lower specificity to max width on post template #39014

Closed

8 tasks

ndiego requested review from MaggieCabrera and cbravobernal March 2, 2022 18:16

cbravobernal approved these changes Mar 2, 2022

View reviewed changes

cbravobernal added this to the Gutenberg 12.7 milestone Mar 2, 2022

cbravobernal merged commit 8df8fb2 into WordPress:trunk Mar 2, 2022

cbravobernal pushed a commit that referenced this pull request Mar 2, 2022

Change location of block support styles in <head> (#39164)

4abc1ad

* Use wp_head instead of wp_enqueue_scripts * Updates documentation

youknowriad added the Backport to WP Minor Release Pull request that needs to be backported to a WordPress minor release label Mar 3, 2022

ndiego deleted the fix/add-block-styles-end-of-head branch March 3, 2022 10:33

jffng mentioned this pull request Mar 7, 2022

Alignments in post content not respected in block themes Automattic/themes#5566

Closed

youknowriad mentioned this pull request Mar 16, 2022

Styles for the .wp-container-uniqueID are loaded in the incorrect order or not loaded at all in 5.9.1 - 5.9.2 #39207

Closed

Mamaduka removed the Backport to WP Minor Release Pull request that needs to be backported to a WordPress minor release label Mar 29, 2022

Mamaduka pushed a commit that referenced this pull request Mar 29, 2022

Change location of block support styles in <head> (#39164)

6ed18dd

* Use wp_head instead of wp_enqueue_scripts * Updates documentation

Mamaduka mentioned this pull request Mar 29, 2022

Change location of block support styles in wp_head WordPress/wordpress-develop#2473

Closed

manolobevia mentioned this pull request Apr 7, 2022

Create upstream release v1.9.4 cul-it/uls#1088

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Change location of block support styles in `<head>` #39164

Change location of block support styles in `<head>` #39164

ndiego commented Mar 2, 2022

ndiego commented Mar 2, 2022

ndiego commented Mar 2, 2022

alexstine left a comment •

edited

ndiego commented Mar 2, 2022

alexstine left a comment

alexstine Mar 2, 2022

ndiego commented Mar 2, 2022

cbravobernal left a comment

youknowriad commented Mar 2, 2022

MaggieCabrera commented Mar 3, 2022

Navigation Menu

Change location of block support styles in <head> #39164

Change location of block support styles in <head> #39164

Conversation

ndiego commented Mar 2, 2022

Description

Screenshots

Types of changes

Checklist:

ndiego commented Mar 2, 2022

ndiego commented Mar 2, 2022

alexstine left a comment • edited

Choose a reason for hiding this comment

ndiego commented Mar 2, 2022

alexstine left a comment

Choose a reason for hiding this comment

alexstine Mar 2, 2022

Choose a reason for hiding this comment

ndiego commented Mar 2, 2022

cbravobernal left a comment

Choose a reason for hiding this comment

youknowriad commented Mar 2, 2022

MaggieCabrera commented Mar 3, 2022

Change location of block support styles in `<head>` #39164

Change location of block support styles in `<head>` #39164

alexstine left a comment •

edited