Styles: Changing typography doesn't apply to Headings

[annezazu]

Description

In talking with Ana Segota (block theme author), she mentioned the following:

for now when u change the font family in typography it changes for everything except for headings. Maybe I’m missing something. It’s not a problem when u use one font family for the whole website but in case u use 2 different fonts it’s a bit tricky

I could replicate this with WordPress 5.9 beta 3! Tied to this, I noticed too that changing the font size under Styles > Blocks > Headings > Typography that it changes the size of all Headings and there's no room for granularity. This seems to be by design for now but happy to open another issue if not.

cc @oandregal

Step-by-step reproduction instructions

1. Open site editor.
2. Open Styles
3. Head to Typography > Font Family and try changing the font family.
4. Notice the Headings don't change.

Screenshots, screen recording, code snippet

headings.global.styles.mov

Environment info

• WordPress 5.9 beta 3
• No GB
• TT2

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

[Andrew-Starr]

It does seem strange that we can define typography for headings at the element level but not at the specific block level.

So in theme.json we can for example define the typography for the h2 element

"styles": {
  "elements": {
    "h2": {
      "typography": {
        "fontFamily": "",
        "fontSize": ""
      }
    }

and we can also define typography for the heading block

"styles": {
  "blocks": {
    "core/heading": {
      "typography": {
        "fontFamily": "",
        "fontSize": ""
      }
    }

but not specifically for the h2 heading block for example this does not work:

"styles": {
  "blocks": {
    "core/heading/h2": {
      "typography": {
        "fontFamily": "",
        "fontSize": ""
      }
    }

The result of this is that a theme can define heading(s) typography but like you say, the user is not able to change any of this in the editor, and is therefore stuck with whatever the theme decides.

I seem to remember an older version of Gutenberg did have the granularity controls, but then it was removed at some point.

[oandregal]

Looking at the designs of the typography panel at #36546, headings should be part of the Typography panel (top-level, not blocks):

Reading the PR that implemented support for some typography in the UI #36718 (comment) it seems that changing heading was moved for later (not part of the 5.9 scope).

[Mamaduka]

I am removing from the 5.9 board, based on @oandregal comment.

[bradhogan]

+1 on this. @oandregal's screenshot looks great. I'd also add a custom option in the Elements for Buttons if possible.

[annezazu]

With 6.1, a Headings element is introduced where you can control individual heading levels! Going to close this out as a result.