Visualise whether each heading level is styled in the site editor

[Olein-jp]

What problem does this address?

Site editors are becoming very useful. In particular, the style book will be indispensable for adjusting the style of each block.

However, I am convinced that a little more visualisation of the individual styles for each level of the heading element would make it much easier to use and understand.

For example, if you go to Colours > Elements.Headings in the style book, you can switch between styles for ALL and other heading levels.

In the attached image, the colour is purple for h2. However, in the Style panel, you cannot visually determine whether you have specified a style for h2 here unless you switch to the h2 you are specifying.

Translated with www.DeepL.com/Translator (free version)

What is your proposed solution?

I therefore propose the style as shown in the following attached image.

I believe that by specifying a background colour (in this case, h2) when the styling is added, you can visually see that the styling is set here.

I can't imagine how to approach this technically, but I'd be happy to consider it as an idea.

[andrewserong]

Thanks for writing up this issue! That's a great point that it'd be good to be able to see visually whether or not any styles are applied. Since WordPress 6.2, there's already been some progress in this direction in the Gutenberg plugin for when colors are applied, which was rolled out in: #48893.

Now, when heading colors are updated, they're done so via a drop-down list, so it's visually clear when a color is set for a particular heading level. Here's a quick screengrab:

2023-05-10.10.56.55.mp4

From the sounds of it, that might resolve the issue from the colors side of things?

For other Typography styles that can be applied to Headings, it looks like the same issue as you've reported is at play on that screen:

I agree it'd be good to see if we can flag whether or not a value is set. I've added the Needs Design Feedback label in case any designers have feedback as to what would be a good approach at the Typography level.

[Olein-jp]

@andrewserong Thank you for triaging this issue.

We have not been able to verify the behaviour when Gutenberg is enabled.

I have a lot of respect for your work to make WordPress better, including Gutenberg.

I would be happy if you could use this as an idea for one of your activities.

[hanneslsm]

I fully agree and would also like to see this topic tackled.
Those discussions are somehow related:

• Design tools: Better handling of unset / inherited values #43082
• Styles: show a hierarchy of styles clearly (theme, user, global unspecific, global specific, local, etc) #49278

A visual indication for changes the users has made (at this particular level / opened user interface) would be very helpful.

[annezazu]

To better consolidate and focus the conversations, I'm going to close this out in favor of the issues mentioned above as they tackle the larger problem this specific issue is about. Since they are already referenced, when folks begin work on them, they will be cross connected and can be considered :)

Happy to reopen if folks have any specific reason for doing so.