Social icons: Styles meant for front end disrupt the editing UI

[afercia]

Description

Splitting this out from #60032 (comment)

It appears that styles that are meant for the social links appearance on the front end actually disrupt the editing user interface on the editor. Also, it appears a theme.json styles > spacing > blockGap value does conflict with the UI in the editor, which it's something that should not happen.

Step-by-step reproduction instructions

• Set Twenty Twenty-Four as active theme.
• Edit a post or site, add a Navigation block.
• Add a couple links and a Social Icons block to the Navigation.
• The Social Icons block will show a placeholder text Click plus to add followed by a plus icon button. Screenshot:

• Observe there's some excessive gap between the text and the plus icon button.
• In your browser dev tools, inspect the source and select the flex container that wraps the text Click plus to add and the plus icon: these are flex items within a flex container. Observe the container has a CSS class is-layout-flex.
• Observe the styles applied to the flex container. One of them is the following ruleset:

:where(body .is-layout-flex) {
    gap: 1.2rem;
}

• This ruleset appears to come from the theme.json styles > spacing > blockGap, and generated by the style engine.
• Expected: theme's CSS to not alter the editor UI (the placeholder).
• In the block inspector Social Icons settings, play with the Layout settings. For example. set orientation to vertical and Justify items center. Observe these settings get applied to the editor UI as well, which should not happen. Screenshot:

Screenshots, screen recording, code snippet

No response

Environment info

No response

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