Changeset 41823

Timestamp:

10/11/2017 05:27:05 AM (8 years ago)

Author:

westonruter

Message:

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

Props bpayton, melchoyce, westonruter.
Fixes #42116.

Location:

trunk/src

Files:

• wp-admin/css/customize-nav-menus.css (modified) (1 diff)
• wp-admin/js/customize-nav-menus.js (modified) (2 diffs)
• wp-includes/class-wp-customize-nav-menus.php (modified) (1 diff)

trunk/src/wp-admin/css/customize-nav-menus.css

@@ -774 +774 @@
 #accordion-section-add_menu {
     margin: 15px 12px;
+}
+
+#accordion-section-add_menu h3 {
     text-align: right;
 }

trunk/src/wp-admin/js/customize-nav-menus.js

@@ -1164 +1164 @@
             var section = this,
                 container = section.container,
-                contentContainer = section.contentContainer;
+                contentContainer = section.contentContainer,
+                navMenuSettingPattern = /^nav_menu\[/;
 
             /*
@@ -1185 +1186 @@
             } );
 
-            api.Section.prototype.attachEvents.apply( this, arguments );
+            /**
+             * Get number of non-deleted nav menus.
+             *
+             * @since 4.9.0
+             * @returns {number} Count.
+             */
+            function getNavMenuCount() {
+                var count = 0;
+                api.each( function( setting ) {
+                    if ( navMenuSettingPattern.test( setting.id ) && false !== setting.get() ) {
+                        count += 1;
+                    }
+                } );
+                return count;
+            }
+
+            /**
+             * Update visibility of notice to prompt users to create menus.
+             *
+             * @since 4.9.0
+             * @returns {void}
+             */
+            function updateNoticeVisibility() {
+                container.find( '.add-new-menu-notice' ).prop( 'hidden', getNavMenuCount() > 0 );
+            }
+
+            /**
+             * Handle setting addition.
+             *
+             * @since 4.9.0
+             * @param {wp.customize.Setting} setting - Added setting.
+             * @returns {void}
+             */
+            function addChangeEventListener( setting ) {
+                if ( navMenuSettingPattern.test( setting.id ) ) {
+                    setting.bind( updateNoticeVisibility );
+                    updateNoticeVisibility();
+                }
+            }
+
+            /**
+             * Handle setting removal.
+             *
+             * @since 4.9.0
+             * @param {wp.customize.Setting} setting - Removed setting.
+             * @returns {void}
+             */
+            function removeChangeEventListener( setting ) {
+                if ( navMenuSettingPattern.test( setting.id ) ) {
+                    setting.unbind( updateNoticeVisibility );
+                    updateNoticeVisibility();
+                }
+            }
+
+            api.each( addChangeEventListener );
+            api.bind( 'add', addChangeEventListener );
+            api.bind( 'removed', removeChangeEventListener );
+            updateNoticeVisibility();
+
+            api.Section.prototype.attachEvents.apply( section, arguments );
         },
 

trunk/src/wp-includes/class-wp-customize-nav-menus.php

@@ -952 +952 @@
 
         <script type="text/html" id="tmpl-nav-menu-create-menu-section-title">
+            <p class="add-new-menu-notice">
+                <?php _e( 'It doesn&#8217;t look like your site has any menus yet. Want to build one? Click the button to start.' ); ?>
+            </p>
+            <p class="add-new-menu-notice">
+                <?php _e( 'You&#8217;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.' ); ?>
+            </p>
             <h3>
                 <button type="button" class="button customize-add-menu-button">