Inspector Tools: The little + menu thing is confusing to use

[shaunandrews]

Description

There's a little + button in the Dimensions panel in the Inspector sidebar. It's pretty hard to use.

First off, when I open the + menu, there's only a single option: Margin. Ok, thats strange, but not really a problem. When I click Margin, I expect to see some sort of UI for controlling the space around my block. But instead, the Margin item in the menu get's a checkbox, and nothing really seems to happen. I click again, and the check goes away, but still nothing seems to have happened.

So, I click it again. The Margin is checked, but the menu is still open. I figure I need to close the menu to see the Margin UI, so I click outside the menu — a habit I've built over decades of using software — and the menu does go away, but I also accidentally unselected the block, so the entire Inspector changes.

--

I know exactly what is happening. I can repeat it. I can understand it. And yet, every day I still find myself in this same trap or having to figure out how these sidebar panels work.

Step-by-step reproduction instructions

1. Add a few blocks to your document.
2. Insert a Separator block, and select it.
3. Open the Inspector sidebar and find the Dimensions panel.
4. Click the + button.
5. Click "Margin" in the menu.

Screenshots, screen recording, code snippet

CleanShot.2023-03-28.at.10.58.48.mp4

Environment info

Latest WP + Gute plugin, Safari, MacOS.

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

[shaunandrews]

It's also a little weird how "Reset all" has a background on hover, but the Margin item doesn't. Similar to the blue highlighting. I think "Reset all" might be a destructive action, so maybe it should be red and have a confirmation?

[sunyatasattva]

I wonder if it could be solved by having the popup showing on top of the ··· instead of on the bottom? 🤔