Make WordPress Core

Opened 7 weeks ago

Closed 6 weeks ago

Last modified 6 weeks ago

#42116 closed task (blessed) (fixed)

Customize Menus: Add "It doesn't look like your site has any menus yet" view

Reported by: melchoyce Owned by: westonruter
Milestone: 4.9 Priority: normal
Severity: normal Version: 4.9
Component: Customize Keywords: has-patch commit
Focuses: ui Cc:


When you don't have any menus, we should say:

It doesn't look like your site has any menus yet. Want to build one? Click the button to start.

You'll create a menu, assign it a location, and add menu items like links to pages and categories. If your theme has multiple menu areas, you might need to create more than one.

[ Create new menu ]

See attached screenshot.

Attachments (2)

no-menu.png (38.2 KB) - added by melchoyce 7 weeks ago.
no-menus-notice-20171010a.png (86.3 KB) - added by bpayton 6 weeks ago.

Download all attachments as: .zip

Change History (15)

7 weeks ago

#1 @melchoyce
7 weeks ago

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

#2 @bpayton
7 weeks ago

@westonruter do you have any thoughts on how something like this should be done in the UI?

I have ideas how we could do this reasonably if we were creating the panel's sections on the client side, but we are creating the sections on the server side. The best thing I'm currently imagining is adding JS to update an aria-hidden attribute on all the sections we want to hide and subsequently show, but it feels like a clunky, mechanical solution. What are your thoughts?

#3 @westonruter
6 weeks ago

@bpayton Couldn't these new paragraphs just be added to the content output in \WP_Customize_New_Menu_Section::render(), as a div.create-nav-menus-notice before the button? It could be hidden by default but then there could be JS like:

api.section( 'add_menu', function( section ) {
        var updateNoticeVisibility;

        function getNavMenuCount() {
                var count = 0;
                api.each( function( setting ) {
                        if ( /^nav_menu\[/.test( setting.id ) && false !== setting.get() ) {
                                count += 1;
                } );
                return count;

        var updateNoticeVisibility = _.debounce( function() {
                section.headContainer.find( '.create-nav-menus-notice' ).toggle( 0 === getNavMenuCount() );
        } );
        api.bind( 'add', updateNoticeVisibility );
        api.bind( 'removed', updateNoticeVisibility );
        api.bind( 'ready', updateNoticeVisibility );
} );

#4 follow-up: @bpayton
6 weeks ago

@westonruter Thanks for that. I think simply showing and hiding those paragraphs might be a more consistent UX considering we do the same for adding menu items. I have questions about how the UI should work for #42115 but will follow up there.

@melchoyce What do you think of leaving simply showing and hiding the no-menus paragraphs rather than hiding everything like we do in the mockup?

#5 in reply to: ↑ 4 @melchoyce
6 weeks ago

Replying to bpayton:

@melchoyce What do you think of leaving simply showing and hiding the no-menus paragraphs rather than hiding everything like we do in the mockup?

Let's give it a try.

#6 @bpayton
6 weeks ago

What do you think of this, @melchoyce?

#7 @melchoyce
6 weeks ago

That'll work. Maybe we can see about slimming it down to just the message + button in 4.9.1, when we have more time.

Can we double the margin-top on #customize-theme-controls #accordion-section-menu_locations? I'm fine with it always being larger.

#8 @bpayton
6 weeks ago

  • Keywords has-patch added

@westonruter, I created a PR for this here, and it's ready for review when you have time.

One question:
Your example used the ready event, and this appears to work fine. Previously, we discussed using _.defer when making similar updates for a no-menu-items notice. Is there a reason ready is more appropriate here?

#9 @bpayton
6 weeks ago

I meant to add:
I doubled the margin-top as @melchoyce requested.

#10 @westonruter
6 weeks ago

Review added: https://github.com/brandonpayton/wordpress-develop/pull/3#pullrequestreview-68462655

You're right about ready. I was wrong to suggest it. I've suggested something different in the PR.

#11 @westonruter
6 weeks ago

  • Keywords commit added
  • Owner changed from bpayton to westonruter
  • Status changed from assigned to accepted

#12 @westonruter
6 weeks ago

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

In 41823:

Customize: Add notice for when there are no nav menus created yet, prompting user to create one.

Props bpayton, melchoyce, westonruter.
Fixes #42116.

#13 @westonruter
6 weeks ago

In 41832:

Customize: Vary description for nav menu locations control based on whether it is shown during menu creation.

Also fix issue with initial visibility of notice when there are no menus.

Amends [41823].
Props bpayton, melchoyce, westonruter.
See #42116.
Fixes #42113.

Note: See TracTickets for help on using tickets.