Social Icons: add top and bottom margin support

[ramonjd]

Description

This PR adds top and bottom margin support to the Social Icons block 🎉

Here is a film demonstrating margins in action in conjunction with the block spacing support we enabled in #35236

like-me-seymour.mp4

Testing

Opt into margin and blockGap in your theme.json, e.g.,

           "settings": {
                ...
		"spacing": {
			"blockGap": true,
			"margin": true
                         ...

Add a new post, and insert a Social Links icon. Insert as many social media icons as takes your fancy. Add a test URL to each so that they appear on the frontend.

Play around with the block spacing and margins, to be found under the Dimensions Panel in the sidebar controls.

Check that the saved post looks good in the frontend. Also ensure the corresponding inline styles are applied:

element.style {
    --wp--style--block-gap: 68px;
    margin-top: 111px;
    margin-bottom: 111px;
}

Also test in the Site Editor by editing the Layout > Dimensions of the Social Icons block.

Note: there is a known issue with layout styles in the Site Editor/Post Content Block

Types of changes

Opting in to top and bottom margin support for the Social Links block.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

[carolinan]

Tested in the different editors and global styles, and with different alignments and justifications. Works well.

[stacimc]

This tested well for me too when setting margin from Global Styles/ block support! I did notice one issue, but it is not Social Icons-specific and I think should be handled separately. What do you think?

If I set margin values in my theme.json for the social icons block, they get overridden by the margin styling from the layout. So in my theme.json I set styles like this:

                        "core/social-links": {
				"spacing": {
					"margin": {
						"top": "20px",
						"bottom": "30px"
					},
				}
			},

When I inspect my social icons, here I see my styles being overridden:

And here are the margin values that actually get applied:

[ramonjd]

Thanks for testing @stacimc !

If I set margin values in my theme.json for the social icons block, they get overridden by the margin styling from the layout.

Hmm, very interesting. Good spotting.

I can replicate this with the Columns and Social Links blocks where there's a preceding block in the editor and the frontend.

.editor-styles-wrapper .block-editor-block-list__layout.is-root-container > * + * is very specific.

It's coming from layout.php.

I think should be handled separately. What do you think?

Totally agree. It seems to be affecting any block that opts in to gap support.

[apeatling]

LGTM

[stacimc]

Thanks for writing up the issue @ramonjd!