Setting a link color on a parent block overrides icon and button colors

[ryelle]

Description

Setting a link color on a parent block overrides icon and button colors, but only on the frontend of the site.

Initially reported in WordPress/pattern-directory#235, can be seen (for now) on these patterns:

• https://wordpress.org/patterns/pattern/contact-and-social-links/
• https://wordpress.org/patterns/pattern/introduction-with-image-on-the-left/

Step-by-step reproduction instructions

1. Add a group block, with some content including a link and a button
2. Set a link color on the group
3. Set a different text color on the button
4. The custom button color works in the editor ✅
5. Save, view on the frontend
6. The button text color is now using the link color ❌

Also happens with social icons.

Expected behaviour

The editor behavior seems correct - the button text should use the set text color.

Actual behaviour

The injected style in .wp-elements-<uuid> overrides the button's inline style, because it's set to !important.

Screenshots or screen recording (optional)

Editor	Frontend

Code snippet (optional)

Block code

<!-- wp:group {"style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}}} -->
<div class="wp-block-group has-link-color"><!-- wp:paragraph -->
<p>Start the group. <a href="https://wordpress.org" data-type="URL" data-id="https://wordpress.org">Link</a></p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"yellow","textColor":"black"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-black-color has-yellow-background-color has-text-color has-background" href="https://wordpress.org">Link Button</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:paragraph -->
<p>End group</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

WordPress information

• WordPress version: 5.7.3-alpha
• Gutenberg version: 11
• Are all plugins except Gutenberg deactivated? No
• Are you using a default theme (e.g. Twenty Twenty-One)? Yes, Twenty Twenty-One

[richtabor]

Came here to report the same issue.

[Sandstromer]

The "fix" for this is to add more !important rules to ensure the icon color and button text color display as intended.

However this would not be a proper fix as we then get into a seemingly never ending pathway of adding !important whenever new issues like this come up.
Have we already gone too far down this route? Is it too late to rethink the use of !important from the ground up?

[oandregal]

I've got a potential fix at #34689 and would like help in testing it. Does the PR list all the use cases that we need to take care of?

[mkkeck]

The "fix" for this is to add more !important rules to ensure the icon color and button text color display as intended.

That's not the perfect solution.
If there some !important used on nested selectors for example .foo .bar > a, perhaps the fix with !important still won't work.

However this would not be a proper fix as we then get into a seemingly never ending pathway of adding !important whenever new issues like this come up.

Yes, I call this the "hell of !important".

Have we already gone too far down this route? Is it too late to rethink the use of !important from the ground up?

Removing important on initial styles in core should help. See also #34575.

I've seen a css framework wich uses tons of classes for elements to adjust styles:

<style>
.border-color-blue ...
.text-color-blue ...
.bg-color-white ...
.text-underlined ...
.border-width-1 ...
.border-solid ...
</style>
...
<a href="#more" class="
  border-color-blue 
  text-color-blue 
  text-underlined 
  bg-color-white 
  border-width-1 
  border-solid
">...more</a>

But the code above is most flexible for all things. Perhaps this may be a solution for core styles.