Twenty Twenty: Fix social icons margin in widget area

This is supposed to fix the margin on the social icons in the footer widget for Twenty Twenty

Trac ticket: https://core.trac.wordpress.org/ticket/56474

This is supposed to fix the margin on the social icons in the footer widget for Twenty Twenty

Trac ticket: https://core.trac.wordpress.org/ticket/56474

[sabernhardt]

Thanks for the report and the patch!

If someone has customized the margin for li elements in other widget blocks, adding :not() to the theme's .widget li selector would override their custom margin.

Adding something like this in a new "Widget: Blocks" sub-section (perhaps following "Widget: Text" under "Widgets") might be better:

.widget .wp-block-social-links li {
	margin-top: 0;
}

[sabernhardt]

Before 5.9, the block-library stylesheet set the margins for these icons, and that had higher specificity than .widget li:

.wp-block-social-links .wp-social-link.wp-social-link.wp-social-link {
  margin: 4px 8px 4px 0;
}

[grandeljay]

Thanks!

I've changed the selector to .widget .wp-block-social-links li now and it seems to display properly.

[sabernhardt]

removes the top margin from social icons in widgets

[sabernhardt]

Social Icons block and other list widgets before the patch

[sabernhardt]

Same widgets with 56474.diff

[sabernhardt]

The top margin on .widget li was in the theme early (and ​increased before the theme became available), so I think that needs to stay.

56474.diff​ removes the top margin from social icons in a widget area, without affecting other list widgets.

[audrasjb]

Before patch

[audrasjb]

After patch

[audrasjb]

Thanks for the patch and for testing so much use cases @sabernhardt!

I added my own test results and it works fine. Self assigning for commit.

[audrasjb]

In 54167:

Twenty Twenty: Fix Social Links widget alignment.

This fixes an alignment issue with the Social Links block used in the context of a widget area.

Props grandeljay, sabernhardt.
Fixes #56474.