Separator color not working in front end

Hi there,

Can you clear and disable your caching plugin first?

Done

Which separator (1-4) are you referring to here?
https://www.screencast.com/t/hPhZAN5j2EP

The first one. It is the only one that is a <hr> tag. The rest are container borders.

Hi Gabriel,

Do you have a Global color with variable named “text” in Appearance > Customize > Colors.

See this for reference: https://share.getcloudapp.com/nOu92qe0

By WordPress default, the Separator block has a has-text-color class which in turn, if a color “text” is set, could override the color you set to it.

If you wish to override this via CSS, here is a code you may try:

hr.wp-block-separator {
    color: var(--primary) !important;
}

Here is an article with regards to adding CSS: https://docs.generatepress.com/article/adding-css/

Hope this helps! :)

Wow thanks. I could never have figured that out. What I ended up doing is renaming the variable to --contrast. Seems that this is indeed a side effect of Gutenberg since GeneratePress doesn't have a variable called --text out of the box.

I opened an issue at the Gutenberg repository.

You're welcome! Glad I was able to help! Feel free to reach out anytime if you’ll need assistance with anything else. :)

The Gutenberg team has concluded that this is a problem with GeneratePress and not WordPress or Gutenberg. Maybe someone from GeneratePress can comment on this? https://github.com/WordPress/gutenberg/issues/38729#issuecomment-1252421916

Can you share the link to the site once more for reference?

At the link in private information you can see that there's a separator block that has its background set to the --contrast color variable. But because another color variable with the name --text exists, it gets the overridden by the background color of the has-text-color CSS class.

The only solution I can think of is to change the name of the text global color.

In the meantime, I don't think the separater block is needed, as you can add borders to the GB container and headline blocks.

Thanks. I understand that there are workarounds for this. Just trying to figure out whether this is a bug in GP or Gutenberg.

I opened a GitHub issue with GeneratePress.

Thanks for reporting this to us.