fixed the social icon block alignment issue

[Smit2808]

What?

Social icons block has center align issue in some themes like Twenty Twenty-Two and TT1 Blocks. And by discussing with core member @sabernhardt, we conclude that this issue is of block not of the theme.

PR will fix: #43048

How?

In themes like Twenty Twenty-Two and TT1 Blocks, the justify-content: flex-start; style is added to the container class so it was overriding the social icon block center CSS.

/* block-library/style.css */
.wp-block-social-links.aligncenter {
display: flex;
justify-content: center;
}

So to fix this issue, I created a strong hierarchy to override the justify-content: flex-start; style.

Testing Instructions

1. Activate the Twenty Twenty-Two theme.
2. Create a new post and insert a social icon block. Note: If you add the social icons block in the Site Editor, the option to align left/center/right is not always available.
3. Select "Align center" in the dropdown. This does not center the icons in the editor.

Screenshots or screencast

[sabernhardt]

Thanks for the PR!

1. CSS rules need a space between the selector and the opening curly brace.
2. The selector could be less specific. body .wp-block-social-links.aligncenter would be enough, though perhaps .wp-block.wp-block-social-links.aligncenter could be preferable.
3. This stylesheet had a fix for centered social icons in WordPress 5.9, which needed updating when the wp-block class was moved to the same element as wp-block-social-links. I recommend adding the new selector there instead of at the bottom.
   

   gutenberg/packages/block-library/src/social-links/editor.scss

   Lines 89 to 92 in 5444cb4

   	// Center flex items. This has an equivalent in style.scss.
   	.wp-block[data-align="center"] > .wp-block-social-links {
   	justify-content: center;
   	}

[Smit2808]

Hi @sabernhardt,

Created new PR #43120. And Done all the changes you told me. Please review it.

Thank you.

[sabernhardt]

Thanks! I do not have the setup to review that PR properly, but it looks good to me.