Social Icons: some social icons behave inconsistently when setting a background color

[afercia]

Description

When setting a background color, some social icons behave inconsistently thus making the 'global' background color that can be set to all the social icons at the same time inconsistent. Users are forced to do some extra editing and may be potentially confused.

Step-by-step reproduction instructions

• Edit a post and add a Social Icons block.
• To better understand this issue, enable 'Show labels' in the Settings panel.
• Click the 'Add block' plus icon button and then click 'Browse all' in the popover.
• From the inspector, add all the social links.
• You can skip adding an actual URL to the social links, this isn't strictly necessary for this test.
• At this point, the UI shows all the added social link. Screenshot:

• Observe that Goodreads, Link, Mail, and RSS Feed are the only ones to not have a custom background color. Togegher with Snapchat, they are the only ones to have a dark text color.
• Select the Social Icons block and go to the Settings panel > Styles.
• Set a dark icon background color.
• Observe that the text of Goodreads, Link, Mail, and RSS Feed stays dark and becomes barely visible.
• Observe the text color of Snapchat changed to white, instead. This is smart and makes sure the text

Screenshot:

• is visible with a dark background thus avoiding users to to any further editing.
• Instead, to make Goodreads, Link, Mail, and RSS Feed be visible, users will have to keep editing, which makes the icon background color setting a little confusing.

Notie that this inconsistency occurs also when showing only the icons. Screenshot:

Ideally, for consistency and for UI clarity and predictability, all social icons should work the same.

Screenshots, screen recording, code snippet

No response

Environment info

No response

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

[aaronrobertshaw]

Thanks for the detailed issue @afercia 👍

The inconsistency here stems from the default styles each social icon has set here or here.

Regarding the application of background and text colors for the block itself, that appears to be working as intended.

Ideally, for consistency and for UI clarity and predictability, all social icons should work the same.

I mostly agree that if the styles for each social icon were consistent in terms of light/dark text and background combinations, it would minimise some of the issues here. That said, it wouldn't completely solve the root problem.

If all the icons have a light text color by default, you could just set a light background color and face the same situation of illegible text. This is also the case more broadly, for example, enter some text in a paragraph block in TT4, then set a dark background color on that block and the text won't be seen either.

There are still going to be some cases where the additional color configuration will be required.

As the social icons blocks have an ad hoc implementation of colors rather than using the block support, it might be possible to add some "smart" logic here to automatically set a reasonable text or background color when the other is set (but not if the user has already made a selection). I'm not 100% sold that the added complexity would be warranted though 🤔

There is also some ongoing work around block style variations that would provide theme authors with extra tools to guide users towards color combinations that work well.

One other thing to note is that all the "branded" social icons currently match the brand colors. This includes Goodreads. That branding would be off if its font color is changed. The Link, Mail, and RSS Feed icons have a little more flexibility.

I think it would be good to get some design feedback here to clarify what the goal UX should be before exploring any possible enhancements.