Post Content block adds additional margin one can not remove through the UI

[paaljoachim]

Description

Gutenberg version Version 15.9.1
WordPress 6.2.2

For instance adding a background color to the Group block inside the Heading and having the Post Content block just below looks like this:

Backend. Header Group block contains a dark blue color. Post Content block shows a Cover block. There is a gap between the Cover block and the Header above it showing a white space.

Frontend with developer tools open. Shows the following code:

:where(.wp-site-blocks) > * {
    margin-block-start: 1.5rem;
    margin-block-end: 0;
}

Deactivating margin-block-start: 1.5rem will also remove the white space.

Please remove the margin-block-start: 1.5rem or atleast make it visible inside the UI so that we can adjust it there.
Having margins or padding one can not adjust inside the UI forces one to add custom CSS or perhaps adjust it through the theme.json file.

Step-by-step reproduction instructions

Screenshots, screen recording, code snippet

Environment info

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

[paaljoachim]

Associated issue:
Paragraph block automatically adds top and bottom margin
#51255

[tellthemachines]

Hi @paaljoachim !

The margin-block-start rule you mention applies to all the root-level blocks in a template, so removing it will remove the spaces between all those root blocks. You can change it through the UI in Styles > Layout > Block spacing:

root_spacing.mov

[paaljoachim]

The problem.
User adds background color to various blocks and white space shines through.
It is not easy to figure out why the white space is there as one can say "I added a background color why is there white space? I did not add the white space. I want to remove it from my layout to flow better with the surrounding block background colors or images."

This means:
1- Default white space the user has not added should be seen through the UI of each block, so the user can go in and adjust any block to remove the white space. Making it obvious that a block has by default added a gap/margin etc. Changing the background color should also change the color of the gap and margin.

2- An option is to figure out a method to where there is no white space that shines through when changing the background color.

3- Figuring out a technical approach where the focus is on helping the user get the exact layout using color they want.

How do we move forward?

@WordPress/gutenberg-design

Also see: #51255 (comment)

[tellthemachines]

In most cases, the background color should be set globally in Styles > Colors > Background, then if there is a section or two that should have a different background colors, those can be set on the sections themselves. The margin you see is only white because the theme doesn't have a global background color set.

In the case of the Post Content block, it doesn't currently have color settings, so in order to give it a custom background color you would have to wrap it in a Group block or similar. If you do this, the Group block also provides margin controls so it's easy to set that top margin to 0.

Another thing to bear in mind is that, as per #43243, Post Content is a valid candidate for adding margin support, so sooner or later (there's a lot of features needing to be added to a lot of blocks, so this may take some time) it will be possible to override the block spacing by setting margin on Post Content itself.

[paaljoachim]

Thank you for the feedback Isabella @tellthemachines

First of all my focus is on creating as easy as possible layout for most users. Having the technical aspects support the user in creating the layout they want. That is why I bring this up.

Let's say that I add a light green global background color. This will look like this:

It is filled with gaps that a regular user can not easily remove. They are not even visible in the UX. The Header -> Group -> Row is selected and the UX shows in the sidebar settings that Padding bottom is 2. Here a user can remove the padding being able to easily see the result right away.

If a user clicks the Post Content block there is no UX/UI to remove the top gap, but is required to set it in a Group block.
I would say that doing anything with the Post Content block is risky as it can affect the contents inside of it which one might not want to do.

The basic question that I have is:
How can we support the user to create the layout they want without needing to add Group blocks and/or CSS to remove gaps that are seen when a local background color is different compared to the global background color?

How can a user easily insert a new block using the page inserter even though gaps are removed?

The layout becomes tricky to create when one wants to example have blocks nudged up to each other so that the global background color does not shine through in a gap.

[jasmussen]

Thanks for the discussion, it sounds like @tellthemachines is right on the behavior.

In this case it seems like there is a real issue, which is that often you'll build a template where post content, header, and footer have different background images, but the global block spacing spaces them out. If the global block spacing is zeroed out, that fixes, it, but it's not a great solution or the subsequent default rhythm of content elsewhere.

It would seem like the near term solution is to select all those separate containers (such as header, post content, footer) and put them in a stack block with a zeroed out block spacing. Or is there a different solution I'm missing?

[jameskoster]

Yeah this is a bit tricky.

When you're editing a template, root-level blocks are generally going to be template parts (header / footer) and other containers. I wouldn't expect such blocks to have inherent spacing between them, just as divs have no inherent margin in html/css.

But when you're working with content like a page, it's reasonable to expect some spacing between things like paragraphs.

A global spacing value is basically saying * { margin-block-start: x; } which doesn't seem like something you'd ever actually do? 🤔 I see it was added in #42797, but it doesn't seem to have been worked on in response to any issue, and I cannot find any design feedback.

Is it a setting we 100% need? Or, could it be repurposed to only apply to the Post Content block?

[tellthemachines]

Is it a setting we 100% need? Or, could it be repurposed to only apply to the Post Content block?

My understanding is that it is useful to set a global value for block spacing that can be used not only in Post Content but on sidebars, headers, footers etc..

We could conceivably not apply it to root level template blocks. Would that work?

[porg]

Hi all,

I also had the same initial struggles like @paaljoachim of not understanding where that margin between header and the group which holds the Post Content block is coming from.

I concur with @tellthemachines latest post:

• It makes sense to set global block spacing values as an easy means for spacing consistency
• but on the root level where template parts such as header, post-content, footer, sidebar(s), together assemble the template as a whole, you most often want to butt those without margins or with custom margins, so the global spacing should not apply here!

[jameskoster]

We could conceivably not apply it to root level template blocks. Would that work?

I'd be a little anxious about adding exceptions to a global style control. That might make it less intuitive.

[andrewserong]

This is a fascinating discussion. I very much see the value in being able to zero out the spacing between root level blocks in templates. On the other hand, in one of my themes, I find it really useful having consistent root level spacing between containers for longer templates. An example is a template that might have a number of different sections of varying widths in addition to a post content block (say, a template that might have a newsletter signup area, recent posts, or an about section that isn't shared in a footer that's used across a site). In these cases, the root level block spacing adds consistent breathing room between each section without the user needing to manually go in to update margins or block spacing. Here's a screenshot as an example of root-level containers having consistent spacing between them:

I'm wondering if one option (possibly in the longer-term) could be to have a site-wide setting in theme.json that switches on (or off) root-level block spacing in templates, for the use case of when the spacing isn't desired? Perhaps a little bit like how we have the useRootPaddingAwareAlignments flag?

[paaljoachim]

I'm wondering if one option (possibly in the longer-term) could be to have a site-wide setting in theme.json that switches on (or off) root-level block spacing in templates, for the use case of when the spacing isn't desired? Perhaps a little bit like how we have the useRootPaddingAwareAlignments flag?

Theme.json is not something the average user would be using. I have just barely touched it myself. Adding a root level block spacing through the UI sounds helpful.

I say this as I do not know what would be most helpful. I just want to make it possible in an easy way to nudge blocks up to each other and if these come with a predefined spacing that this spacing is listed somewhere in the UI making it clear that there is already spacing applied that I can change. Turning on or off root spacing does sound interesting.

This might mean a setting to add gap space between root blocks and then mention which root blocks automatic spacing would be added to. Kinda like a on/off toggle that also shows the amount of automatic spacing is added. The user could then adjust the root spacing amount. Let's say this by default is on. It would need to by default show that the toggle is on and how much root spacing is added.

[jasmussen]

We discussed a bit in a chat yesterday how there is a genuine use case for setting visual properties of the local page or template to override any global properties set. Things like a page background color, or a local page padding, to override global backgrounds and paddings. Spacing could be related as well. An interface that enables this could use a little design work before we jump into solutions as it's not trivial: right now the block inspector would accomplish this, so essentially enabling parts of the block inspector in the page inspector would require some rethinking of those concepts.

But even then, it wouldn't solve the issue. The site and page-wide block spacing presets are meant to be inherited all the way down the stack, whereas the block local ones are per-block. So for addressing the spacing issue described, it still seems to me like the stack approach is the correct one. At least for the near future.

[jameskoster]

An alternative short-term approach could be to add the spacing control to the Post Content block (which seems like something we should do regardless).

That way themes can set a global spacing value for everything, as they do now. But they would also be able to eliminate the mystery-meat-margins in templates by setting global spacing to zero, while still supplying a consistent spacing value for posts/pages via the Post Content block. In such a circumstance @andrewserong's suggestion of allowing themes to disable the global control could be a handy addition.

[paaljoachim]

Today I began the process of converting a 4-5 year old site to use Full Site Editing.
This site: https://ateistene.no/

The white background gaps really became a problem. I was trying to remember that I had to go to Layout and remove the top padding to hide the white background area. Then I wondered how to remove the white gap between the blocks.
Within a few minutes this became a more cumbersome process than what is should be. I had to look up this issue as I vaguely remembered that there might be a solution here.

I also came across this gutenberg plugin support issue:
https://wordpress.org/support/topic/disable-margin-block-start-and-martin-block-end-styles/

[aadilayub]

Adding this to your theme.json fixes this issue

"styles": {
    "spacing": {
      "blockGap": "0"
    }

EDIT: Ok never mind, it removes the gap around the post content block but then breaks spacing for many blocks globally...

For now, I'm using this css a stopgap solution:

:where(.wp-site-blocks) > .wp-block-post-content {
  margin-block: 0 !important;
}

[T4rry]

Most of the time this gap annoys me at the top of the layout, between header and content block, where Header and page body or content block have differnt background colors, which is happens all the time. So i just deal with it by adding
-1.2rem to the bottom margin of the Header block (using UI) to compensate this "margin-block-start: 1.2rem;" styling of the

:where(.wp-site-blocks) > * { margin-block-start: 1.2rem; margin-block-end: 0; }
It's leave all other block gaps as intended by Wordpress and remove this one, that i don't neeed.

[tellthemachines]

As of #66366, the Content block has margin support. This means you can set its top margin to 0, overriding the block spacing styles.

I think this might help mitigate the issue somewhat.