Description

Props: originally reported by @Smit2808 on Trac #56334 (smit08 on WordPress.org)

When setting the social icon block to align center, the icons remain aligned to the same side as text (left in English).

The flex-start justification assigned to the container overrides what is in the block-library stylesheet.

/* inline */
.editor-styles-wrapper .wp-container-0 {
  display: flex;
  flex-wrap: wrap;
  gap: var( --wp--style--block-gap, 0.5em );
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
/* block-library/style.css */
.wp-block-social-links.aligncenter {
  display: flex;
  justify-content: center;
}

Step-by-step reproduction 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, screen recording, code snippet

In the editor, the social icon block is not centered as expected:

On the front side, the social icon block is working properly in center alignment:

The browser inspector shows that this block has justify-content: flex-start instead of center:

Environment info

• Themes: Twenty Twenty-Two and TT1 Blocks
• WordPress: 6.0.1
• Gutenberg: 13.2.2, 13.8.1, and without the plugin
• Browser: Firefox 13.0.1
• OS: Windows 10

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes