Social Icons in Sidebar are Misaligned on Certain Themes

[masperber]

Quick summary

On certain Classic and Hybrid theme, the first Social Icon in a Social Icons Block will be misalgined with the other. So far, this has been identified and reproduced on themes Independent Publisher 2 and Baskerville 2

Steps to reproduce

1. Create a site with one of the affected themes.
2. Add a Social Icons Block to the Sidebar and add at least 2 Social Icons to the block.

What you expected to happen

The Social Icons should all be aligned

What actually happened

The first social icon is raised up higher than the others.

Context

Customer report: 35563675-hc

Reproduced on a test site.

Platform (Simple, Atomic, or both?)

Simple, Atomic

Theme-specific issue?

Independent Publisher 2 and Baskerville 2. Other themes may be affected, but haven't been identified yet.

Browser, operating system and other notes

No response

Reproducibility

Consistent

Severity

All

Available workarounds?

No but the platform is still usable

Workaround details

No response

[masperber]

• [ ] 5543483-zen for followup

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 5543483-zen
• [ ] 6067409-zen

[Robertght]

📌 HOUSEKEEPING

• Labels ✅
• Priority ✅
• Replicable on Core - No(this varies because not all themes are on WordPress.org)

📌 SCRUBBING

• Tested on P2 ✅
• Tested on Simple ✅
• Tested on AT ✅
• Tested on Self-hosted - no

📌 FINDINGS/SCREENSHOTS/VIDEO

• I can confirm these classic themes mentioned above have this problem.
• I tried replicating with others, such as Dara, Karuna or Ixion, but no dice
• The social icons block also behaves erratically on other themes. Example(Libre 2, Revelar or Textbook):

@jeffikus could this be addressed in bulk as a component review only for the social icons widget?

📌 ACTIONS

• Marked as Triaged for Themes
• Transferred to https://github.com/Automattic/themes/

[Robertght]

More on this, Lovecraft has a similar issue as well. A temporary fix is to use this CSS code:

.footer-widgets .wp-block-social-links li {
    padding: 0;
}

[carolframen]

Another one on Lovecraft #6067409-zd they are on the free plan, so they can't use the CSS workaround

[jerrysarcastic]

Also reported in https://wordpress.com/forums/topic/social-icons-misshaped/?view=all and confirmed on my test site. Screenshot of what I see:

This CSS worked for me as a temporary fix for the site owner:

.widget:not(.widget_text) ul li {
    padding: 0;
}