Unexpected CSS margins added to container blocks

[iandunn]

Description

As of #33812, spacing gaps are automatically applied to FSE themes. That can cause unexpected results for theme authors in some situations.

we don't have answers for all the use cases yet...
I'd love to learn mode about the use-cases to be able to come up with the best abstractions that solve this

• Add block spacing gap config to theme.json and add support for this CSS variable to the "flow/default" layout. #33812 (comment)

I thought it'd be helpful to have an issue where we can post those use cases. Please add comments here when you encounter one.

Step-by-step reproduction instructions

Both of these are with the default 24px gap, rather than defining one in theme.json.

---

.site-header is given a margin-top because .skip-link precedes it:

<div class="wp-site-blocks">
	<a class="skip-link screen-reader-text" href="#wp--skip-link--target">Skip to content</a>

	<header class="wp-container-613a423080be0 wp-block-group site-header">

I expected it to have none, since it's the site header and the preceding element is visually hidden. maybe fix by adding a not(.screen-reader-text) selector. that wouldn't catch everything, but it might get most.

---

More broadly, child elements of .site-header and .site-footer are given margin-top, but I'd expect only post content and the sidebar to be affected. I don't really see a logical relationship in those areas like there is with elements inside post content.

Maybe in general-purpose themes everything should be affected, but not in a custom theme where the header/footer are locked.

( previously mentioned by @chthonic-ds )

Screenshots, screen recording, code snippet

No response

Environment info

• wp 5.8
• gutenberg 11.4.1
• custom theme

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[Sandstromer]

Would it be possible to have an option on all blocks that would allow the block gap to be toggled off in those instances where it is not required?

If that was an option, templates and parts could define when a particular block would have the block gap off, e.g. something like "hasBlockGap":false

<!-- wp:group {"tagName":"header","className":"site-header","hasBlockGap":false} -->
<header class="wp-block-group site-header">

[youknowriad]

I expected it to have none, since it's the site header and the preceding element is visually hidden. maybe fix by adding a not(.screen-reader-text) selector. that wouldn't catch everything, but it might get most.

Good point on this one, this one is more like a bug, maybe we can render the "skip-link" outside the "wp-site-blocks"?