blockGap & vertical margins

[Humanify-nl]

What problem does this address?

There have been some issues with controlling the blockGap programmatically on a per-block level in a FSE theme.

I am aware we can set the gap in the editor for individual blocks. I'm talking about cases where we will not expose this exact layout control to clients in a wordpress editor environment.

To get what I need, is to reset the --wp--style--block-gap value on the block level in the theme CSS (for example in .wp-block-buttons).

This works great, except for one issue: Now the 'root-container' spacing rules will adopt this value to set top-margins (the > *+ * rule), which makes the css variable less ideal for this purpose and needs css bandaid, to override the top margins.

Sidenote: Maybe this is in itself a bug, because I would say the 'root-level vertical spacing rules' should use the global theme blockgap, and not that of the specific block

I think this exposes the problem of gap. It wants to also be vertical margins, but it actually isn't, it's a gap! There is a reason gap exists in CSS for this specific role.

Current situation:

• Blockgap is used as a global value set up in theme.json with the spacing attribute: { "spacing": { "blockGap": "value" } }
• We are not able to specifiy individual block gaps in theme.json. If I want my button grid to have a 0.5rem gap, and in the blocks settings we add the "spacing": { "blockGap": "0.5rem"}, it won't work (this was a lesser of two evils choice 37360).
• Blockgap is not only used as 'gap' in flexbox/grid, it is also used for top-level vertical margins.

So to be precise: the specific problem this feature request addresses is that we have one value for vertical margins between blocks and also need to use this value as a gap for flex columns (such as gallery, buttons, social-links).

What is your proposed solution?

I think there should be a distinction between:

• Gaps between blocks inside a block (basically any block that uses flex) 37768
• Gaps between blocks that are direct children in root-container or direct children of group, column and maybe cover__inner.

In this case I'd say block-gap & block-inner-gap make sense. OR block-gap & block-margin maybe.

This way we can:

1. override on block level to change inner gaps (columns, gallery, buttons, links etc).
2. hopefully make a step towards giving back precise control in theme.json and allow setting blockgap per block type again.

[andrewserong]

Thanks for opening this issue @Humanify-nl. You've articulated nicely some of the issues of attempting to use CSS variables for spacing.

A refactor of the Layout block support has been merged in #40875 which adjusts how the gap styles are output, so that direct values are used where possible instead of CSS variables.

Setting a blockGap value for a particular block in theme.json is now supported, and the gap value will be output as a direct gap CSS value or a vertical margin value (depending on the block's layout) rather than using a CSS variable, which gets around the issue of a block having both a top margin and a gap value (the values now comfortably exist side-by-side).

There's still more work to do to improve the layout and blockGap behaviour (tracked in #39336), but hopefully this gets us a large part of the way there.

[Humanify-nl]

Thanks for the compliment @andrewserong, happy to contribute. This change is a big step forward!

[skorasaurus]

Is there anything in this issue that still needs to be implemented @Humanify-nl ?

[priethor]

Let's close this issue, as it needs more info to be actionable. Please feel free to reopen again if there is more information. 🙏

[Humanify-nl]

@skorasaurus @priethor Thanks! I rarely have issues with block gaps recently since I can just drop my variables in theme.json and they work great as defaults.

The (I believe 5.9) change with spacing tokens (awesome) has made it a lot more comfortable to expose block gap controls to clients as well.

[priethor]

Great to hear that, @Humanify-nl! 🙌