Social Icons block: reduce or remove gap CSS for logos-only style

[sophiegyo]

It'd be lovely if we could either reduce the gap CSS for the social icons ul container, or potentially reduce the padding on either/and the li and a elements when the block is set to show logos only.

I was pointed to this PR which refers to the spacing between icons in the block: #34493

When you set a Social Icons block to show as logos only, the same gap: 0.5em applies:

As @jasmussen mentioned in that PR, the gap ends up pretty big now - it looks fine when any other style (eg: default) is selected though:

What is your proposed solution?

Could we reduce or fully remove that gap CSS for logo-only styles? The gaps are decidedly smaller without it:

[jasmussen]

Nice one, I can take a look. Here are the two styles, side by side:

The gap is actually the same, but the social logos definitely feels more spaced out:

Exactly as you say, it's because the logos only version has an extra 4px all around, making the total icon 8px taller on both axes. If I remove that padding, it looks like this:

Would that be good?

[jasmussen]

#35586 fixes this one. In addition to making the spacing smaller, it also increases the icon size a little bit. That was the original intent, and appears to have been lost in one of the refactors. Happy to revisit that one if need be.

[sophiegyo]

#35586 fixes this one. In addition to making the spacing smaller, it also increases the icon size a little bit. That was the original intent, and appears to have been lost in one of the refactors. Happy to revisit that one if need be.

Oh, increasing the icons a bit may be worth it! There is both a margin set both on the a element inside the li and on the li itself within the ul. I didn't check closely if those two margins also exist for blocks where styles other than logos only, but they're definitely also helping to contribute to the larger gap. I was wondering if adjusting the margin on both a and li as well would be worth it - what's your opinion?

[jasmussen]

I was wondering if adjusting the margin on both a and li as well would be worth it - what's your opinion?

In the latest version of the block editor, those margins :should: be removed entirely and replaced by gap, which is a more ergonomic way of spacing the items out. I noticed the PR I created has been approved, so I'm tempted to land it, but I'm always happy to follow up on any side effects or missing pieces. What do you think?

Edit: I'm going to go with that for now, but I'm easy to find 👌