Description

When the Social Icons block is oriented vertically, the individual links span the entire width of the content area and do not maintain their correct width. This issue appears to be a regression in the latest version of Gutenberg since the issue is not present in WordPress 5.9 RC2.

What's strange is that the CSS provided by the Social Icons block has not changed in recent months, so this issue must be caused by something else. I have not been able to isolate it. The root of the issue is that in the editor, align-items: flex-start; is added to the block. On the frontend, this CSS does not exist. This PR simply adds it back.

How has this been tested?

1. Use Twenty Twenty-Two with Gutenberg 12.4 RC1 and WordPress 5.9 RC2
2. Add the Social Icons block with a couple Social Icons
3. Orient the block vertically. See that it displays correctly in the Editor
4. Switch to the Frontend and see that with this PR the icons display correctly as well, without this PR they render like the screenshots below

Screenshots

Without the fix in this PR with Gutenberg 12.4 RC1 active in the TT2 theme:

With the fix, the icons display correctly:

Types of changes

Bug fix

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).
• I've updated related schemas if appropriate.