[WIP] Block Support: Add gap block support feature

[andrewserong]

Update (2021-08-11): Now that the ToolsPanel (#32392) has been merged, the work from this PR has moved over to #33991.

[vcanales]

This is really cool, thanks for sharing!

WIP (and this PR is quite buggy right now)

It would be great if you could provide some testing instructions to reproduce these bugs; I'd like to fiddle around and help finding the solution.

[andrewserong]

Thanks @vcanales, appreciate you taking an early look! This is very much an early WIP at the moment, but I've updated the testing instructions, hopefully that'll get you up an running. This PR depends on and was forked from #32392. I discovered while working on this that the BoxControl component in its current state doesn't quite meet our needs for the Gap support, because when the control is unlinked, when dealing with CSS Gap, we want to group together vertical and horizontal values and controls. Today, I took at look separately at adding support for that in the BoxControl component over in this PR: #32610

I'm wrapping up for the week, but hope to get back to this PR on Tuesday. In its current form, I just got the CSS property name construction working in packages/block-editor/src/hooks/style.js by adding an isReversedProperty flag. It might be a bit of an awkward way of constructing the property keys, but it seems to work so far. This'll need to be rolled out to global-styles-render.js too, I think. I also need to circle back to the PHP side and fix tests, etc.

I'm very happy for feedback of course, and please do leave any comments if there's a particular way you think this would be best implemented. 🙂

[vcanales]

This is very much an early WIP at the moment, but I've updated the testing instructions, hopefully that'll get you up an running.

Thank you so much for updating the instructions! I understand the early status — I've recently worked on a few of those cool ideas that require a lot of tinkering to come to fruition. I'd like to approach this testing by using your proposed changes as a platform, so I'm not looking to nitpick or alter your current work, and rather "forking" it to look for stuff we might consider exploring. Thanks again!

[andrewserong]

I've just given this a manual rebase and adjusted a couple of things to get it compatible with the latest changes in #32392

It also now uses the splitOnAxis option in the BoxControl component to allow for grouped horizontal / vertical controls when the BoxControl is unlinked (which gives us better mapping to the columnGap and rowGap properties).

Still more to do (and I haven't looked at global styles yet), but this should now get this PR back in a mostly working state.

[andrewserong]

I've updated this PR to add in global styles support, so it should be testable now to roughly cover the main areas that would be addressed by a gap support.

The work here might wind up being superseded by #33812, which has a more general solution for controlling gaps between blocks. I've added a comment over in that PR referencing this one: #33812 (comment)

CC: @youknowriad just pinging you here — this is my WIP exploring a gap support. I imagine we'll likely want to go with your PR instead (as the approach is more tied to layouts) and then iterate from there?

[andrewserong]

Update: as discussed in #33812 (comment), I'll explore swapping out the inline gap styles for CSS variables based on that PR. Still to be determined: handling separate row / column values: e.g. do we need two CSS variables (column and row) to store values separately, or even three (to cover the short-hand)? I imagine two would do.

One of the big benefits of using CSS variables will be that we can defer to each block for working out how we want to use the value — whether we're ready to use CSS gap directly, or instead wish to use the value for calculating margins.

[andrewserong]

I've updated this PR with a pass exploring using CSS variables instead of gap attributes directly. I think this will offer a lot more flexibility, but there are still some issues to address. I've added in the following CSS variables:

• --wp--theme--block-gap — when using the short-hand value
• --wp--theme--block-row-gap — when setting the row value
• --wp--theme--block-column-gap — when setting the column value

I think these should be consolidated if possible, it's a little unwieldy having separate values and attempting to keep them in sync. However, it would still be good for blocks to be able to use separate row/column (or horizontal/vertical) values.

I've also updated the PR description with instructions on how to test using the Buttons block, by adding a couple of CSS rules.

Still to be done: I need to update some of the naming to keep this PR consistent (e.g. rename the gap support to blockGap).

[stacimc]

I know this is still WIP, but this is looking great! I tested gap as well as the separated row/column gaps via:

• setting through the Dimensions panel
• updating via global styles
• updating theme.json
• double-checked changes persisted on the frontend

Pointing out just in case for others testing: there's a little bit of extra top/bottom margin being applied to individual Button blocks in the button styles, which could easily be removed when the support is added to Buttons 'officially' so that the row-gap is solely responsible for managing the space between rows.

[andrewserong]

Now that the Dimensions Panel PR has been merged (#32392), it looks like I'll need to open up a new PR to base this off trunk. I'll add a link when the new PR is up.

[andrewserong]

Update: I have moved the changes from this PR over to #33991, which is based off trunk. I'll continue work over on that PR.