Fix: Extra top and bottom margin issue in Social Link block for classic theme below twenty twenty

[singhakanshu00]

What?

fixes #69098

Why?

• Extra margin top and bottom is getting added coming from classic.css file.

How?

• Added margin: 0 to editor styles for Social Link Block.

Testing Instructions

• Activate any theme below twenty twenty, this seem problem for the theme Twenty Ten to Twenty Twenty
• 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.

Screenshots or screencast

Before:

After:

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: singhakanshu00 <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: carolinan <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: viralsampat-multidots <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[Mamaduka]

@carolinan, @luminuu, do you think this needs to be fixed on the theme side? Fixing every theme conflict doesn't seem maintainable long-term, but I would defer to your expertise.

[carolinan]

It is possible that it is a theme issue, like with the pull quote issue, it needs testing first.

[t-hamano]

From what I've researched, it looks like this issue needs to be addressed in the social icons block itself.

See #69098 (comment).

[singhakanshu00]

Yes @t-hamano, so adding the margin: 0 to the button does the task. I don't know the idea behind changing the useBlockProps from li to button. If we can't reverse that, this will work as I have tested for the block themes as well ( >= twentytwentyone), and it doesn't causes any regression issue.

[t-hamano]

I don't know the idea behind changing the useBlockProps from li to button.

I think this is for accessibility reasons, see #64883. So it looks like we can't put the useBlockProps position back on the li element.