Twenty Twenty-Four: Updating Text colour in group blocks isn't working for Heading block with WP 6.4 and TT4 theme

[rajinsharwar]

Updating Text color in group blocks isn't working for the Heading block with WP 6.4 and TT4 theme. I tested out the thing in WP 6.3.2, and TT3 theme, and the issue was not happening there. Please see the video below for the details:
​https://somup.com/c0XinFg6on

Steps:

1. Try to add the Heading Block.
2. Wrap it in a group.
3. In the Settings of that Group, change the background color.
4. Now, change the text color as well. You will see that though the BG color got updated, the Text color of that heading did not.

After further checking, found that this is something happening with the TT4 theme only. so, the issue doesn't happen even though I got WP 6.4 and TT3. It only happens when the theme is TT4.

[rajinsharwar]

UPDATE: The "Search results Title" block isn't working as well. Same result, working with WP 6.3.2 and TT3, but not with WP 6.4 and TT3

[hellofromTonya]

Reproduction Report

This report validates that the issue can be reproduced.

Environment

• OS: macOS
• Web Server: Nginx
• PHP: 7.4.1
• WordPress: 6.4-RC4
• Browser: Firefox
• Theme: Twenty Twenty-Four (TT4), TT3, TT2
• Active Plugins: none

Steps to Reproduce

1. Install WP 6.4 RC4.
2. Activate TT4 theme.
3. Create a new post in Posts > Add New Post.
4. Add a Heading block.
5. Add a Search Results Title block.
6. Group both of these blocks.
7. Open the Document Overview > List View UI and expand the Group block's list.
8. Select the Group block in the list.
9. In Block UI, select Styles > Text, change: 9.1. The background color to green. 9.2. The text color to white.

🐞 The group's background color changes, but the text color of each heading (h1-h6) do not change.

Expected Results

When reproducing a bug:

• ❌ Error condition occurs.

Actual Results

The color of headings (h1-h6) within a group:

• TT4: Reproduced: the text color does not change ❌

• TT3: Text color does change ✅

• TT2: Text color does change ✅

Notes

• Am able to reproduce the bug ✅

• Affects all h1-h6 headings within a group when attempting to change the Group's text color 🐞

Test Report Icons:
🐞 <= Indicates where issue ("bug") occurs.
✅ <= Behavior is expected.
❌ <= Behavior is NOT expected.

[hellofromTonya]

Hello @rajinsharwar,

Thank you for reporting this issue.

I can reproduce the issue. It does happen with the TT4 theme. TT2 and TT3 on WP 6.4 RC4 both work as expected.

TT4 Scenario:

• A Group has blocks with a heading (h1-h6).
• The text color of the Group itself is changed.

When this scenario happens, all h1-h6 within the Group do not render the text color change.

In looking at the styles within the browser's DevTools, these h1-h6 headings have a text color assigned to them. These are assigned in the theme's theme.json file in the "styles > "elements" > "heading" section:

"heading": {
	"color": {
		"text": "var(--wp--preset--color--contrast)"
	},
	"typography": {
		"fontFamily": "var(--wp--preset--font-family--heading)",
		"fontWeight": "400",
		"lineHeight": "1.2"
	}
},

It appears to be specificity.

I wonder:
How common is this scenario?

If a highly frequent scenario, then it may influence when the fix needs to happen.

Right now, I'm thinking this fix could occur in 6.4.1, rather than blocking 6.4.0 release.

Pinging the TT4 leads for their insights @luminuu @onemaggie.

[hellofromTonya]

Also tested an image with a caption within a group. The caption also does not get the Group's text color change.

So a Group's text color change needs to be checked against all the different elements.

[wildworks]

I would like to emphasize that this issue is not the first to occur in WP6.4. For example, if you enable TT2 in WP6.2 and apply any color to styles.elements.heading.color.text in theme.json, you should be able to reproduce the same problem.

Personally, I think the behavior that the style of the child (Heading block) takes precedence over the style of the parent (Group block) seems correct from the perspective of the CSS specification.

In WP6.4, it is now possible to target headings inside some blocks. You should be able to override the color by applying the text color from the Group block's Heading panel.

Related Gutenberg PR: ​https://github.com/WordPress/gutenberg/pull/49131

@poena may be more knowledgeable on this point.

[wildworks]

Apply color to headings inside the Group block

[onemaggie]

This is not a bug in the theme, but how the editor works. If any changes should be made, it should be upstream. I think this is the issue that reports this situation: ​https://github.com/WordPress/gutenberg/issues/51671

[luminuu]

I have to agree with @wildworks, it is reproduceable in 6.3 and TT3 and TT4, if the heading gets a color assigned. So this is not an issue with TT4, rather an issue with Gutenberg.

[luminuu]

About the severity, I'd say since we don't have headings in groups with such different background color in TT4, it's not a blocker for 6.4. However I'd consider it an issue down the road when people start building and experimenting with TT4 after the release and I can definitely see it happen.

I've left an additional comment in the issue Maggie posted to link back to this issue.

[hellofromTonya]

Aha thank you @luminuu @onemaggie @wildworks. This is not a TT4 issue. That makes good sense. As I noted in comment:4, TT4 is setting the heading color style, whereas TT2 and TT3 are not. Didn't occur to me the issue is upstream :facepalm:

TIL - thanks @wildworks for sharing these insights:

In WP6.4, it is now possible to target headings inside some blocks. You should be able to override the color by applying the text color from the Group block's Heading panel.

Related Gutenberg PR: ​https://github.com/WordPress/gutenberg/pull/49131

As @onemaggie pointed out, there's already an issue opened for this ​https://github.com/WordPress/gutenberg/issues/51671.

I'll close this ticket as reported-upstream where the discussion and resolution can continue there.

@rajinsharwar might be helpful if you could share your findings in ​the GB issue.