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

[SainathPoojary]

Hey @afercia,

I attempted to reproduce the issue, and it appears that the social icon placeholder has been updated. As a result, the mentioned issue should no longer occur.

<li className="wp-block-social-links__social-placeholder">
	<div className="wp-block-social-links__social-placeholder-icons">
		<div className="wp-social-link wp-social-link-twitter"></div>
		<div className="wp-social-link wp-social-link-facebook"></div>
		<div className="wp-social-link wp-social-link-instagram"></div>
	</div>
</li>

[afercia]

@SainathPoojary yes thanks for pointing out it has changed, I think it happened in #64877

Worth noting the social icons block shows those colored squares but, when it is selected, it shows a plus button that replaced the previous label 'Click plus to add' and the old plus button.

So that, when it's selected, I can still reproduce that changing some of the styles settings does affect the editing UI. For example, changing the horizontal margin does break the editing UI of the placeholder. See screenshot:

To me, this appears to be a broader potential issue. Style settings should be applied on the preview of the block. They should not be applied to the UI to edit the block.