When there isn't space on top and below the block, the toolbar overlaps the block

[gigitux]

Description

Working on woocommerce/woocommerce-blocks#5581 we noticed a strange behavior about the toolbar position: when there isn't space on top and below the block, the toolbar overlaps the block.

This behavior could generate a not optimal great experience (see image 2 and image 3).

I discovered that this use-case is handled here.

Maybe a related issue is #37076.

Step-by-step reproduction instructions

1. Be sure that you have activated a block theme.
2. Go to Appearance > Site Editor > Template Parts > Header.
3. Click on the main block.
4. Check the position of the toolbar.

Screenshots, screen recording, code snippet

Environment info

No response

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

[nerrad]

A couple more examples:

Header template part focused in the context of the full index template with a block in the header selected:

Just the header template part with the same block selected:

[cuemarie]

I ran into this issue as well and submitted it over in Automattic/wp-calypso#60971

Here's the recording I took that shows my experience trying to add/edit Social Icons within a Navigation Block, when editing just the header template part of my site (which is quite short):

153275238-3db375e8-323f-47a5-b012-1d14ff4b104c.mov

[Gustavo-Hilario]

I have seen this a couple of times when working on FSE templates with customers.

Here is a screencast:

Screen.Capture.on.2022-06-07.at.19-07-21.mp4

[cuemarie]

Looks like specifically the navigation block and overlapping toolbars is being discussed/worked on here: #40382

I'm not sure if this issue is the exact same, or a related issue but impacts other blocks as well, so leaving open for other to determine that.

[nerrad]

I rechecked this against current trunk using the original isolated Header template-part scenario.

With a short Header canvas and the Site Title block selected, the block toolbar is now positioned above the block with the expected spacing and does not overlap it. I also added a focused local E2E check of the toolbar and block bounds; it passed.

The related positioning work in #42887 remains in the current implementation, although that PR explicitly fixed #41575 rather than this issue.

The original problem no longer reproduces, so I’m closing this as fixed.