Outlined button block does not apply custom text color

[webmandesign]

Describe the bug
If I apply a text color on an outlined button, the color is not applied as default text color from the block itself is overriding it.

(The issue is described at WordPress support ticket.)

To reproduce
Steps to reproduce the behavior:

1. Add a button to post content.
2. Set the button style to outlined.
3. Set the custom (theme predefined) text color for the button.

Button now has the #32373c ($dark-gray-700) color instead of the custom theme-predefined color.

Expected behavior
Once a theme-predefined color class is set on button link, it should not apply any other text color.

Editor version (please complete the following information):

• WordPress version: 5.5
• Default editor, no Gutenberg plugin installed.

[webmandesign]

Also, is there any reason to force a specific text color on outlined button? I went ahead and adapted the pull request to inherit the text color of the container.

[webmandesign]

Hi guys,

Is there any update on this please? Are theme developers stuck by forcing custom theme color styles with very high specificity selectors or !important?

I can see this is not an isolated issue with block colors since WP5.5 update: check the issue #25290 for example.

Thanks for any feedback provided.

Regards,

Oliver

[tellthemachines]

I can no longer reproduce this issue in WP 5.5.3; it may have been fixed in the meantime. Can you confirm this, @webmandesign ?

[webmandesign]

Please note that it depends highly on a theme you are using. If the theme has sufficient enough selector specificity for its color classes, then you don't experience the issue. However, it's still present as the code in current Gutenberg v9.3.0 hasn't changed and it still forces a specific color (at least it should be set to inherit and not to a specific color).

Example:

If your theme followed Gutenberg handbook to apply Gutenberg support for color palettes, it is using pure, straightforward .has-strong-magenta-color { ... } selectors for the color classes (taken from example in Gutenberg handbook). So, selector is just a single class name.

In this case Gutenberg's Button block code takes over and overrides the simple class selector of the theme and thus not applying a custom color as expected.

Solution for theme author is to use higher specificity selector for the theme color classes such as html body .has-strong-magenta-color { ... }. My point is I don't think this should be necessary.

Besides, there is really no reason why Gutenberg applies specific color (color: #32373c;) on the outlined button. This should really be color: inherit; so it falls back to text color of the container.

My patch #24626 fixes both of these issues. Please check.

[tellthemachines]

Thanks for working on this @webmandesign ! Looks like we'll be going with #26707 instead, as it fixes the issue for both color and background-color on outlined buttons.

[webmandesign]

Hi @tellthemachines Thanks for the info. Please read my feedback on #26707 for more information.