Mini Cart: selecting the Mini Cart Contents block shows the toolbar at the bottom of the screen

[Aljullu]

Low priority, but reporting it in any case: when selecting the Mini Cart Contents block, the Gutenberg toolbar appears at the bottom of the editor.

To reproduce

1. Go to Appearance > Site Editor > Template Parts > Mini Cart.
2. Select the Mini Cart Contents block.
3. Notice the toolbar appears at the bottom.

Expected behavior

The toolbar usually appears on top of the blocks.

Screenshots

[dinhtungdu]

Moving this to Backlog and remove myself from Assignees so other folk can chimp in. I'm on PTO next week so I don't want to block this issue. Here is my finding on this issue:

The reason for the block toolbar to dhow at the bottom of the Mini Cart Contents block (not screen) is: there is no spacing between the top of the Mini Cart Contents block and the editor area. The tool bar will show at the top of the block if the distance between the editor area and the top edge of the block is at least 35px.

I haven't figured a good solution for that, adding margin to .editor-styles-wrapper .wp-block-woocommerce-mini-cart-contents fixes the toolbar position but the top margin can make users confused.

[Aljullu]

By what you say, @dinhtungdu, I wonder if that's an issue in Gutenberg instead of something that we should fix downstream. What do you think?

[gigitux]

After some investigation, I discovered that our current implementation it is a handled-case by Gutenberg.

Potentially, we have the possibility to change this behavior, but what should be the desired result?

If I comment that code, this is the result:

Obviously, this result is not an acceptable result.

The best option that we, potentially, have is this:

But I guess this result is not acceptable from the current Gutenberg UX/UI. All the components that I checked have the toolbar above the borders.

What do you think?

[Aljullu]

Thanks for investigating this further @gigitux. Actually, it looks like the same issue happens in any other block, for example, when editing the Header template part:

I'm leaning towards opening an issue in Gutenberg's repo and closing this one. IMO, the toolbar should be displayed outside of template part canvas instead of overlapping it, but that should be fixed upstream instead of tweaking its behavior downstream. How does that sound @gigitux?

[gigitux]

All the components that I checked have the toolbar above the borders.

@Aljullu, sorry, this sentence was not clear. I intended to say that all the blocks that don't have this "problem", have the toolbar always on top of the border. So our proposal could be not matched with the UI/UX of Gutenberg because if you see this comment is very specific about this behavior.

As you said, the best thing to do is open an issue on Gutenberg repo and get feedback about our proposal and maybe help them to implement it 👍

[gigitux]

Opened the issue on the Gutenberg repo WordPress/gutenberg#38409

I'm closing this.