Repository navigation
Social Icons having top and bottom margin issue in the editor with classic themes #69098
Description
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
Activity
singhakanshu00 commentedon Feb 7, 2025
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 commentedon Feb 10, 2025
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