Global Styles: Global heading color not being overridden by text color of the parent block.

[alaczek]

Description

The global heading color is not being overridden by text color set on parent block.

Step-by-step reproduction instructions

1. In Global Styles > Color set the Text color and Heading color.
2. Create a group block with a background and text color set.
3. Add a heading and a paragraph inside the group block.
4. Note that the paragraph text color is as set in the Group block settings, while heading text color is not.
5. To change the heading color, the color needs to be set directly on the Heading block.
6. If no Heading color is set in Global styles > Color, then the text color setting on the parent group block in the above scenario would work on both the heading and the paragraph.

I expected the text color setting on the Group block to apply to both headings and paragraphs (as it does when there's no global color setting for headings). Otherwise for a more complex pattern containing multiple headings, the color would have to be set for each individual Heading block which would be quite tedious.

Screenshots, screen recording, code snippet

https://www.dropbox.com/s/xpx51ynlg3tcsj7/headings_color_bug.mp4?dl=0

Environment info

• WordPress 6.2.3, Gutenberg 16, Theme: TT3
• Browser: FF 113.0.1

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

[aurooba]

Thanks for reporting this @alaczek! You're right that when the heading colour is set on the Global Styles level, setting a colour for text on the group level doesn't affect any headings inside it, since Global Styles treats headings (and links, captions, and buttons) as separate from the text.

However, your point is valid about it being tedious to have to set the heading colour one by one inside a group block in this scenario. We discussed this in today's bug scrub, and are looking into what next steps could look like to ease this pain point.

[Mamaduka]

@scruffian, @carolinan, maybe you can provide additional context here.

[scruffian]

One option we could consider is making the selectors for colors a bit more powerful, so:

.has-base-color {
 color: var(--wp--preset--color--base) !important;
}

would become

.has-base-color, .has-base-color * {
 color: var(--wp--preset--color--base) !important;
}

[carolinan]

I think this is a situation where different users will want the colors to work differently, and changing them now will impact existing websites in ways that are unexpected for users.

-Only palette colors has a class name that identifies the color.

[alaczek]

I think this is a situation where different users will want the colors to work differently

That may be true, but current behavior still feels inconsistent and something that could be improved in some way.

I was totally surprised that the text color setting did not apply to headings anymore once I changed headings color in global styles, when previously it did (before touching global styles). This means if I decided to customize my headings color via global styles, I'd then have to go through the whole site and manually set headings color whenever it's inside a group block.

By the way, the same isn't true for text - if I change global text color, it will still abide color rules set in the parent group block. I know there are logical reasons for this behavior but from a user point of view if feels like a bug. If group block had a setting for headings color (like it has for links), then it wouldn't be as much of an issue, but as it is I'm expecting the text color setting to work on both headings and paragraphs, since both are text.

[carolinan]

And the next user would be forced to do the same, they would need to go and manually change any heading that was previously styled from the Styles sidebar.

[carolinan]

Unless this is a regression from 6.2?

[carolinan]

There is this PR, but I don't think it solves the issue the way you want.
It adds the heading option to the Styles > blocks > group > colors. But not to the group block settings in the block editor.
#49131

And I don't think it is going into WP 6.3 since it is milestoned with Gutenberg 16.2.

[luminuu]

Cross-linking this Trac issue that was raised regarding 6.4 and TT4: https://core.trac.wordpress.org/ticket/59822

TT4 sets a color in theme.json for headings in styles -> elements -> heading -> color. If a heading is put into a group block and the text color for the group block is changes, it does not update the headings color.

Previous default themes TT3 and TT2 did not experience this issue as the color was never set in theme.json.

[carolinan]

I am still not convinced that this is a bug. I think the style on the individual block type has to be used, not the style on the parent block. I would consider it broken if I had styled my blocks and that style was not used.

[scruffian]

I agree with @carolinan, I don't think this is a bug.