Modifying block gap on wrapper elements quickly breaks the cascade

[markhowellsmead]

Description

If I modify the block gap on a specific wrapper element, then this CSS custom property value inherits down to all descendants unless explicitly overridden. This isn't maintainable for an endlessly customisable stack of HTML elements.

Step-by-step reproduction instructions

Assuming the following structure:

.wp-site-blocks
    .wp-block-columns
        .wp-block-column
            h2
            img
        .wp-block-column
            h2
            p
            p

If I set --wp--style--block-gap to 0 on .wp-site-blocks, all of the nested elements lose their default gaps. I then have to override --wp--style--block-gap manually on every potential descendant element.

Screenshots, screen recording, code snippet

No response

Environment info

No response

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

Yes

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

Yes

[markhowellsmead]

I've set up a pen at https://codepen.io/permanenttourist/pen/QWaVwbO?editors=1100 to explain what I mean.

[ndiego]

Hi @markhowellsmead, setting blockGap by manually setting the variable in CSS can lead to these cascading issues. Have you tried setting blockGap settings on blocks themselves? In this example, I would wrap the content in a Group block with block spacing set to 0. See the screenshot below for an example. You should not get any cascading issues this way. Let me know if I can answer any additional questions. Thanks!

[markhowellsmead]

Hi @markhowellsmead, setting blockGap by manually setting the variable in CSS can lead to these cascading issues. Have you tried setting blockGap settings on blocks themselves?

That's not possible: the padding and margin controls have to be disabled for most of our projects. The sizing and spacing has to be controlled by CSS. Addendum: almost all of our clients explicitly don't want editors to have access to layout or typographic controls.

[scruffian]

In that case can you target the block using the gap property in CSS rather than changing the CSS variable?

[markhowellsmead]

Yes, but that tends to make the use of --wp--style--block-gap redundant. This would mean removing block gap from the entire site, and re-coding every space across every possible block by hand. This is feasible, but perhaps a bit of overkill.

Without removing block gap, it would be difficult to amend margins on elements where the margins are set using inline CSS by core. As mentioned in #40159, the inline styles always have priority over linked theme stylesheets, which makes overriding them difficult or impossible. Especially where semantic class names are now missing. (#38719)

[scruffian]

This would mean removing block gap from the entire site, and re-coding every space across every possible block by hand.

Would it? If you did something like:

.wp-block-navigation {
	gap: 100px;
}

Then all navigation blocks would get a new gap, but all the other places where --wp--style--block-gap is used would continue to function as before.

[markhowellsmead]

I see what you mean, but that would lead to confusion in complex projects, where the gap is sometimes controlled using --wp--style--block-gap and sometimes hard-coded into CSS.

[justintadlock]

I was looking at ways to control this today and came across this ticket. Often, I'll have three main inner elements within the page:

<div class="wp-site-blocks">
	<header></header>
	<main></main>
	<footer></footer>
</div>

Generally, I don't want spacing between those blocks (it makes it tough to customize padding and backgrounds). However, I need blockGap to work cleanly everywhere else within those sections.

Overwriting the --wp--style--block-gap property by setting it to 0 at the top level won't work as a solution as tried above. That's just how the cascade works in CSS, and there's no getting around that AFAIK. However, there are two solutions that will work.

Solution 1:

If you're not worried about user customization of the layout (typical of client work), you can set this via CSS:

.wp-site-blocks > * + * {
	margin-block-start: 0;
}

That will zero out the "gap" between blocks nested directly underneath .wp-site-blocks.

This is basically what @scruffian was saying to do. You just need to hit margin-block-start instead of gap in this case.

Solution 2:

If you'd like to allow users full customization of this from the UI, the next best solution is to wrap everything in an extra Group block within your templates (yeah, I know, divitis, but what can you do?):

<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"default"}} -->
<div class="wp-block-group">

Your blocks go here.

</div>
<!-- /wp:group -->

Edit: Basically, the problem from core/Gutenberg here is that the "setting" for the block gap is under styles.spacing.blockGap in theme.json, which also happens to directly style .wp-site-blocks. Really, the setting and style should be separated.

[markhowellsmead]

Bumping this -- it's still a problem for theme and plugin developers.

[markhowellsmead]

See also #54010.