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

Props bpayton, melchoyce, westonruter.
Fixes #42116.

Built from https://develop.svn.wordpress.org/trunk@41823


git-svn-id: http://core.svn.wordpress.org/trunk@41657 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/customize-nav-menus-rtl.css

@@ -773,6 +773,9 @@ body.adding-menu-items #customize-preview iframe {
 /* @todo update selector */
 #accordion-section-add_menu {
 	margin: 15px 12px;
+}
+
+#accordion-section-add_menu h3 {
 	text-align: left;
 }
 

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

@@ -773,6 +773,9 @@ body.adding-menu-items #customize-preview iframe {
 /* @todo update selector */
 #accordion-section-add_menu {
 	margin: 15px 12px;
+}
+
+#accordion-section-add_menu h3 {
 	text-align: right;
 }
 

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

@@ -1163,7 +1163,8 @@
 		attachEvents: function() {
 			var section = this,
 				container = section.container,
-				contentContainer = section.contentContainer;
+				contentContainer = section.contentContainer,
+				navMenuSettingPattern = /^nav_menu\[/;
 
 			/*
 			 * We have to manually handle section expanded because we do not
@@ -1184,7 +1185,66 @@
 				event.preventDefault();
 			} );
 
-			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 );
 		},
 
 		/**

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

@@ -951,6 +951,12 @@ final class WP_Customize_Nav_Menus {
 		</script>
 
 		<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">
 					<?php _e( 'Create New Menu' ); ?>

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.9-beta1-41822';
+$wp_version = '4.9-beta1-41823';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.