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)

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