Avatar: add padding support

[colorful-tones]

Related:

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

What?

Add padding support to the Avatar block.

Why?

To create consistency across blocks.

How?

Added the relevant block support in block.json

Testing Instructions

1. Create a new post
2. Insert a new Avatar.
3. Adding Padding and configure.

Also, test in Global Styles as well.

1. Go to Appearance > Editor (beta)
2. Add an Avatar block to the template
3. Navigate to the Global Styles and choose Avatar block
4. Configure padding and verify

[ndiego]

@colorful-tones I believe you will want to add box-sizing: border-box as well to this. See this comment when I added padding to the Query Title. Following the implementation in that PR should do the trick!

[colorful-tones]

I believe you will want to add box-sizing: border-box as well to this.

@ndiego good call! I added box-sizing to style.css and I updated the gif attached in the original description.

[ndiego]

This is a small nit, but can you add the comment

// This block has customizable padding, border-box makes that more predictable.

This keeps the implementation consistent with other blocks and makes it easy to understand why this has been added. Otherwise, this PR looks good to go.

[colorful-tones]

Again, nothing too small, and thanks for the nitpicking! I addressed the missing comment. 👍

[carolinan]

As with the site logo block, I don't think the top and bottom margins are working?

[colorful-tones]

I don't think the top and bottom margins are working?

@carolinan From all of my tests margin and padding on all axes are working.

Here is today's test

avatar-padding-margin-support.mp4

Here is my testing environment:

• WordPress 6.0.2
• Twenty Twenty-Two 1.2

[carolinan]

With margin set in theme.json only, front view, empty theme:

Either way, rightly, this PR touches the padding, which does work.

[andrewserong]

Thanks for working on this one @colorful-tones, it's working nicely for me, and the padding sits nicely next to an adjacent Group block:

The margin issue appears to be the same one as discussed in #43520 (review) (and written up in #43404) so not a blocker for merging this one in, I don't think. Update: merged and updated the tracking issue.

LGTM! ✨