Layout blockGap / spacing: Add support for gap set at the block level in theme.json and global styles

[andrewserong]

Following on from #39601 where we removed the blockGap / block spacing controls in global styles (since the gap value is not currently supported at the block level in global styles), this issue proposes a way to add it back in!

As of #37360 where the CSS variable approach for blockGap was removed, we haven't had support for blockGap at the individual block level in global styles or theme.json. One possible path forward to re-instating it could be:

• Every block that uses the layout support is server-rendered and currently attempts to grab the block gap value from the block's attributes, and if it doesn't exist, falls back to using the global blockGap CSS variable.
• Can we add in logic in layout.php and in the JS rendering for the layout support so that if the block's attributes do contain a blockGap setting we then look-up theme.json to grab the blockGap value if one is set at the corresponding block name level?
• If this approach works, also roll it out to the Gallery block's custom code that implements gap support.

[ramonjd]

As of #37360 where the CSS variable approach for blockGap was removed, we haven't had support for blockGap at the individual block level in global styles or theme.json.

I've been testing and it looks like it's because blockGap is constrained to a top level style. I commented about that over in this PR,

Specifically, this line:

'spacing' => array(
     ....
    'blockGap' => 'top', // <- this will be skipped when adding to `$schema['styles']['blocks']` 
),

There's a comment in sanitize() too:

// Some styles are only meant to be available at the top-level (e.g.: blockGap),
// hence, the schema for blocks & elements should not have them.

Can we add in logic in layout.php and in the JS rendering for the layout support so that if the block's attributes do contain a blockGap setting we then look-up theme.json to grab the blockGap value if one is set at the corresponding block name level?

Previously, Gutenberg rendered a global style targeting the block class:

.wp-block-group { 
    --wp--style--block-gap: 341px;
 }

Just so I understand, would we try to reinstate that rule, or something like that rule? Or look up the global value and only set for the specific block if that block itself hasn't got one (I think the latter?)

[ramonjd]

Something like this?

#39870

[andrewserong]

Just a quick drive-by comment while I'm AFK, thank you so much for picking up this issue @ramonjd! The idea in #39870 is exactly the kind of thing I had in mind — looks like a good direction to investigate to me 😀

In principle:

• The global styles only renders out the block gap CSS variable at the root level
• The Layout support is responsible for grabbing block-level values in theme.json and uses those values to compute the right $gap_value as you've done in that PR

[ndiego]

@andrewserong is this still something we are trying to get resolved in 6.0. If not, I will remove from the project board. Thanks!

[ramonjd]

@andrewserong is this still something we are trying to get resolved in 6.0. If not, I will remove from the project board. Thanks!

I've removed this issue and the PR. Thanks!

[andrewserong]

Implemented in #40875.