WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 2 years ago

Last modified 2 years 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:
PR Number:

Description

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 2 years ago.
no-menus-notice-20171010a.png (86.3 KB) - added by bpayton 2 years ago.

Download all attachments as: .zip

Change History (15)

@melchoyce
2 years ago

#1 @melchoyce
2 years ago

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

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

What do you think of this, @melchoyce?

#7 @melchoyce
2 years 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
2 years 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
2 years ago

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

#10 @westonruter
2 years 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
2 years ago

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

#12 @westonruter
2 years 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
2 years 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.