[Resolved] Text color not applied to button block for not logged in visitors

[Gabriel]

I have added button to a page and specified text and background color on it. For some strange reason the text color (.has-text-bright-color) only wins when logged in to WordPress. When not logged in the default style in GeneratePress (.inside-article a) wins.

Is this a bug or have I done something wrong? Added screenshots and login information to staging site in private information.

[David]

Hi there,

does this only occur if the link has been visited ?

[Gabriel]

No, I don’t think so. It also occurs if I open the site in guest mode in Microsoft Edge, which means there is no history of visited links.

[Gabriel]

Now I see that the color CSS property is the expected white when the button link is visited.

I found the following in block-library/style.min.css:

.wp-block-button__link:active, .wp-block-button__link:focus, .wp-block-button__link:hover, .wp-block-button__link:visited {
    color: #fff;
}

Though this does not seem to be based on the .has-text-bright-color class from my settings in the editor. I don’t understand why the default link color is winning over the text color set in the editor.

[Gabriel]

It seems that to get a border width when using the outlined button style I must add a background color in the editor, but if I do link color wins over button text color.

[Fernando]

Hi Gabriel,

What’s the login link to your site?

[Gabriel]

Sorry. Forgot that. Added login link to private information.

[Fernando]

Thank you! One way to override the visited color is through adding this in Appearance > Customize > Additional CSS:

.wp-block-button__link:visited{
    color: #ec008c;
}

Another option is to use a GB Button Block and set the color through its Block settings.

[Gabriel]

I understand that is a workaround. But I wonder if this is a bug in GeneratePress. I think the look of the button should match that of in the editor.

[Gabriel]

I have updated a sandbox site (just WP and GP) that reproduces this issue, default colors overriding buttons colors set in the editor. See private information.

[Tom]

Hi there,

I believe the issue here is that WordPress adds the has-text-color class to the core button if you’ve specified a text color.

You’ve also added a global color to GeneratePress named text, which is generating the has-text-color variable with that color (black) after the base-3 color you’ve specified for the button.

The easiest fix here is to rename your text variable to something else.

Let me know if you need more info 🙂

[Gabriel]

Hi Tom,

I updated the page now so that there is no “text” color variable. At first that fixed the issue. But then I realized that I had no link color set in the customizer. After setting a link color in the customizer I have the same behaviour as in my OP. Link color wins on the button until the link is visited.

[Ying]

Hi Gabriel,

As you already use the GenerateBlocks plugin, why not use the GB Buttons block instead of the WP buttons block?

It should fix this issue.

Let me know!

[Gabriel]

I am sure that for fix it. At this point I see this thread as more of a bug report. Just want confirmation on whether this is something with core blocks that should work in GeneratePress, since it seems to work correctly in the editor, just not in the front end if the link is not visited.

@Tom If you can confirm that this is a bug, then I am happy to move this to a Github issue and close this topic, if you prefer.

[Tom]

This is a known issue which we can’t control, unfortunately. When you set a link color in the Customize > Colors > Content area, it creates CSS that is specific to the content area: .inside-article a

This is more specific than the CSS WordPress sets for the core button:

.has-text-bright-color {
  color: #ffffff;
}

The best thing to do here is to remove the Content Link color and use the link color in Customize > Colors > Body.

Hope this helps 🙂

[Author]

Posts