Buttons & social links often show the wrong text/icon color

[kjellr]

Buttons & social links often show the wrong text/icon color in the pattern preview.

Examples:

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

Editor	Frontend Preview

Editor	Frontend Preview

[coreymckrill]

From #266 (comment)

I'm pretty sure that's a gutenberg bug with custom link colors, but haven't tracked it down yet.

@ryelle is this the issue you were thinking of?

[ryelle]

I don't think that's exactly it, I'll see if I can replicate outside of the preview iframe. The issue I see here is this important style is overriding the links in the icon, even though the icons have colors set locally. The output HTML looks like this:

<li style="color: #FFFFFF; background-color: #000000; " class="wp-social-link wp-social-link-twitter wp-block-social-link">
  <a href="https://twitter.com" aria-label="Twitter: https://twitter.com" class="wp-block-social-link-anchor"> <...svg...></a>
</li>
...
<style>.wp-elements-60ef5bd1316b8 a{color: #000000 !important;}</style>

[ryelle]

I was able to reproduce it outside of the pattern directory, so I've made an issue in Gutenberg for it: WordPress/gutenberg#33437.

Closing this issue for now, although once it's fixed in GB we might need to update these patterns.