Twenty Twenty-One: The color options for social icons does not work with the custom style

[poena]

The optional custom style for the social icons, twentytwentyone-social-icons-color
does not work well together with the new color options for the social icons blocks.

The icon color is dark grey both in the editor and front, no matter what color is selected in the palette. -This is correct if the user has selected the custom style.

But if an icon background color is selected, it is transparent in the editor and visible on the front.

The intention with the custom style, is for the background to be transparent both in the editor and front.

To reproduce this:
In the editor, add a social link block to a post or page.
In the block settings sidebar, select the Dark Grey style.
In the color settings, change the icon color and icon background color.
See that the background color does not change.
Save and view the front of the website.
See that the icons have a background color.

[poena]

Add the has-icon-background-color CSS class and set the icon background color to none.

[paaljoachim]

Testing

To reproduce this:
In the editor, add a social link block to a post or page.
In the block settings sidebar, select the Dark Grey style.
In the color settings, change the icon color and icon background color.
See that the background color does not change.
Save and view the front of the website.
See that the icons have a background color.

I added a Social Icons block.
Changed Styles to Dark gray. (Hides the placeholder icons making these invisible in the backend.)
Changed the Icon color to a light green and Icon background color to a dark color.
As the placeholder disappeared I am not seeing any icons.

Added Facebook and LinkedIn icons, and a fake link #.
Changed icon color to light red and Background color to dark blue.
Backend shows the default Dark gray style and not the light red and dark blue colors I added.
Frontend shows a dark blue background but no light red icons. (These are more dark grey/black)

Another test with the icon color in dark grey and the icon background color in a light blue.
Backend shows no color change.
Frontend shows light blue background and a dark grey icon color.

Testing patch.

Selected Dark gray style.
Added Facebook and LinkedIn links.
Dark gray Icon color. Light blue Icon background color.
Dark gray style overrides any user selected colors. Dark grey is seen in the backend and frontend.

I believe the patch is working as intended.

---

My impression is that if user selected a Dark gray style and then begins to adjust icon and icon background color that the style should automatically switch back to Default and that the user should see the colors they choose to use. That is though another matter for perhaps another ticket....

[poena]

It is confusing for users that their colors are not applied. They made a choice to select the dark grey style, but it is not communicated anywhere that the colors will not work (And there is no feedback from the color option itself).

register_block_style does not have a parameter for displaying a description, but the information can be added to the label.

[poena]

Update the block style label

[poena]

The updated label in the editor

[ryelle]

Hm, I wish there was a way to disable the color settings for this variation — the "logos only" style omits the background color setting, but that's ​hardcoded into the block.

The first patch works as expected, the color settings don't change anything. I'm not sure about changing the label, picking the style called "dark gray" should be enough to say it will be dark gray, but I don't feel too strongly about that.

[audrasjb]

Hi,

I tested the patch and it looks good to me.

• Before applying this patch, the background color is not applied in the editor but it's applied on front-end.
• After applying the patch, the background color is not applied anymore, and the block style label is more clear about the behavior of this style.

Marking this for commit

[audrasjb]

Ah just saw your comment @ryelle. I'm personally in favor of changing the label, but I wouldn't be opposed to keep it as it was before 52499-2.patch.

[paaljoachim]

I think we should just leave it as it is.

Having the text: Dark gray (Overrides color options) is a bit much text. Another option would be to change the text "Dark gray" to "Dark gray color" as it would give a hint that it will affect the color options. It might even fit on one line.

[ryelle]

In 50364:

Twenty Twenty-One: Remove background color from Social Links the dark gray style.

This block variation doesn't support custom colors, so allowing a background color leads to a mismatch between frontend and editor styles.

Props poena, paaljoachim, audrasjb.
Fixes #52499.