Social Icons - icon color overridden by parent group container link color

[Sandstromer]

Description

When adding Social Icons within a Group block, the icon color is overridden by the link color set at the parent group level.

This only happens on the frontend, in the editor the icon displays correctly with the icon color.

Step-by-step reproduction instructions

1. insert a Group block, set Link Color for this group block
2. add a Social Icons block within the group
3. change the Icon Color from the default to any color other than the parent group link color
4. in the editor the icon color is correct
5. view in frontend and notice how the icon color is incorrectly rendered with the link color of the parent group block

Screenshots, screen recording, code snippet

Editor view:

Frontend view:

Environment info

WP 5.8
Gutenberg 11.4.1

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[getdave]

Confirmed. I was able to replicate this. It's due to the usage of currentColor on Social Icon SVGs and the icon color setting not being applied.

Needs fix.

[getdave]

Seems to be due to !important on this CSS rule which is injected into the DOM as a <style>.

[mkkeck]

If css elements referenced correct, then the !important flag is not required.

I think it has to do with merged styles, see #34575, why there now always the !important is required.

[Sandstromer]

Seems to be due to !important on this CSS rule which is injected into the DOM as a <style>.

Yes, using browser inspector, removing !important rule fixes this issue, and does not break the text link color either.

[getdave]

I suspect this could be coming from global styles? I did search on the entire GB codebase and found the only references were in global styles unit tests.

I've asked in Core Editor in Slack.

[getdave]

@oandregal Replied

It comes from the lib/block-supports/elements.php that takes care of creating the styles for the link color. In this case !important is used for user-provided styles to have higher specificity than any theme-provided styles (see PR).

In this case @oandregal how can we avoid playing specificity wars within the Social Links block?

[oandregal]

I'm going to close this in favor of #33437 Will continue the conversation there.