FSE: Update FSE editor css to remove template-block space

[apeatling]

Changes proposed in this Pull Request

This removes the spacing above template part blocks.

Before:

After:

Testing instructions

• Create a new page or edit an existing page and confirm the space before the header template block has been removed.
• Edit the header template and confirm spacing here still works correctly.
• Create or edit a post and confirm editor spacing is not affected.

Fixes: #34890

[matticbot]

Test live: https://calypso.live/?branch=update/fse-template-block-spacing

[apeatling]

Since we can't target parent selectors accurately, the only way I can see to remove the editor UI spacing is to use a negative margin here. The 28px space is there for editor block insertion UI (the (+) button before blocks) which is never present for these template blocks.

[glendaviesnz]

This does also make the footer slightly overlap the the blocks above it when I apply this locally:

... just looking to see if there is a way to easily target the header template separately

[apeatling]

Ah yes, I think we can actually remove this negative margin hack by adding top level css classes like here: https://github.com/Automattic/wp-calypso/pull/35081/files#diff-d4f340da4f72898d36eb7f2ca6c1e127R31

[Copons]

Wild idea, why not applying the negative margin too to the wrapper?

.editor-styles-wrapper {
	margin-top: -28px;
	padding: 0;
}

(AFAICS the wrapper doesn't really need margin: 0, but maybe I'm not testing some cases 🤔 )

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[glendaviesnz]

The following will target just the header template block:

Suggested change

	.template-block {
	.editor-block-list__block:first-child {
	.template-block {
	margin-top: -28px;
	}
	}

But seems a bit fragile - I wonder it we need to try and get some custom classes in the header and footer blocks in order to more reliably target these?

[noahtallen]

I wonder if it would be more straightforward to get the outer "frame" color working? #34684 It filled in the whitespace in a nice way and it seems like we wouldn't have to do a ton to get it working!

[apeatling]

This one is on hold until #35115 is merged, since it will use the new top level class names for our template blocks.

[apeatling]

I wonder if it would be more straightforward to get the outer "frame" color working?

This helps, but there is still extra space even with that frame. You can try #35116 to see this.

[apeatling]

Going to close this one and refactor and open a new PR.