Global Styles: Consider supporting gap

[jasmussen]

What problem does this address?

Margins are good for spacing out items. However in many cases, gap (see details) provides a much better experience for laying out items.

Instead of spacing items by providing margins on child elements, a gap as applied to the container defines how much space is between the child elements.

This illustration, courtesy of CSS-tricks, showcases very well how it works:

While it can accomplish the same, there are a few benefits. Here, the navigation block is shown with a few menu items, spaced using margin, and in various justifications:

In this screenshot, the light red items have right-margins applied to space items out, and then uses :last-child to nullify the right-most margin. But this quickly makes for some growing complexity:

• If the navigation items wrap, then the last-child will no longer be the right-most item.
• If the navigation has a different justification, margins will need further adjusting.
• While much of the RTL context is handled by the build system in the block editor, for themes needing to override values, they would have a harder time.

What is your proposed solution?

Using gap (shorthand for column-gap and row-gap) removes all of those headaches, simplifying the CSS and making it more predicactable, yet can still accomplish exactly the same. Only, you no longer have to worry about last-child or RTL considerations, and you have only a single property to consider for spacing out items inside.

Note that the gap needs to be applied to the container instead of the child items, and it need for that container to be a flex or grid item. However as a property supported in global styles for containers such as navigation, buttons or group, it could make for an excellent solution.

It would need some visual explorations for how it need be surfaced in the UI. Since the Buttons block already uses gap to space buttons out, though, it might be worth surfacing the feature in theme.json even before a UI was made available.

[jasmussen]

One way to think about gap is to consider it an easier alternative to margins. Consider how Figma does auto-layout, here are 3 squares in an auto-layout container:

Here are the auto-layout properties:

To translate that:

• 40px padding inside the gray box
• 40px gap between items inside the box

It isn't a replacement for margins, but in many cases it saves us headaches around first-child/last-child margins, or those gnarly nth-child margins you have in galleries that wrap.

[andrewserong]

I think this is a great idea @jasmussen, and could be useful across a number of current and future blocks. I thought I'd start having a go at hacking in a Gap block support, so have a draft PR that I'm working from in #32571. It's quite buggy at the moment, but I'll keep chipping away at it. I think this would be a great feature to have as a prerequisite to #32137.

An observation from hacking around inserting it into the proposed dimensions panel — I think the BoxControl would be a good candidate for controlling the gap spacing. We can pull the values for top and left and pass them into rowGap and columnGap respectively to control vertical and horizontal spacing. If that sounds like a good direction, I think a next step might be to extend the BoxControl for better support of grouped top/bottom and left/right values, as these would need to be paired for the two gap attributes we want to change.

When linked this looks good to me	When unlinked, this should be two inputs: top/bottom and left/right?

I'll keep hacking away over in #32571.

[jasmussen]

When unlinked, this should be two inputs: top/bottom and left/right?

Well, perhaps horizontal gap and vertical gap, but yes — and perhaps it doesn't need to wrap onto a new line like the 4 padding options do, but maybe it can fit between.

[andrewserong]

Excellent, I’ll have a play around tomorrow. Cheers!

[jasmussen]

Sweet deal!

[andrewserong]

I've had a go at updating the BoxControl to support grouped vertical / horizontal controls when the BoxControl is unlinked (I'm imagining the Gap support as the main use case at the moment). I think it's ready for review or for feedback at #32610 🙂

[jasmussen]

#32367 is blocked on this being addressed.

[andrewserong]

Just a quick update on where I'm up to with my exploration for implementing this in #32571 (I've been a bit delayed by working on another project these past couple of weeks, too):

• The BoxControl component now supports grouped directions via a splitOnAxis prop (BoxControl: Add support for grouped directions (vertical and horizontal controls) #32610)
• My PR to explore adding the gap block support feature ([WIP] Block Support: Add gap block support feature #32571) depends on the new dimensions panel PR (Dimensions Panel: Add new ToolsPanel component and update spacing supports #32392), which I think will need to land first
• Once the dimensions panel lands, we can rebase [WIP] Block Support: Add gap block support feature #32571 and hook it up to the splitOnAxis prop to get grouped vertical / horizontal controls, and then 🤞 get it ready for review

[andrewserong]

Just clarifying that adding in the additional support for gap is being worked on in #32571 (which is currently blocked / waiting on #32392 before we proceed). This will ultimately help us resolve the remaining task from #30753 (thanks for the ping @paaljoachim!)

[andrewserong]

Update: I have a PR to implement gap block support in #33991, which builds on top of the CSS variable introduced in #33812. There is currently an outstanding regression in trunk, but once that's resolved, #33991 should be good to be rebased and then reviewed / tested. The PR introduces the gap block support, and then in follow-ups we could look at switching it on for each block that we want to opt-in to the block-level control.

[andrewserong]

The gap block support feature has been merged in (#33991). There's a minor bug in Safari that I'll look into in a follow-up, but I think this might mean we can close out this issue now @jasmussen, unless you want to track follow-ups here?

[jasmussen]

I think this might mean we can close out this issue now @jasmussen, unless you want to track follow-ups here?

Happy to close it. I'd like to see theme.json provided gap land in social icons, buttons, navigation blocks, but that requires refactors to migrate the margins and to ideally use the new theme.json provided flex layout as well. Ideally we also want to surface a UI for it, though hopefully the axial configuration of padding (show a single gap by default, click advanced to split into separate vertical/horizontal options) should likely be the UI for it. But that could be 4 different tickets, perhaps. What do you think?

[andrewserong]

Thanks, Joen. Yes, I think creating separate issues for tracking the next steps would be a good way to handle it.

The gap block support and UI for the single gap value has landed in #33991, so with each block we enable it for, we'll be able to look at what refactoring is required to get it to play nicely, and how we might eventually handle axial configuration. My hope is that we'll be able to land with a single CSS variable to begin with (and the simple UI control), and add the splitting into axial controls as an enhancement in follow-ups.

[jasmussen]

Definitely. Given the deeper understanding you have (sounds good to me as well!), want to create those tickets? Otherwise I can take a stab and then feel free to edit.

[andrewserong]

I'm just about to wrap up for my week, but I'm more than happy to create them on Monday. Feel free to get started before then if you'd like, but it's no trouble at all for me to start my week with it (and it'll give me a good chance to review where we're at again with a fresh brain, too! 😁)

[jasmussen]

Have a great weekend, and thanks for your work!

[jasmussen]

Closing this one in favor of separate per-block tasks:

• Navigation: Support gap via theme.json #34525
• Social Icons: Support gap via theme.json #34526
• Buttons: Support gap via theme.json #34527
• Design Tools: Enhance Block Gap control to support axial configuration #34529