Use other variable than --wp--style--block-gap for button spacings

[Azragh]

Description

The problem is that within grouped blocks, the spacing of the elements is set by this variable, just like the distance between the buttons. If I now change this value for .wp-block-buttons in my base CSS, it also has the same distance to the top:

Without the standard CSS value, the distance is simply too large, but cannot be set to a default anywhere else. A simple gap property is set, but this is overwritten by Gutenberg with --wp--style--block-gap:

In order for the whole thing to be displayed as desired (and without making the functionality unusable using !important), I would now have to manually reset the spacing for each new button group. Then inline styles are generated that have a fixed gap-value:

Edit: Maybe I have to mention that I've defined the --wp--style-block-gap variable globally on the body tag and in my theme.json I have true instead of a value, as I don't want to have to remember to transfer the new values to theme.json every time I make changes to the SCSS files. In the right column in the picture below we can see how that affects the default spacing. I would assume that best practise would be to use a different variable (same problem on galleries btw).

Step-by-step reproduction instructions

1. Try to add a custom default block gap for .wp-block-buttons via editor stylesheet.
2. Note that it doesn't work with gap: .5em;
3. Note that it doesn't work with --wp--style--block-gap: .5em;
4. Note that you disable customizations via editor if using !important

Screenshots, screen recording, code snippet

Environment info

Latest WP and Gutenberg

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

No

[ndiego]

Hi @Azragh! Based on my understanding, blockGap is designed to be controlled via theme.json or through block attributes in the UI. For example with the Buttons block, the space between each button can be controlled directly in the Editor by the user, or you can set block-level defaults in theme.json (this in addition to the global gap setting). Manually setting the blockGap using CSS can have a lot of unexpected consequences, as you are seeing here. If you need granular control over block spacing controlled via your theme stylesheet, I would recommend disabling blockGap altogether.

[carolinan]

or you can set block-level defaults in theme.json

When was this added back? - I thought this PR was meant to add block level block gap back to theme.json, and it is not merged: #39870

[ndiego]

When was this added back? - I thought this PR was meant to add block level block gap back to theme.json, and it is not merged: #39870

Ahh you're right @carolinan, we do need that PR for block-level gap control in theme.json.

[Azragh]

@ndiego Thanks for the tip. I haven't tried defining the BlockGap for individual blocks in theme.json yet. I will try a combination of both. i.e. set the gap value in theme.json to true, a default value via CSS and individual defaults to blocks where necessary.

Unfortunately, I don't want to have to define the BlockGap in the theme.json, as it is calculated via SCSS to create a kind of "baseline grid" for multi-column content (depends on font size + line height):

So far, I've managed to create a theme.json that I can leave pretty much untouched when creating a new theme (apart from special adjustments that have nothing to do with the basic style). I set the font sizes and colours via PHP & contentSize and WidSize with a value of 100% works great with a few CSS overrides in the backend (the values for alignfull and wide are also calculated via SCSS). It would be nice if I could keep it that way.

Edit: Whoops. Just noticed that this still doesn't work. Disabling BlockGap alltogether would be kinda sad though, as it's very practical to adjust layouts, create call to action boxes and stuff. ;)

[ramonjd]

I thought this PR was meant to add block level block gap back to theme.json, and it is not merged: #39870

It's been held up due to questions over implementation. Do you folks think it would help in this case?

[Azragh]

@ramonjd Pretty sure yes. =]

[coreyworrell]

Noticing this issue now as well. Having a block gap is very useful for use between elements inside of a block (buttons, gallery grid items, etc), but I do not think that it should be used for spacing between blocks themselves. A separate variable should be used for this purpose. I also don't think that the container CSS should be so opinionated (setting margins, max-widths, use of "owl" selector), but that is another issue I suppose.

[exstheme]

@coreyworrell
Totally agree

Hello!

Gap between single columns, gallery images, buttons etc. should not be used to create vertical margins for inner elements like described here:
https://fullsiteediting.com/lessons/theme-json-layout-and-spacing-options/#h-blockgap

We should have two separate controls: one for a horizontal gap and second for vertical margins.

Thank you!