Gutenberg: Link Editing Covers the + when Adding Submenu Items

Created on 7 Jan 2020  路  8Comments  路  Source: WordPress/gutenberg

Describe the bug
When adding new submenu items in succession, the link edit covers the + to add another submenu item.

To reproduce
Steps to reproduce the behavior:

  1. Add a submenu to a menu item
  2. Add the link
  3. The + to add another submenu item is covered by the link edit box

To add a new item, I had to click off the submenu, click the top level item to display the submenu, then click the + to add the submenu item.

Expected behavior
There should be an easy way to add multiple submenu items in succession. I don't know what the best UX solution would be here (moving the + down? adjusting the position of the edit link box? seems very context dependent).

Screenshots
image

Desktop
OS: MacOS Catalina - 10.15.2
Browser: Chrome
Version: Gutenberg 7.2.0-rc.1 & 7.1

Additional context
Tested locally with built version of master and WordPress Version 5.3.2 with Gutenberg as the only active plugin.

[Block] Navigation [Status] In Progress

All 8 comments

Some related things I noticed while exploring:

  • clicking on the link icon does not always toggle the link interface.
  • after inserting a link the focus is in some mysterious place, so ESC does not close the link UI

Both of the things above would make it easier to add successive menu sub items.

Can we try closing the Link UI when the link is added, and put the cursor focus on the link label?

Closing the Link UI when adding a link feels a lot slicker, IMO. You can give it a spin over here: https://github.com/WordPress/gutenberg/pull/19686

There's interactions that could be cleaned up with it for sure, but give it a try and see how it feels 馃憤

This does feel better! 馃檶 I like the fact that the label is selected when the link is created. What I'm not sure I like is the fact that pressing enter clears the text and goes to a new line. Although it is a natural behavior for multiline text editing, NavigationLink doesn't _feel_ like a multi-liner so it's a bit confusing to me. What do you think about limiting the NavigationLinks to a single line? @jeryj @shaunandrews. I guess we could then make pressing enter create another NavigationLink instead, or just deselect the text and place the caret at the end (as the right-arrow key does)?

I agree, @WunderBart . I don't think it should be a multiline element. That's one of the things I noted as well in my initial testing. If it ends up being a small thing, I can throw it in this PR or raise it as a separate issue if it ends up being larger.

it as a separate issue if it ends up being larger.

Probably best kept separate. One thing I was thinking about is that maybe hitting return should create a new menu item in the submenu.

One thing I was thinking about is that maybe hitting return should create a new menu item in the submenu.

This was my expectation when I first use the navigation block, that pressing Enter would create a new submenu item.

For now, I think this has design feedback and doesn't need a design (I might be wrong), we can always add labels back in.

Was this page helpful?
0 / 5 - 0 ratings