[Support request] How to adjust spacing between block elements (block-gap)

[Ann]

NO, not the spacing within the blocks, or padding, margins of content, no, the vertical spacing on the back editing side of things, the block gaps controlled by a snickering gremlin who laughs at every attempt to manage the design.
Example: https://imgur.com/a/hhbBnyn

What snippet of code can be injected to subdue this meanie? Been googling at length, but being just a hobbiest, not proficient at decoding some of the higher discussions on Github, haven’t found the key function controlling this.

From some searches, found a post discussing it (block-gap) controlled via Json with a standard margin top/bottom set 28px. Can’t find the link now, but will search for it again if needed since it was posted just a few days ago. That setting can’t be reached via css snippet.

How to minimize or zero out the block gab between elements?

(Posted this on another site, got little help)

[Ying]

Hi Ann,

Is the attached image a screenshot of a page editor?
What’s the block you are using?

[Ann]

Theme is GeneratePress + Premium and the plugin directly affecting this page editor is Kadence Blocks.

Will also post this to Kadence support.

[Ying]

As when I’m testing with GenerateBlocks plugin, there’s no such block gap between each blocks in editor.

So I doubt it’s a GP issue.

Can you tell me what is the block name you are using? I can test it on my end.

Let me know!

[Ann]

This mostly affects the advanced text/header of Kadence blocks, but also is evident in some of the other ones, like the spacer/divider too.

(Site is in a local sandbox, not live or accessible.)

Am going to check some of the other blocks to see which are affected. But when using the inspector, there is that huge margin setting which can’t be tracked down.

[Ying]

Do you mean this margin?
https://www.screencast.com/t/Vb4xpwEGcW

If so, it’s added by WP 5.9.3 on my end.

Let me know if it’s not the case.

[Ann]

Yes, I think that’s it. The gap is most prevalent using the advanced header block.
Any way to minimize the spacing between them?
Thanks.

[Ying]

I think the issue is from the .wp-block CSS class that added to the Kadence blocks, it calls the margin from WP editor style.

I would suggest reaching out to Kadence block for this.

For now, you can create a custom CSS file in your site which sets the block margin top/bottom to 0:

html :where(.wp-block), .editor-styles-wrapper .wp-block {
    margin-top:0 !important;
    margin-bottom:0 !important;
}

Then add this PHP snippet to your site:
add_editor_style( 'the-path-to-your-custom-editor-style-css-file' );
Replace the the-path-to-your-custom-editor-style-css-file with the file URL.

[Author]

Posts