Add padding and margin support to the gallery block

[glendaviesnz]

Related:

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

What?

Add padding and margin support to the Gallery block.

Why?

To create consistency across blocks.

How?

Added the relevant block supports in block.json

Testing Instructions

1. Insert a new Gallery block.
2. Confirm the Dimension control panel allows you to add both padding and margin.
3. Adding padding and margin.
4. In global styles add padding and margin to the Gallery block and check it is applied in site editor, block editor and frontend

Screenshots or screencast

gallery-margin.mp4

[glendaviesnz]

@andrewserong I looked at adding box-sizing: border-box; to the Gallery as part of this, but it has the potential to quite radically change the size of images within the Gallery if themes are already applying padding to a Gallery, eg.

Without border-box:

With border-box:

I would be inclined to leave box-sizing as the default in the case of this block, what do you think?

[andrewserong]

I would be inclined to leave box-sizing as the default in the case of this block, what do you think?

Oh, great question. I agree — I think it's good for us to treat adding these settings on a case-by-case basis. From my perspective, where it feels safe to add it in, it makes sense to, but not at the expense of backwards compatibility for existing themes.

[ramonjd]

I've tested this placing the Gallery inside a group block.

Outside the Group block (without box-sizing: border-box;), there's overflow:

But you've already tested that. In that case LGTM