WordPress.org

Make WordPress Core

Opened 19 months ago

Closed 11 hours ago

#36279 closed task (blessed) (fixed)

Add an "add new menu" button to the menu locations section in the customizer

Reported by: celloexpressions Owned by: bpayton
Milestone: 4.9 Priority: normal
Severity: normal Version: 4.3
Component: Customize Keywords: has-patch
Focuses: ui Cc:

Description

When there are no menus, or even if there are menus but a new menu needs to be created to add to a location, the flow from being on the locations section and realizing that a new menu should be created to go back and then add a new menu is awkward. Let's add the ability to add a new menu from the menu locations section directly.

A button that focusing the new menu name control is likely the best approach, although this would still animate back out of the locations section, it still gives the option easier access and better flow.

Attachments (6)

Mokup_customizer.sketch (216.0 KB) - added by Travel_girl 16 months ago.
Mock-up Customizer
Mokup_customizer.jpg (164.3 KB) - added by Travel_girl 16 months ago.
Mock-up Customizer
Slice 1.png (35.7 KB) - added by Travel_girl 16 months ago.
Edit + Add New
Current_View.png (524.7 KB) - added by Travel_girl 7 months ago.
Current view
create-new-menu-from-locations.png (112.9 KB) - added by melchoyce 8 days ago.
36279.1.diff (12.6 KB) - added by bpayton 13 hours ago.

Download all attachments as: .zip

Change History (29)

#1 @westonruter
19 months ago

  • Keywords ux-feedback added

Would the “Add Menu” button appear next to each location so that upon creating the new menu it would be assigned to that location? Or should there be just one button appearing after all of the location dropdowns for creating a new menu? Or should the nav menu locations section just be hidden until a nav menu is created? This gets into some of the UX problems with how menus are managed and how it's not intuitive for novices how theme locations relate to nav menus.

#2 @celloexpressions
19 months ago

I would think one button at the end. That being said, it would probably be a good idea to also hide the section when there are no menus, since that places more visual emphasis on the add menu button in the first place. I see value in having an add menu button in the section even when there are existing menus, though, since you could easily realize there's a need for a new menu when looking at the options in this section (say you just switched to a theme with a social menu location, for example, and wanted to set one up).

This ticket was mentioned in Slack in #design by travelgirl. View the logs.


16 months ago

@Travel_girl
16 months ago

Mock-up Customizer

@Travel_girl
16 months ago

Mock-up Customizer

#4 @Travel_girl
16 months ago

For the Customer I have follow suggestion:

https://core.trac.wordpress.org/attachment/ticket/36279/Mokup_customizer.jpg

The link should go to the "Add Menu" Option in the Customizer. When people add a menu, it would be good, if there go back to Menu Location Setting in the Customzier.

I also talked to the accessibility-team and we agreed on making the links underline. For a better consistency and accessibility, it would be also good, to make also the "use new menu" in the Admin-Dashboard also underlined.

Do we open a new ticket for the other "use new menu".
We should also update the version for this ticket.

#5 @celloexpressions
16 months ago

Note that using a button for each section would conflict with #36795 and cause things to start to get fairly cluttered. That's why I think a single button would probably be better, since that could then be added to any location.

@Travel_girl
16 months ago

Edit + Add New

#6 @Travel_girl
16 months ago

The Edit Button would not change the problem, that you can´t add a new Menu.

What about to add the "Add new Button" as well? https://core.trac.wordpress.org/attachment/ticket/36279/Slice%201.png

It could be a bit cluttered, but I think the functionality to add a new menu is a bit more needed on this place, than editing the menu, because you can´t see the details of the menu, but you can see the existing menus.

#7 @karmatosed
15 months ago

I'm not convinced about the need for edit and new in this case. I feel that's veered a little from the original intention too of this ticket. I think the original argument for a new button is solid but not convinced about edit and feel that gets super noisy fast in this section visually.

#8 @celloexpressions
15 months ago

Yeah, I think with the edit links, if we add add-menu UI to this section it should probably be as a single button at the bottom, similar to what's shown in the menus panel. The user would still need to assign the menu to a location (or multiple locations) after adding it, so repetition of an add-menu button would have less functional benefit than the repeated edit menu buttons.

#9 @Travel_girl
7 months ago

Right now the "Edit" link is visible.

@karmatosed do you suggest, that we add the "add new" Button and remove the edit Button?

Because I think, that would be the better way.

@Travel_girl
7 months ago

Current view

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


7 months ago

This ticket was mentioned in Slack in #core-customize by celloexpressions. View the logs.


8 days ago

#12 @melchoyce
8 days ago

#42171 was marked as a duplicate.

#13 @melchoyce
8 days ago

  • Keywords needs-screenshots ux-feedback removed
  • Milestone changed from Awaiting Review to 4.9
  • Type changed from enhancement to task (blessed)

#14 @Presskopp
6 days ago

It's already there!

In class-wp-customize-nav-menu-location-control.php, L.76 it gets the 'hidden' class:

if ( ! $this->value() ) { echo ' hidden'; }

If you delete this, the "Edit Menu" appears.

But that's where I'm on my wit's end

#15 @westonruter
6 days ago

  • Owner set to bpayton
  • Status changed from new to assigned

#16 follow-up: @bpayton
3 days ago

Initial work for this ticket is here:
https://github.com/xwp/wordpress-develop/pull/285

Before wrapping up, I need to:

  • Add unit tests
  • Confirm what we want to do with the existing Edit Menu button. @melchoyce, what are your thoughts?

#17 in reply to: ↑ 16 ; follow-up: @melchoyce
3 days ago

Replying to bpayton:

Before wrapping up, I need to:

  • Confirm what we want to do with the existing Edit Menu button. @melchoyce, what are your thoughts?

What's the issue? AFAIK it should stay the same.

This ticket was mentioned in Slack in #core by melchoyce. View the logs.


2 days ago

#19 @melchoyce
2 days ago

  • Keywords has-patch added; needs-patch removed

#20 in reply to: ↑ 17 @bpayton
40 hours ago

Replying to melchoyce:

Replying to bpayton:

Before wrapping up, I need to:

  • Confirm what we want to do with the existing Edit Menu button. @melchoyce, what are your thoughts?

What's the issue? AFAIK it should stay the same.

Based on my reading of the discussion, I thought editing menus from All Locations was being reconsidered, but we cleared up my misunderstanding in #core-customize.

Because the client-side api.Menus.MenuLocationsControl relies on both server-side and client-side rendering, I am not sure it is reasonable to add qunit tests. @westonruter, is there anything you'd suggest here?

Not including unit tests, this change is ready for review here:
https://github.com/xwp/wordpress-develop/pull/285

#21 follow-up: @westonruter
22 hours ago

This tests well for me. @melchoyce @celloexpressions is the functionality in line with your expectations? I've deployed to http://trac-39896-xwp-testbed.pantheonsite.io/wp-admin/customize.php

#22 in reply to: ↑ 21 @melchoyce
19 hours ago

Replying to westonruter:

This tests well for me. @melchoyce @celloexpressions is the functionality in line with your expectations? I've deployed to http://trac-39896-xwp-testbed.pantheonsite.io/wp-admin/customize.php

Yeah, works great. Let's get this in.

@bpayton
13 hours ago

#23 @obenland
11 hours ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 41899:

Customize: Allow menu creation in locations pane

Adds a link to the menu creation workflow from the locations selector in the nav menu control.

Props bpayton, westonruter, Travel_girl, melchoyce, celloexpressions.
Fixes #36279.

Note: See TracTickets for help on using tickets.