Contextual block toolbar: Move below the block when bumping against the top edge

[jasmussen]

What problem does this address?

Mostly in the site editor, if you select a block close to the top of the screen, it bumps against the screen edge and gets pushed downwards, covering content:

What is your proposed solution?

In those cases, show the block toolbar below the block:

We might need an additional heuristic, that still shows the toolbar above the block if the block is taller than, say, 300px.

[annezazu]

Noting here that this same problem occurs in template editing mode (not sure how much code is shared between the site editor and template editing mode). Edited to add a quick video:

navigation.block.squished.mov

[ellatrix]

I think the same dark padding as the template editor would be a nice solution.

[kjellr]

Noting that this will be a frequent issue for header template parts, since they'll often be the first block included on the page. Currently, the block toolbar completely hides the arrows in the patterns carousel for that block's placeholder:

[jasmussen]

🔥