Improve Styles for Social Icons list placeholders

[colinduwe]

What?

Improves the appearance of the placeholders shown on the Social Icons list block.

Why?

#55296
The squares for the placeholders don't completely represent how the block will look once a user add actual social icons to the container block.

How?

A few minor style updates.

Testing Instructions

Insert a new Social Icons block. Remove focus from the block and observe that the placeholders have the correct gap between them.
You can also apply the the logos only and pill shape block style variations and the placeholders will appare the same size and shape as actual inner blocks.

Note that setting the icon color will not change the colors of the placeholders.

Testing Instructions for Keyboard

Screenshots or screencast

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @colinduwe! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[apeatling]

Can you provide a before/after image so it's clear we're looking at the right thing? Thanks.

[colinduwe]

Sure thing. First is the initial state of the placeholder. Note that there is no gap between placeholder items:

With this patch they use the theme.json gap:

Currently if you choose the "icons only" style variation there is no gap and the placeholders are too small:

Now they are the spaced and correct size:

Similar if we choose the pill style:

Corrected in this PR:

If you set a background color:

Now it is the correct color

Finally, if you choose icon only and set an icon color

Now it takes the icon color

Note that if you use the default or pill styles and set an icon color and a background color it displays the background color for the placeholders. Only if you choose the icon only style and set an icon color does the placeholder display in the icon color.

[colinduwe]

I'll also note that because the placeholders are actually contained within a single list item in the social icons list container they do not respond to the block spacing controls. Let me know if you'd like me to pursue that as well.