Site Editor: Remove empty space above header and below footer

[creativecoder]

Ported from WordPress/theme-experiments#222

Currently we have margins around header and footer template parts in the editing view of the Site Editor.

Header

Footer

Would it make sense to remove them so as to align the header and footer with the beginning and ending of the page respectively?

cc @vindl

[jasmussen]

As @carolinan correctly identifies on the older post, the problematic rule is this one:

.block-editor-block-list__block {
    margin-top: 28px;
    margin-bottom: 28px;
}

It is applied to every block, and is what pushes the content inwards:

In #22208, I tried removing that. But there are two problems.

1. Every block has this margin

That means every block, both the column singular block inside Columns, which really shouldn't have any margin, but also social icons or buttons in horizontal containers. As soon as something registers itself as a block, whether it's just an invisible passthrough or not, it gets this CSS.

This is both the primary reason why we should remove it, so there's less CSS to unset and handle. But it's also why it's a difficult change to make — we've had this margin for long enough that themes and blocks have had to compensate for it. There's a chance that by removing it, some blocks and themes will need to do some updates.

2. If those margins weren't there, we'd inherit margins from wp-admin

While the site editor is now inside an iframe which protects from CSS bleed, the post editor still isn't. Which means we inherit blanket rules from wp-admin, like this one:

By outputting blanket rules for the editor, at least we level that playing field.

---

Ultimately I think we should remove those default margins, and let themes and block developers handle their good defaults. But because it's a bigger change than it seems, and per suggestions in the conversations of #22208, I believe the best way to approach this is by applying the iframe to the post editor also, and by letting the Global Styles project enable a baseline margin to replace it.

In the mean time, it would be non-trivial to write generic CSS to override those margins just in the block editor, because we can't know which blocks to target. In most themes it might be a header and footer at the top and bottom, in others it might not be.

So it seems like an interim solution would be to fix this in the theme editor style.

[mtias]

With semantic template parts we could reset the top margin for header and bottom margin for footer. I agree the spacing between blocks is a configuration setting that needs to be absorbed as soon as possible in theme.json / global styles. The other setting that needs control is the padding of the site.

[jasmussen]

Related: #27315

[creativecoder]

I attempted this in #29453

Header	Footer

There are a couple issues that suggest to me that outright removal of these margins may not be a good idea:

For the header, block toolbars are either hidden under the top edge of the container or overlapping the block content

For the footer, the change doesn't seem to make much difference, as the empty placeholder block is usually present underneath the template (see above)... though maybe it makes sense separately to remove or hide the empty placeholder block?

---

Another approach that occurs to me is adding a darkened overlay of the margin/padding between the header/footer template parts and the editor container, giving a visual indication that the space is a functional placeholder in the editor rather than a preview of what's on the site. I'll try that next.

[jasmussen]

For the header, block toolbars are either hidden under the top edge of the container or overlapping the block content

This feels like a separate issue to address, I created #29464 as a way to potentially tackle that.

For the footer, the change doesn't seem to make much difference, as the empty placeholder block is usually present underneath the template (see above)... though maybe it makes sense separately to remove or hide the empty placeholder block?

Yes, I'd say that once the extraneous margins are removed from the editor (see also discussion in #27315), there's an opportunity to make the templates simpler and leaner.

Another approach that occurs to me is adding a darkened overlay of the margin/padding between the header/footer template parts and the editor container, giving a visual indication that the space is a functional placeholder in the editor rather than a preview of what's on the site. I'll try that next.

We tried this in the past, and it did not work as well as we had hoped. I would think that something like #29464 is worth waiting for, if the overlap is problematic, and accept the current margins until then.

[creativecoder]

This is resolved now, with only a "browser default" padding of 8px left around the edges (#30277)