Components: assess Heading styles in the context of the recent design updates

[ciampo]

As originally discussed in #35400 (comment), it looks like the Heading component may currently not fit the needs of the most recent designs (specifically for the Global Styles sidebar, in this case)

We should assess the situation and, if necessary, decide how to proceed in order to have a component offering the new heading styles needed for the Global Styles sidebar UI.

Examples that came up recently:

• ToolsPanel: Remove hardcoded classnames #35415 (comment)
• Enable always on burger menu for responsive navigation menus. #35568 (comment)
• Fix-up Post Editor’s preferences modal #35369 (comment)

Useful links:

• Component's definition and code: https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/heading
• Storybook example: https://wordpress.github.io/gutenberg/?path=/story/components-experimental-heading--default

[ciampo]

@mtias and @jasmussen , do you have any insights on this?

[jasmussen]

In exploring the sidebar/inspector/global styles design that is being finalized in #34574, it seems clear that the uppercase styling is used both for input labels and for some subheadings, so it appears to be more of a style than a component, perhaps somewhat comparable to how we have a help-text style (which is 12px font size, default font weight, default text case). CC: @pablohoneyhoney in case he has nuance to add.

[ciampo]

Are you suggesting we introduce variants to the Heading component?

In general, I think that if we want the Heading component to be used for all headings, we may need to:

• define clearly all of the allowed "heading" styles
• update the Heading component to support these styles
• refactor the code for all headings to use the Heading component

Another example of where a heading is required (but doesn't match necessarily the "heading" styles) is ToolsPanel (see related conversation #35415 (comment))

[jasmussen]

I'm not necessarily suggesting anything in specific here, only providing context to help a path forward. It's possible that it could exist purely as a heading level style (such as the H3 style), but I do suspect that there might be contexts where the subheading style needs a higher heading level, but still the visually lower styling (such as when showing the contents of a particular panel in a popover opened by the block toolbar).

[ciampo]

Absolutely, I think we should definitely be able to decouple the HTML semantic (e.g. h1/h2/h3/h4/h5/h6) from the visual style

[jasmussen]

I also think we want to end up with very few styles overall, so as to find a good balance, and obvious implied usage guidelines.

[ciampo]

Another example where updated Heading styles would have turned useful (thank @jasmussen) #35568 (comment)

[ciampo]

A few more examples:

• the ColorGradient and ColorPalette headings added in Update: Show all color and gradient origins (core, theme, and user). #35970
• Update: Implement new color palette editor component #35783 (comment)

[ciampo]

See also the Subtitle heading discussed in #36718 (comment)