From 1cff26c4b7c87ad1f6bc3cae1a7966955271ea31 Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@git.wordpress.org>
Date: Wed, 11 Oct 2017 05:27:05 +0000
Subject: [PATCH] Customize: Add notice for when there are no nav menus created
 yet, prompting user to create one.

Props bpayton, melchoyce, westonruter.
Fixes #42116.


git-svn-id: https://develop.svn.wordpress.org/trunk@41823 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/customize-nav-menus.css      |  3 +
 src/wp-admin/js/customize-nav-menus.js        | 64 ++++++++++++++++++-
 .../class-wp-customize-nav-menus.php          |  6 ++
 3 files changed, 71 insertions(+), 2 deletions(-)

diff --git a/src/wp-admin/css/customize-nav-menus.css b/src/wp-admin/css/customize-nav-menus.css
index 8faecb3248..d4ebc4bff9 100644
--- a/src/wp-admin/css/customize-nav-menus.css
+++ b/src/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;
 }
 
diff --git a/src/wp-admin/js/customize-nav-menus.js b/src/wp-admin/js/customize-nav-menus.js
index d0b73c59cd..d5bd6daa14 100644
--- a/src/wp-admin/js/customize-nav-menus.js
+++ b/src/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 );
 		},
 
 		/**
diff --git a/src/wp-includes/class-wp-customize-nav-menus.php b/src/wp-includes/class-wp-customize-nav-menus.php
index edad3fc694..39459ec57d 100644
--- a/src/wp-includes/class-wp-customize-nav-menus.php
+++ b/src/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' ); ?>