Navigation menu block: Editing items

[sarahmonster]

This is intended to splinter conversation from #13690 and allow us to focus the conversation on one part of the problem at a time. We'll loop back to the tracking issue when we've determined a path forward. For this issue, we're focussing on editing a menu item (renaming it, determining settings, etc).:

How do I edit an item in my menu?

This will probably hinge quite a bit on the direction chosen in #13789.

[melchoyce]

cmd + click to enlarge

Here are some initial concepts for editing existing menu items. It assumes that all menu items are child blocks. This might be a bad assumption.

I went through all the settings that exist in nav-menus.php and then grouped them by where I think they should belong.

Block

• Navigation label: Inline editable.
• Description: Inline editable. Since it uses a placeholder, it won't display unless you edit it. Maybe it only shows up if your theme supports descriptions? Is there any way to detect that?
• Open in new tab: Toggle on/off.

Questions

• If someone changes the navigation label, should we display the original label somewhere, like we do in the menu screens? If so, where?
• Is this the right place to show "open in new tab," or should that be relegated to the sidebar? Is it common or important enough to warrant space within the block?

Toolbar

• Move: A way to move your menu items using only your keyboard. I figured this would be a good toolbar item because it can be collapsed under a menu.
• Remove: Under the ••• menu, same as the other extra block settings.

Questions

• Does putting Move under a menu now make it annoying to use?
• Can we create keyboard shortcuts for some common Move actions?
• Should Move be shown in the block itself, since it's an important action?

Sidebar

• Page type: We can show this in the block type header, since it's a child block.
• Title attribute: I grouped this along with XFN under "SEO Settings," since they both seemed vaguely SEO-related.
• Link Relationship (XFN): As discussed in #13690, noopener and noreferrer should be on by default for security reasons, which leaves nofollow. Since it's one option, we can call this out specifically using a toggle.
• Slug: I decided to add this to the page, since it relates directly to your page/menu structure. I've wanted to adjust a slug from the menus page before, while setting up my site. This should just copy whatever the Gutenberg slug UI pattern is.

Questions

• Should the title attribute and XFN settings be in different sections? Or, should they have a different group name? Is there another label that is more accurate?
• Does it make sense to add slug here?
• Anything missing?

[sarahmonster]

This looks great! I'm going to try to answer all your questions without writing a short novel. 😜 Let's see how that goes. 🤞

General

How do I change the link? I am guessing it's under the page icon, but that isn't immediately clear to me. And does this pull up the same interface? It might be worth borrowing from the link/button pattern here, and using an edit icon or showing the link at all times.

What about something along these lines?

It feels a bit noisy, but it does make the relationship a bit more clear. Alternately, using a link icon (instead of a page icon) might help to make this connection clearer in a less explicit way.

Anything missing?

This is definitely not a v1 feature, but it would be super fabulous to introduce icons to menu items. In sifting through common patterns, it seems that icons are more commonly used in navigation menus than descriptions, so they'd likely be a valuable add-on. With the potential introduction of an SVG icon system across WordPress, this may soon be the sort of thing we can actually do, and we'd have a library of icons to use.

If you've tried Bear, they do this great thing where they guess at an icon for you—so if you make an #ai tag, it automatically shows a little robot. Super nice feature that adds a little bit of unexpected pleasure to the experience.

Styling

The faux-tab styling is kinda working for me, mostly because it cleans things up a bit and all the little boxes can get a bit chaotic feeling. I'd like to try exploring this a bit more in concert with #13791.

The more I think about it, the more convinced I am that "open in new tab" isn't essential enough to warrant space in the block interface. I don't see this that often with navigation menus—it's more commonly used with links to external sites. It seems like the sort of thing that was once a common trend but is beginning to fade from use. Also, I don't want to encourage people to do this any more than they already do, since it's hijacking the user's control. I'm actually now in camp "put it under advanced settings", and actually "put it under advanced settings with a warning" even.

Advanced options

Should the title attribute and XFN settings be in different sections? Or, should they have a different group name? Is there another label that is more accurate?

The SEO settings feels like a pretty sensible section title here

I'm not certain, but noopener and noreferrer are more about tracking? Some users may want to set them. Nevertheless, they are definitely advanced options.

Does it make sense to add slug here?

I think no. The slug label confused me at first—I didn't realise this was to change the page slug itself. I figure it was for changing the link the menu item pointed at. I think this might be edge-casey enough to warrant dropping. (But let's test that at some point to be sure.)

Moving items

Does putting Move under a menu now make it annoying to use?

Probably. Move options under a separate menu feels a bit confusing, and it's an extra step to get to those controls, which I feel are pretty vital to the experience.

Can we create keyboard shortcuts for some common Move actions?

That could be super useful if we have any left to use!

Should Move be shown in the block itself, since it's an important action?

Yes. Having the move options right underneath the item text itself feels natural and makes it easier to quickly rearrange items. I suspect they're a bit more accessible there as well. Let's explore this a bit more with #13792, but this feels like a good starting point.

[melchoyce]

How do I change the link? I am guessing it's under the page icon, but that isn't immediately clear to me.

Unless you're updating a link to an external page, you wouldn't — you're referencing an existing page, category, etc. You can change the slug in the sidebar.

I still need to mock up what an external link looks like.

Alternately, using a link icon (instead of a page icon) might help to make this connection clearer in a less explicit way.

I was going to continue using page type icons — home icon for homepages, post icon for blog and archive pages, folder for categories, tag for tags, link for link, etc. Seems like a good way of indicating "this is a different kind of page" without being distracting to people who don't know — or care — about the difference.

If you've tried Bear, they do this great thing where they guess at an icon for you—so if you make an #ai tag, it automatically shows a little robot. Super nice feature that adds a little bit of unexpected pleasure to the experience.

Sweet, I'll have to check it out.

I think no. The slug label confused me at first—I didn't realise this was to change the page slug itself. I figure it was for changing the link the menu item pointed at.

Can you tell me a bit more about this?

[sarahmonster]

Unless you're updating a link to an external page, you wouldn't — you're referencing an existing page, category, etc.

I wonder if this won't be confusing for users if they can edit certain types of menu items, but not others? Both inline links and the button block allow for editing a link once you've added it, even if it's a link to a page on your site:

(Sort of. Only the inline link actually provides a mechanism to edit and go back to the search interface, but the button block just allows you to delete it and start all over.)

I suspect* (*needs validation) that it's more likely a user would want to change what page on their site a menu item points to than changing the actual URL of that page.

[melchoyce]

So you're thinking people would want to replace a menu item with a different page?

[sarahmonster]

Since design explorations have largely concluded here, I'm closing this ticket as non-actionable, and we can loop back to #13690 or new issues for any further conversation that comes up as development work progresses.

Thanks everyone for all the feedback! 🙌