Social Icons having top and bottom margin issue in the editor with classic themes

[viralsampat-multidots]

Description

Hello Team,

I have checked "Social Icons" block and found that the icons contains extra "top" & "bottom" margin space into the editor side.

I have checked it into the various theme, It happens in the bundled themes from Twenty Ten to Twenty Twenty, plus other classic themes.

But, front-end it looks good. So, I think that it should be same on both(Front-end & Back-end)sides.

For better understanding, here I have attached its screenshots.

Thanks,

Step-by-step reproduction instructions

• Type / to choose a block
• Select Social Icons block
• Add number of social icons and its link
• Now, we can see the extra top & bottom margin into the icons on the editor side
• Save the changes and publish the page.
• View the editor side & front-end side.
• Just see the difference

Screenshots, screen recording, code snippet

Environment info

• WordPress version: WordPress 6.7.1 running
• Theme: Twenty Nineteen
• Browser: Google Chrome, Version 132.0.6834.160 (Official Build) (arm64)
• Device: MacBook Air M1
• OS: macOS 15.3 (24D60)
• Gutenberg plugin: Version Version Version 20.2.0

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[singhakanshu00]

Hi @viralsampat-multidots

Upon investigation, this problem occurs for the theme from Twenty Ten to Twenty Twenty due to styles coming from classic.css file

Will raise the PR with the solution for the fix.

[t-hamano]

Thanks for the report.

I think this is a regression caused by #64883.

In #64883, the element to which the useBlockProps hook applies was changed from the li element to the button element. As a result, the .wp-block CSS class was applied to the button element, causing the element to have unintended default margin for the classic theme:

gutenberg/packages/edit-post/src/classic.scss

Lines 24 to 30 in 594a4d8

	html :where(.wp-block) {
	max-width: $content-width;
	// Provide every block with a default base margin. This margin provides a consistent spacing
	// between blocks in the editor.
	margin-top: $default-block-margin;
	margin-bottom: $default-block-margin;