FSE: Default padding / space above Header and below Footer

[paaljoachim]

Description

Adding a grey background color to the Footer the default result looks like this: (It is also similar for the Header.)

There is a white space below the Footer that should not by default be there. It is difficult to locate where in the UI the bottom spacing can be removed.

Step-by-step reproduction instructions

1. Go into the Site Editor.
2. Select a template.
3. Select the default Footer (or Header). Change the Group block background into another color.
4. View the frontend.
5. Notice the additional space below the Footer or above the Header.

How can we easily fix this problem?

I noticed that this CSS is creating the problem.

.wp-site-blocks {
     padding-top: var(--wp--style--root--padding-top);
     padding-bottom: var(--wp--style--root--padding-bottom);
}

I have been told that to use the UI to remove the top and bottom padding I had to go into Global styles -> Layout and change the blank top and bottom padding to 0. This is not intuitive adjustment.

It would very much help to clean up padding/margins in Full Site Editing making it easier for any user to be able to go in and add the needed padding/margins.

Ps. I added the bug label which is likely wrong, but from a users standpoint this looks like a bug.

[carolinan]

Hi! Which themes have you tested with? This spacing is not enabled by the editor, it is an option. It is up to the developer and designers of each theme to choose the spacing that they feel fits their design.

[paaljoachim]

Hi @carolinan Carolina.

Twenty Twenty Three

Retesting a blank site using Twenty Twenty Three. WordPress 6.1.1. Gutenberg plugin 15.1.0 no other plugin activated.

Backend view: Changing the Header > Group background to red.

Frontend view:

Btw adding a color makes the Group block bigger. (Another issue which I believe has already been made.)

---

EDIT:

Twenty Twenty Two

Retesting using the same site with Twenty Twenty Two. WordPress 6.1.1 Gutenberg plugin 15.1.0 no other plugin activated.

Backend view: Changing the Header > Group background to red.

Frontend view:

This looks better with the theme Twenty Twenty Two.

[carolinan]

1) Yes, that spacing is added on purpose as part of the design.

2) The added padding on background color should have been fixed with 6.2 beta, but maybe it did not get completed in time. Adding background color should only add padding when it is needed for backwards compatibility: Not in Twenty Twenty-Three. In TT3 it was left out intentionally.

[paaljoachim]

Retesting using Beta1 and Twenty Twenty Three. I do not yet see any update yet of Twenty Twenty Three. Hopefully the fix has been added, or else it could hopefully be added during the beta.

[carolinan]

The spacing in the theme is not bug, it is by design for this specific theme.

• It is a problem that it is difficult for users to find where to change it.

[carolinan]

bullets 1 and 2 that I added above last week, describe two different problems.

[tellthemachines]

To be clear, the goal of this issue is to find a more intuitive way to expose the root padding controls in the global styles UI?

The padding added to Group blocks with background color has since been removed, and I can no longer see it on trunk.

Is it worth keeping this open for a UI enhancement? Do you have any ideas about how it could be made more obvious?

[carolinan]

I think the problem is that when a theme adds spacing in theme.json, that padding or margin is not visible in the controls in the styles sidebar.

So how would the user know it needs to change the setting under Styles > Layout? It doesn't look like that is where the spacing is coming from since the values don't match, so it is not intuitive.

But this is true for all these controls, not only spacing.

[joshgellock]

I'm experiencing this issue with the Twenty Twenty Four theme. It's absolutely a bug and it's quite frustrating. The margin shouldn't exist unless I specify one.

Are there any updates?

Thanks!