Gallery: Add border block support

[carolinan]

What?

Add border block support to the gallery block.

Partial for #43247

Why?

The block is missing these options. Adding them improves the consistency and enables more design options.

How?

Adds the border block support in block.json

Testing Instructions

Create a new post and add a gallery block. Adjust the border settings and compare the result in the editor and front.
Next test the global styles options from the Styles sidebar in the Site Editor.

Screenshots or screencast

Different border settings in combination with background and caption. The last gallery has extra padding. Using Twenty Twenty-Four:

[carolinan]

In this PR I have included border radius for testing. My recommendation would be to not support border radius, because no matter if the border crops the images or not, the result may be unexpected for different users.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: carolinan <[email protected]>
Co-authored-by: aaronrobertshaw <[email protected]>
Co-authored-by: andrewserong <[email protected]>
Co-authored-by: paaljoachim <[email protected]>
Co-authored-by: jasmussen <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[aaronrobertshaw]

Thanks for putting this PR together @carolinan. I really appreciate the effort to move block support adoption and consistency forward 🙇

This is working as expected for me.

✅ Global Styles for gallery borders apply correctly in the editor and frontend
✅ Block instance border styles override the global gallery border styles correctly

My recommendation would be to not support border radius, because no matter if the border crops the images or not, the result may be unexpected for different users.

I'm actually leaning towards adopting the border radius here. The gallery block supports padding so users could find a combination that works for them.

I know the Column block doesn't support border radius, like its parent Columns, and that has created some long running discussion that it should.

The issue there is that the quick inserter gets cropped in the Column block if the border radius is too high. With the gallery, new images can be added both via hitting enter or visually using the "add" button in the block toolbar, so we avoid that specific issue.

I'd be interested to hear others' thoughts on this one. In the meantime though, I'll give it a tentative ✅ .

Screen.Recording.2024-07-15.at.1.41.44.PM.mp4

cc/ @andrewserong any thoughts on border radius for galleries?

[andrewserong]

cc/ @andrewserong any thoughts on border radius for galleries?

Thanks for the ping!

I'm actually leaning towards adopting the border radius here. The gallery block supports padding so users could find a combination that works for them.

Same here. I think it's a similar state as to the Group block? I see that if you give a Grid a border, it doesn't clip images either, and users (or theme authors) can set the desired padding to account for it, as you mention. E.g. here's a quick example of a Grid block with images in it with some border radius:

So I'd lean toward allowing border radius to be present, but I might just ping @WordPress/gutenberg-design for visibility in case anyone there has strong opinions.

[paaljoachim]

I too would find it helpful to also have the border radius support added to the Gallery block. I would prefer to have consistency between what the various blocks offer so we get used to having the same features present.

[carolinan]

Then lets merge this :)

[jasmussen]

There's a long running issue on allowing you to handle overflow. That's inherently pretty complex, and until we decide how/whether to add such overflow handling, I'd tend to lean towards us at least syncing up what container blocks do, and then do the same here. In this case, the Group block allows border and radius, and if you insert several images, it'll land in the same uncropped state as this. To that end, although the radius doesn't seem that useful on the Gallery container, I'd tend to allow it, because if you combine with background and radius, at least you can round the corners of the background color.

[carolinan]

The good thing is that one does not have to wrap it in yet another group.

[andrewserong]

Nice work landing this @carolinan, great to see more blocks getting more block supports! 🎉