Gutenberg buttons text color bug

Hi there,

Can you link us to your site so we can see the code?

Thanks!

There you have: https://micafeteraexpress.com/borrador/

Thanks!

Hum.. seems the button color is overridden by the color set for links at customizer > colors > content > link.

We’ll see what we can do.

For now, try add this CSS ??

.inside-article a.wp-block-button__link.has-contrast-color {
    color: var(--contrast);
}

Ok, just a few more things:

– Doing tests I have verified that if you choose a color in hex from the color picker instead of choosing one of the theme colors the problem disappears. does this make sense? seems to have something to do with the theme colors.
– I have cleared browser and hosting cache several times and added this URL to cache exceptions to rule out cache issue.

I’ll add that CSS as a workaround, but I would like to know if the problem is caused by me or by the theme, Will you let me know your conclusions?

Thank you very much!!

– Doing tests I have verified that if you choose a color in hex from the color picker instead of choosing one of the theme colors the problem disappears. does this make sense? seems to have something to do with the theme colors.

Yes, it’s because when choose the hex color, the buttons block generates inline CSS. Inline CSS has the priority.

but I would like to know if the problem is caused by me or by the theme

It could be a bug of GP, we need to look into it some more ??

Ahhh, okay okay, got it.

Hum.. seems the button color is overridden by the color set for links at customizer > colors > content > link.

There’s one weird thing about all this…

If the button color is being overridden by the link color we should be seeing the var(–accent) color which is sort of yellow.

However, I am getting white text on normal and black on hover.

Thanks, I’m waiting for your answer ??

I am seeing the yellow color on my end, it matches the link color set in customizer ??
https://www.screencast.com/t/QNxReeFd

Oh yeah! you’re right! I’m seeing it exactly the same as you.

https://ibb.co/mhPgyn1

There isn’t much that can be done here without removing that value from the content link option. In order for the content link color option to work, we need to select links inside the parent container. This CSS is more specific than what the button CSS can do (as the button doesn’t know anything about its parent container).

So you can:

a) Remove that value from the content link option and use the regular body links, instead.
b) If you can’t use body links, remove the value from the option and write the CSS yourself exluding buttons:

.inside-article a:not(.wp-block-button__link) {
    color: var(--accent);
}

Hope this helps!

Thanks for stopping by @edge22

a) Remove that value from the content link option and use the regular body links, instead.

– Body link color normal: –accent
– Body link color on hover: –contrast
– Content link color normal: empty
– Content link color on hover: empty

https://ibb.co/mvC3YHt

This setting works for normal content links, but there’s still something missing…

The color on hover, visited, active and focus is white and I haven’t set that color in the customizer.

Look at this image:

https://ibb.co/vPN0ShQ

Thanks again!

That’s a default hover color set by WordPress 5.9.2 if you don’t set the hover color for it:
https://www.screencast.com/t/aZtGkgr26

Hello, I don’t understand you very well.

In Customizer > Colors > Buttons > Text, I have color var(–contrast) for the initial color and the color on hover.

How could the color of the hover, visited, active and focus be the same color as the initial color?

Thanks !!

Hi there,

When you added the Button to the page did you change its colors in the settings ?

https://www.screencast.com/t/peWSHsDK4

If so then you have overwritten the themes colors.
If you want the themes Colors > Buttons to apply then you need to remove the colors you set in the editor.

Hello again!

When you added the Button to the page did you change its colors in the settings ?

This is not exactly the problem. I don’t want the theme colors on the buttons. Exactly I want to override the theme colors from the settings.

Still I keep seeing strange behavior, let me explain…

• If I put the color of the button text in hex as #000000 the behavior is OK.
• If I put the color of the button text as var(–contrast) I see the color on hover, visited, active and focus as white and I haven’t set that color in the customizer. View image

Could you check the buttons on my website in the link I left above to see what I’m telling you? Any idea what’s going on?

Thank you very much.

• This reply was modified 2 years, 11 months ago by danigomu.
• This reply was modified 2 years, 11 months ago by danigomu.

#1 WP block-library styles loads this CSS rule:

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

https://www.screencast.com/t/iUmpvBL3M

So by default, all pseudo states for the core buttons swap the text to white.

#2 WP loads a list of default colors in global-styles-inline-css

https://www.screencast.com/t/gE05ZQI1FTh

And they all have !important:

.has-black-color {
    color: var(--wp--preset--color--black) !important;
}

So if you use one of those colors it overrides the pseudo CSS in #1.

#3 Whereas the CSS added for GP global colors DO NOT use !important:

.has-accent-button-background-color {
    background-color: #f3c500;
}

So the CSS in #1 is still applied.

So you will need to use CSS to change the behaviour of the core buttons.
Or wait until core finally get round to implementing this feature request:

https://github.com/WordPress/gutenberg/issues/4543