Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blockbase: needs ponyfill for blockGap and Spacer Block #4666

Closed
RavanH opened this issue Sep 20, 2021 · 2 comments
Closed

Blockbase: needs ponyfill for blockGap and Spacer Block #4666

RavanH opened this issue Sep 20, 2021 · 2 comments

Comments

@RavanH
Copy link
Contributor

RavanH commented Sep 20, 2021

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
Copy link
Contributor Author

RavanH commented Sep 20, 2021

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
Copy link
Contributor Author

RavanH commented Sep 21, 2021

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

@RavanH RavanH closed this as completed Sep 21, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant