Blockbase: needs ponyfill for blockGap and Spacer Block

[RavanH]

Steps to replicate

Add two paragraph blocks and set their background color to make the gap between them apparent. It should be 24px as set by the default Gutenberg blockGap, which translates to inline style rules for all inherited theme template parts like

body {
...
    --wp--style--block-gap: 24px;
}
...
.wp-container-6148b9c3d4a12 > * + * {
    margin-top: var( --wp--style--block-gap );
    margin-bottom: 0;
}

Now add a default (100px) spacer block between the two.

Result

The two paragraphs will now be separated by 148 pixels.

Expected

Instead of 148px, the more logical seems 124px, which most users would expect. With the extra added margin for the spacer block, there is no way to set the space between 24px and 49px (even with a 1px spacer, the space will be 24+24+1).

Spacer block should actually take the space that you set, not have its own margin too.

Proposal

Add this, or something similar, at least for the time being, to ponyfill.css:

[class*="wp-container-"] > * + .wp-block-spacer {
	margin-top: 0;
}

[RavanH]

In fact, I would argue for adding one extra rule, which takes care of another (related) inconsistency in expected block gaps: the first block top margin (which is not addressed by the > * + * rule) will many times depend on either the custom vertical margin (different value) or an unexpected browser default. This needs a small reset as proposed on WordPress/gutenberg#33812

This works:

*[class*="wp-container-"] > * {
	margin-top: 0;
	margin-bottom: 0;
}
[class*="wp-container-"] > * + .wp-block-spacer {
	margin-top: 0;
}

[RavanH]

Never mind, this seems fixed with the latest Gutenberg release :)