Site Editor: block toolbar covers blocks that are close to top of header template

[Sandstromer]

Description

In the site editor, when editing the header, any blocks that are close to the top of the template are obscured by the toolbar. This is very apparent when removing the spacer block in the header of TT1-Blocks theme. When the toolbar obscures the block it is almost impossible to edit that particular block. Not all themes will contain a 70px spacer as the first block in the header, so making editing such things as site-title/tagline/navigation almost impossible.

Step-by-step reproduction instructions

1. With TT1-Blocks theme, go to Site Editor
2. Select the header template part
3. Remove the 70px spacer block at the top of the header
4. Notice how you cannot edit the blocks that are now appearing at the top of the header, because they become obscured by the toolbar when selecting the block

Expected behaviour

All blocks should be editable and not obscured.

Actual behaviour

Blocks close to the top of the header are obscured and uneditable.

Screenshots or screen recording (optional)

Code snippet (optional)

WordPress information

• WordPress version: 5.7.1
• Gutenberg version: 10.4.1
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? TT1-Blocks

Device information

• Device:
• Operating system:
• Browser:

[skorasaurus]

similar problem at https://github.com/WordPress/gutenberg/issues/26239

[ellatrix]

I wonder if some gray padding like the template editor would be beneficial here. It would also ensure there's always some clickable area to clear selection. Cc @jasmussen

[jasmussen]

Is this a duplicate of https://github.com/WordPress/gutenberg/issues/29464? In that I also suggest that instead of adding padding, we can move the toolbar below the block. That lets us reserve the padding for indicating template editing, and it also takes up less space.

[ellatrix]

Yes, this is a duplicate of #31008.