Make WordPress Core

Opened 9 months ago

Closed 9 months ago

Last modified 8 months 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 9 months ago.
no-menus-notice-20171010a.png (86.3 KB) - added by bpayton 9 months ago.

Download all attachments as: .zip

Change History (15)

9 months ago

#1 @melchoyce
9 months ago

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

#2 @bpayton
9 months 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
9 months 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
9 months 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
9 months 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
9 months ago

What do you think of this, @melchoyce?

#7 @melchoyce
9 months 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
9 months ago

  • Keywords has-patch added

@westonruter, I created a PR for this here, and it's ready for review when you have time. https://github.com/brandonpayton/wordpress-develop/pull/3

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
9 months ago

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

#10 @westonruter
9 months 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
9 months ago

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

#12 @westonruter
9 months 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
8 months 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.