Fixed Social Icons shape, and horizontal and vertical alignments (fixes #28340)

[Arash-11]

Fixes #28340

Original issue was that when adding Social Icons to a Navigation block, the icons would be oblong instead of circle. The icons only misshapened when size Small or Normal was selected.

I also noticed that when a horizontal Nav block was added, the social icons wouldn't align horizontally, and in a vertical Nav block, the social icons wouldn't align vertically.

[jasmussen]

Thank you for the PR! This is nice work! It does indeed fix the issue:

Using fit-content to avoid the oblong shape is also clever. However it makes me a bit nervous about adding that particular property, as in the past it has caused unforeseen consequences with regards to empty containers and such.

I dove in to look at the issue, and it appears primarily to be because the Navigation block is a flex container, which means the margin that's attached to each social link defines the shape:

.wp-block-social-links .wp-social-link.wp-social-link.wp-social-link {
    margin: 4px 8px 4px 0;
}

In flex containers, the auto keyword can be used to center items. And sure enough, if I do the following, it also works:

.wp-block-social-links .wp-social-link.wp-social-link.wp-social-link {
    margin: auto 8px auto 0;
}

The benefit to using the auto margin is that it will always be vertically centered in the navigation menu, regardless of how tall the navigation menu is.

What do you think?

[Arash-11]

Seeing your solution, I think using margin in this fashion is the best way to address this issue; this is so much more elegant.

I'll remove align-items: center and height: fit-content and instead add what you suggested. Thank you!

[jasmussen]

Congrats on your first PR! Going to merge this one for you.

[github-actions]

Congratulations on your first merged pull request, @Arash-11! We'd like to credit you for your contribution in the post announcing the next WordPress release, but we can't find a WordPress.org profile associated with your GitHub account. When you have a moment, visit the following URL and click "link your GitHub account" under "GitHub Username" to link your accounts:

https://profiles.wordpress.org/me/profile/edit/

And if you don't have a WordPress.org account, you can create one on this page:

https://login.wordpress.org/register

Kudos!

[Arash-11]

Thank you for helping a newbie like me and I'm happy I got an opportunity to work on this!