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.

[cbravobernal]

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.

Thanks for your contribution! It would be great if you can fix that too 💪

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @apeatling.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: apeatling.

Co-authored-by: colinduwe <colind@git.wordpress.org>
Co-authored-by: cbravobernal <cbravobernal@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[cbravobernal]

I tested and works as expected.
Updated with last trunk. It would be great to have a second pair of eyes though.

Need to re-check

[cbravobernal]

I've been comparing with trunk again and seems the issue is not there anymore.
@colinduwe can you please re-check if this PR is finally needed?

Sorry for the trouble! 😅

[colinduwe]

I just opened https://playground.wordpress.net/ and tested 6.6 and 6.7-beta-2 and Gutenberg 19.4.0 and the placeholder is unchanged. If I look at the edit.js file for this block here

gutenberg/packages/block-library/src/social-links/edit.js

Lines 92 to 100 in 26e108d

	const SocialPlaceholder = (
	<li className="wp-block-social-links__social-placeholder">
	<div className="wp-block-social-links__social-placeholder-icons">
	<div className="wp-social-link wp-social-link-twitter"></div>
	<div className="wp-social-link wp-social-link-facebook"></div>
	<div className="wp-social-link wp-social-link-instagram"></div>
	</div>
	</li>
	);

it looks unchanged.

[cbravobernal]

I just opened https://playground.wordpress.net/ and tested 6.6 and 6.7-beta-2 and Gutenberg 19.4.0 and the placeholder is unchanged. If I look at the edit.js file for this block here

gutenberg/packages/block-library/src/social-links/edit.js

Lines 92 to 100 in 26e108d

	const SocialPlaceholder = (
	<li className="wp-block-social-links__social-placeholder">
	<div className="wp-block-social-links__social-placeholder-icons">
	<div className="wp-social-link wp-social-link-twitter"></div>
	<div className="wp-social-link wp-social-link-facebook"></div>
	<div className="wp-social-link wp-social-link-instagram"></div>
	</div>
	</li>
	);

it looks unchanged.

It looks unchanged, but I see that still, styles are working fine (background colors, icon colors and padding).

[colinduwe]

In your screenshot you've placed 3 real social link blocks inside the social links block so the placeholder isn't shown.

Here's an empty social links block with the pill shape and a background color selected (and the social links block deselected so you can see the placeholder):

[colinduwe]

To clarify, in all my screenshots at the start of the discussions I've shown 2 social links blocks, one above the other, both configured with the same style settings. The top social links block in each screenshot is empty. The bottom social links block in that same screenshot is configured with 3 social link blocks (twitter, fb, insta).