This repository was archived by the owner on Feb 23, 2024. It is now read-only.
Mini Cart: selecting the Mini Cart Contents block shows the toolbar at the bottom of the screen #5581
Description
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
- Go to Appearance > Site Editor > Template Parts > Mini Cart.
- Select the Mini Cart Contents block.
- Notice the toolbar appears at the bottom.
Expected behavior
The toolbar usually appears on top of the blocks.
Screenshots
Activity
dinhtungdu commentedon Jan 28, 2022
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-contentsfixes the toolbar position but the top margin can make users confused.Aljullu commentedon Jan 31, 2022
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 commentedon Jan 31, 2022
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 commentedon Feb 1, 2022
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 commentedon Feb 1, 2022
@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 commentedon Feb 1, 2022
Opened the issue on the Gutenberg repo WordPress/gutenberg#38409
I'm closing this.
Mini Cart Block: additional class are visible on the frontend page #5581
Mini Cart Block: additional class are visible on the frontend page #5581
Mini Cart Block: additional class are visible on the frontend page #5581