[Bug]: FSE themes: wp-block-site-title style not loading on frontend when switch to theme

[Nic-Sevic]

Quick summary

wp-block-site-title and possibly other styles are not getting loaded when switching to certain themes on WoA sites (at least pendant, tt2, and zoologist).

This behavior happens only when Gutenberg plugin is active and is tied to a change that happened between 13.4.0 and 13.5.0. It may be tied to this specific change? WordPress/gutenberg#34180

Some hopefully helpful feedback shared on the p2: p9F6qB-afB-p2

I have seen this very behavior when accessing the Global Styles settings too early in the render lifecycle. This was causing the Global Styles configuration to cache settings before all blocks were registered, thus those unregistered blocks never received the styles expressed for them in theme.json (either theme or user).

This was happening because of things I was doing in the theme, and Disco and TT2 are neither doing that kind of activity.

You can likely reproduce calling something like wp_get_global_settings() from an init action with a low priority value.

Happening with PHP 7.4 and 8.0
Happening with FSE themes, in particular verified with: Pendant, Zoologist, TT2
Happening with Gutenberg 13.5.0 - 14.0.2

Since WoA, was able to disable all other plugins except Jetpack and Akismet but I tested with these active on an ephemeral site and styles loaded fine

Steps to reproduce

1. On an Atomic site with an up to date Gutenberg plugin active, activate tt2 or zoologist (likely other FSE themes as well)
2. check the live page and inspect global-styles-inline-css for the wp-block-site-title style
3. deactivate Gutenberg and refresh live page
4. see title get change size and style appear in global-styles-inline-css
5. unsymlink gutenberg to verify still happens - wpcomsh plugin use-unmanaged gutenberg
6. verify still happens
7. revert version to 13.4.0 - plugin install gutenberg --version=13.4.0 --force
8. see that no longer happens

What you expected to happen

the theme styles should get applied automatically when you switch to the theme

What actually happened

The theme styles aren't applied. You can make changes to the title in the editor though and those are applied.

Gutenberg active:

Gutenberg deactivated:

Browser

No response

Context

No response

Platform (Simple, Atomic, or both?)

Atomic

Other notes

No response

Reproducibility

Consistent

Severity

All

Available workarounds?

Yes, easy to implement

Workaround details

Can edit the title size in the template editor and it will be applied

[iamtakashi]

and possibly other styles are not getting loaded

It looks like this is happening on the post title as well.

This is an example with Vivre. The post title is in red and has an underline. The left is an atomic site, and the right is a simple site.

[JoshuaGoode]

This issue can occur on self-hosted sites with the Jetpack Google Fonts module activated. p9F6qB-afB-p2

1. Create site (anywhere, any infrastructure)
2. Install Jetpack and Gutenberg
3. Connect Jetpack, activate the Google Fonts Jetpack module.

On WPCOM Atomic, we force activate the Google Fonts module via wpcomsh's /feature-plugins/google-fonts.php

So, two potential problems. The primary is the Jetpack conflict.

1. Jetpack's Google Fonts module is causing the conflict
2. Google Fonts module cannot be deactivated on WPCOM Atomic due to wpcomsh

[JoshuaGoode]

I'd normally move this issue to Jetpack but I've created a new issue now that we know more. We might end up closing this one to reduce confusion.

Automattic/jetpack#26224

[kriskorn]

Closing this in favor of the above, which also has a potential patch Automattic/jetpack#26193.