Global Styles - Heading Block Typography Font changes are inconsistent across themes

cuemarie commented 1 year ago

Quick summary

The Heading block's default font family is impacted incosistently across themes using Global Styles.

In many themes, including Twenty Twenty Three, the heading block's default fonts are set from Styles > Typography > Headings > FONT.

Some themes, though, aren't impacted by this change at all, and instead must set the default font for headings under Styles > Blocks > Heading > Typography > FONT.

In the comments of a similar issue, @BogdanUngureanu noted this regarding Yuga:

In the case of Yugo, we've noticed that it's caused because the theme styles the core/heading element with a font. Because of this Global Styles (font family in this case) defined in Typography > Headings are overridden. In order to style these elements from Global Styles, you'll have to go to Global Styles > Blocks > Heading > Typography - https://github.com/Automattic/wp-calypso/issues/71641#issuecomment-1441688361

In response to that report, a PR was merged that fixed this issue in Masu, for reference:

https://github.com/Automattic/themes/pull/6885

Steps to reproduce

On a WordPress.com site, activate theme Russell, Yuga, or Tsubaki
Open the Site Editor, and add Heading blocks to a template of your choice
Open Styles > Typography > Headings and change the Font family.
- Observe the heading blocks on the template do not change font.
Now open Styles > Blocks > Heading > Typography and change the font family there
- Observe the heading blocks on the template respond to the font change.

What you expected to happen

For Styles > Typography > Headings > FONT to successfully set a default font for Heading blocks.

Twenty Twenty Three Example

https://github.com/Automattic/wp-calypso/assets/27249804/0ec1c42c-22d7-4b89-8b2e-598f2814a826

What actually happened

Nothing happens. Instead, the heading blocks respond to changes made under Styles > Blocks > Heading > Typography > FONT.

Russell Theme

https://github.com/Automattic/wp-calypso/assets/27249804/0ca0d762-4cbe-4198-a34e-9937e9dca99a

Tsubaki Theme

https://github.com/Automattic/wp-calypso/assets/27249804/e7f74921-e28d-4953-af3b-7cf5348fa4c9

Impact

Some (< 50%)

Available workarounds?

Yes, easy to implement

Platform (Simple and/or Atomic)

Simple, Atomic

Logs or notes

It was suggested that all Blockbase themes may be impacted, so I also tested the community theme Blockbase on an Atomic site, and this theme did not replicate the discrepancy - heading default fonts could be set under Styles > Typography > Headings > FONT (as well as under the Block specific level).

https://github.com/Automattic/wp-calypso/assets/27249804/7cce7e6c-cf16-4138-a55d-747006dc5b12

cuemarie commented 1 year ago

Meraki and Byrne were mentioned in the comments of the above issues as also suffering from this problem.

cuemarie commented 1 year ago

📌 ACTIONS

So far, this has been addressed previously at the theme level, so I've transferred to Themes.
That said, CC-ing @Automattic/t-rex here too, in case there's anything outside the theme-specific level that can be done to address this.

cuemarie commented 1 year ago

Notified Themes folks here: p1687389660658389-slack-C029FM1EH

cuemarie commented 1 year ago

Hey folks! The fix that was created for Yuga look ready to deploy, just needs a helping hand: https://github.com/Automattic/theme-yuga/pull/8#issuecomment-1608290279