Site Logo: add padding and margin support

[colorful-tones]

Related:

• Tracking: Addressing Design Tooling Consistency #43241
• Tracking: Dimensions Design Tools Consistency #43243

What?

Add padding and margin support to the Site Logo block.

Why?

To create consistency across blocks.

How?

Added the relevant block support in block.json and updated Core Block Reference docs.

Testing Instructions

1. Go to Appearance > Editor (beta)
2. Add the Site Logo block to the template
3. Configure margin and padding and verify the output.

[ndiego]

This is minor, but can you alphabetize the active supports followed by the alphabetized excluded supports? So spacing would come after color.

[colorful-tones]

Nothing too minor. 👍 I addressed this and alpha sorted. Thanks!

[carolinan]

For this block, I was not able to get top and bottom margin to work.

[colorful-tones]

For this block, I was not able to get top and bottom margin to work.

@carolinan I pulled in the latest from trunk and tested again and all margin and padding axes are working. 🤔

Here is a video:

site-logo-padding-margin-support.mp4

My local testing environment:

• WordPress 6.0.2
• Twenty Twenty-Two 1.2

[carolinan]

theme.json only, empty theme, logo is not nested:

theme.json only, TT2, logo in the default position inside the nested header, front view

global styles, padding and margin set to medium spacing preset, TT2:

global styles, padding and margin set to medium spacing preset, TT2, site logo not nested (its between the site header and main query)

[carolinan]

Global styles, spacing preset 80, logo is not nested, Twenty Twenty-Three:

[colorful-tones]

Thanks for the additional testing @carolinan

It took me a bit to decipher whether your testing was offering successful or failure in moving this issue along, but I see that there needs to be additional CSS cascade resolution for this to work.

The .wp-blocks > * + * {} seems to be the culprit.

[carolinan]

These margin issues has to be bigger than these two blocks, and not caused by the PR.
My concern is that these changes will go into 6.1 without the margin begin fixed, and it may appear broken to many users...

[colorful-tones]

These margin issues has to be bigger than these two blocks, and not caused by the PR.

👍

My concern is that these changes will go into 6.1 without the margin begin fixed, and it may appear broken to many users...

I share these concerns as well and I'm glad you are keeping them on the radar. Do you happen to know if there is an existing issue related to the over-specificity for margin @carolinan ?

[aaronrobertshaw]

There are a few issues already around the topic of layout and margin styles conflicting:

• Layout: layout styles overriding block axial margin values in theme.json #43404
• Gutenberg - Margin controls on any block that involves layout  Automattic/wp-calypso#64438

This has also been raised on some recent PRs adding margin support to blocks:

• Video: add spacing block supports #43365 (comment)
• Spacer: add spacing block supports  #43366 (comment)
• List: add spacing block supports #43402 (comment)

[andrewserong]

Thanks for opening a PR for this one @colorful-tones, this is testing nicely for me, too. It looks like the margin styling conflicts issue is the one that @aaronrobertshaw linked to in #43404.

From my perspective, we shouldn't let that issue block merging in these opt-in PRs, as we will still have time to investigate bugs in style output after the 6.1 feature freeze. Dealing with specificity in the layout support and top margins is quite tricky to untangle as sometimes folks will want the Layout support to take precedence, and other times the block-level setting in theme.json. Since the margin support does support block-level in post content overriding Layout styles, in most cases, folks should be able to still come up with manual workarounds, so I don't think it's a blocker for these opt-ins.

LGTM!

[andrewserong]

@colorful-tones one other thing that would be good to add before landing this, is the box-sizing: border-box rule like you added in #43519 (though we can always add it after the fact). Most of the time I think site logos will typically be included in a Row block where this isn't so noticeable, but if we have this block sitting next to a Group block with padding, then it's noticeable that the padding behaves differently in TwentyTwentyTwo:

[colorful-tones]

one other thing that would be good to add before landing this, is the box-sizing: border-box rule like you added in #43519

@andrewserong good call! I added the box-sizing: border-box for this block as well. Thanks for the testing and feedback. ❤️

[andrewserong]

Thanks for updating @colorful-tones, this is working nicely for me now! I'll merge this in and update the tracking issue 👍