Separator color not working if --text variable is defined

[gabbsmo]

Description

If I specify a color on a separator I expect that to be shown on the frontend as it is shown in the backend.

I was completely taken by surprise by this.

See this original support issue in GeneratePress: https://generatepress.com/forums/topic/separator-color-not-working-in-front-end/

Step-by-step reproduction instructions

1. Install and activate GeneratePress theme
2. Specify a color in the customizer with the variable name --text
3. Add a separator element
4. Set a different color
5. The right color is shown in the backend
6. Publish
7. The --text color is shown in the frontend

Screenshots, screen recording, code snippet

No response

Environment info

Latest stable WordPress with no Gutenberg plugin.

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

[carolinan]

Hi!
Are you able to add any more information that can help show how to reproduce this?

The block does use the class has-text-color when a color is added, but WordPress does not apply a variable called --text to this class.

• Is --text the exact name of the variable you used?
• Can you provide the exact CSS you added in the additional CSS field? That way I can test it.
• Can you reproduce the problem in other themes?

The .has-text-color class can not be removed from the block. It is needed for the dotted style variation of the block, and for backwards compatibility with any themes or plugin that is already using it to style the block.

[gabbsmo]

Hi @carolinan!

The steps were written for the GeneratePress theme. I have clarified that no in an edit.

From what I understand however the bug should be reproducible by declaring a CSS variable called --text in any active theme.

[ndiego]

This issue was reviewed in today's Editor Bug Scrub. I replicated the issue when declaring a custom color in GeneratePress with the variable --text. All other variables worked, but there is some strange behavior with --text. That said, this does not appear to be an issue with Gutenberg or WordPress itself, but rather how the custom color classes are generated on the frontend by GeneratePress. I would reach out to their support forum to see if this is a bug they can correct.

In light of this investigation, I am going to close this ticket. But feel free to reopen if GeneratePress support directs you back here.

[diggeddy]

The issue here is two fold:

1. when you add a color to the separator block, core adds the has-text-color class to the block.
   See here, example shown from TwentyTwentyTwo theme

2. GeneratePress Color Pallet registers a CSS variable for each color in its pallet eg.

:root {
    --text: #ff0000;
} 

and writes the necessary has- utility class that are required for core blocks:

:root .has-text-color {
    color: var(--text);
}

So the problem here is that no matter what color is chose it seems the separator block is always given the has-text-color class.