Navigation Block: Improve flow for deleting submenu items

[annezazu]

What problem does this address?

Adding nested Link blocks in submenus left me in a situation where I was unable to remove the nested submenus because there is no way to delete using List View and the block toolbars for the nested link blocks don’t have any “delete” UI. I had to add a link before I could delete them – https://d.pr/i/75gd0G/zwqvFdfoe8

Currently, if you select the option to add a submenu item but, if you want to immediately remove it, it's not quite clear how to do so to the point that it seems one must add a link in order to then delete the block. The video below shows the experience (note that it's on purpose that I'm breezing through it so I don't end up with a long, confusing video):

delete.sub.menus.mov

Here's a video showing the confusion a bit more for effect:

sub.menu.deletion.confusion.mov

This came up as part of the third round of testing for the FSE Outreach Program.

What is your proposed solution?

Right now, the "Add a Link" prompt is so prominent that it's not clear you're actually able to still select the block and use the same deletion pathways as before. I will leave it to design to come up with a clearer pathway here!

[jasmussen]

One tricky challenge here is that the menu item placeholder is meant to immediately open the URL dialog when clicked/invoked. You should be able to press Escape, which then selects the block, so you can press Delete to delete it. A better design for submenus with a bit more space is likely going to help provide some clarity on what's going on here, that's certainly something on my list regardless of whether it helps or not.

However in the second video, the menu closes immediately upon opening the link dialog. That's a completely broken experience. I also cannot reproduce it, so it's very likely that it has been fixed by #29869 which is scheduled for Gutenberg 10.3.

[annezazu]

I think you are right about the latter video being fixed by that PR! In that case, I only saw that happen when I had two layers of submenus and tried to link the second submenu item.

[jasmussen]

To connect the dots, if we solve #30116 (comment), this one should be solved also.

[tellthemachines]

With the introduction of the Submenu block, this flow has changed a bit: the URL popup no longer appears immediately when clicking "Add submenu". On the other hand, a submenu won't disappear any more if we remove all of its links; it just shows an inserter.

(The quickest way I can think of to immediately revert an added submenu is cmd+z, or ctrl+z on Windows.)

With these changes in mind, is this still an issue? And if so, does the Submenu block alter anything about our possible solutions here?

[jasmussen]

The block has indeed evolved quite a bit, and the submenu block makes the experience feel less fragile or prone to error. Combined with improvements to simple menu item building, and simplified page link setup states, it's a good time to reevaluate both this ticket and in extension #30116. For the conversation, here's a GIF showing the current flow for adding submenu items, how to link them up, and how to delete them:

To explain the GIF:

1. Click a menu item to select it, then click the "Add submenu" button in the block toolbar. This adds a submenu, but an empty one.
2. Now click a plus inside the submenu to add a page link. This immediately opens the URL dialog popover, letting you choose or search for a page to link to.
3. To delete an item, select it, and delete it using the ellipsis menu, the shortcut key, or by entering select mode and pressing "Delete".

What is shown as challenging in the initial video is that when the menu item in a setup state (as denoted by the blue underline) it will immediately open the URL dialog to let you wire up the button. In other words, when clicking the block, focus is set not on the block itself, but on the URL input field, making the common "Delete" button not work as it does when selecting an Image for example. But in fact the ellipsis menu is still both available and functioning as intended:

That makes the process of deleting items similar to that of deleting social icons, and even to an extent deleting paragraphs or buttons, since those both set focus on input fields as well:

When this ticket was initially opened, the flow of creating submenus and the behavior and visual appearance of menu item placeholders (it used to look like a button), was genuinely fiddly and it definitely felt worth addressing. However revisiting this after the last many months of improvements, it's not feeling as problematic as it used to. In light of that, it might be worth revisiting this test and seeing if it's still an issue.

And if it is, it might be worth evolving this one into a new ticket focused on exploring simpler deletion of any block that sets focus on something other than the block itself, (which includes menu items, social icons, paragraphs, or buttons).

[jasmussen]

One thought: at the moment the Navigation block employs a "absorb toolbar" feature which always anchors the block toolbar to the navigation container, even that of child blocks. It could be interesting to unset that for the navigation block, and instead apply that to submenu blocks. That would let the block toolbar align with the submenu block, rather than the navigation block, potentially feeling more contextual.

[annezazu]

Based on the updates outlined above (thank you!), I agree that this can be closed for now. I can re-open if additional feedback comes in about the new experience through the outreach program.

And if it is, it might be worth evolving this one into a new ticket focused on exploring simpler deletion of any block that sets focus on something other than the block itself, (which includes menu items, social icons, paragraphs, or buttons).

+1 to having a larger issue.