[Resolved] Separator color not working in front end

[Gabriel]

I added a separator block to the page and set a color on it. I can see the color change in the backend but not in the frontend. Lookin at it though DevTools that the color of he <hr> tag is overridden by .has-text-color in the generate-style-inline-css <style> tag. I have not been able to reproduce in a separate site unfortunately. Any idea what could be the cause of this?

Added a link in private information.

[Leo]

Hi there,

Can you clear and disable your caching plugin first?

[Gabriel]

Done

[Leo]

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

[Gabriel]

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

[Fernando]

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! 🙂

[Gabriel]

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.

[Fernando]

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

[Gabriel]

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

[Fernando]

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

[Gabriel]

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.

[Ying]

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.

[Gabriel]

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.

[Ying]

Thanks for reporting this to us.

[Author]

Posts