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

[melchoyce]

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.

[bpayton]

@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?

[westonruter]

@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 );
} );

[bpayton]

@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?

[melchoyce]

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.

[bpayton]

What do you think of this, @melchoyce?

[melchoyce]

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.

[bpayton]

@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?

[bpayton]

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

[westonruter]

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.

[westonruter]

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.

[westonruter]

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.