Customize: Improve the menu creation flow.

Often, folks run into two issues when they create new menus: they click "Add a Menu" thinking it will add a new page to their menu, or they forget to assign their new menu to a location, and then wonder why it doesn't show up on their site.

This commit rearranges the order of items in the menu panel, and updates the flow for creating a menu by breaking it up into steps. Additionally, more help text has been added to guide people through the process of creating a menu.

Also adds default `type` lookups for Panel and Section instances. See #30741.

Props bpayton, obenland, westonruter, celloexpessions, afercia, melchoyce, zoonini, michelleweber.
Fixes #40104.

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


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

wp-admin/css/customize-controls-rtl.css

@@ -557,11 +557,16 @@ body.trashing #publish-settings {
 	border-bottom-color: #ddd;
 }
 
-#customize-theme-controls .control-panel-content .control-section:nth-child(2),
+#customize-theme-controls .control-panel-content:not(.control-panel-nav_menus) .control-section:nth-child(2),
-#customize-theme-controls .control-panel-nav_menus .control-section:nth-child(3) {
+#customize-theme-controls .control-panel-nav_menus .control-section-nav_menu,
+#customize-theme-controls .control-section-nav_menu_locations .accordion-section-title {
 	border-top: 1px solid #ddd;
 }
 
+#customize-theme-controls .control-panel-nav_menus .control-section-nav_menu + .control-section-nav_menu {
+	border-top: none;
+}
+
 #customize-theme-controls > ul {
 	margin: 0;
 }
@@ -661,7 +666,8 @@ body.trashing #publish-settings {
 	position: static;
 }
 
-.customize-section-description-container {
+.customize-section-description-container,
+.control-section-nav_menu .customize-section-description-container {
 	margin-bottom: 15px;
 }
 

wp-admin/css/customize-controls.css

@@ -557,11 +557,16 @@ body.trashing #publish-settings {
 	border-bottom-color: #ddd;
 }
 
-#customize-theme-controls .control-panel-content .control-section:nth-child(2),
+#customize-theme-controls .control-panel-content:not(.control-panel-nav_menus) .control-section:nth-child(2),
-#customize-theme-controls .control-panel-nav_menus .control-section:nth-child(3) {
+#customize-theme-controls .control-panel-nav_menus .control-section-nav_menu,
+#customize-theme-controls .control-section-nav_menu_locations .accordion-section-title {
 	border-top: 1px solid #ddd;
 }
 
+#customize-theme-controls .control-panel-nav_menus .control-section-nav_menu + .control-section-nav_menu {
+	border-top: none;
+}
+
 #customize-theme-controls > ul {
 	margin: 0;
 }
@@ -661,7 +666,8 @@ body.trashing #publish-settings {
 	position: static;
 }
 
-.customize-section-description-container {
+.customize-section-description-container,
+.control-section-nav_menu .customize-section-description-container {
 	margin-bottom: 15px;
 }
 

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

@@ -1,10 +1,22 @@
 #customize-theme-controls #accordion-section-menu_locations {
 	position: relative;
-	margin-bottom: 15px;
+	margin-top: 15px;
 }
 
 #customize-theme-controls #accordion-section-menu_locations > .accordion-section-title {
 	border-bottom-color: #ddd;
+	margin-top: 15px;
+}
+
+#customize-theme-controls .customize-section-title-nav_menus-heading,
+#customize-theme-controls .customize-section-title-menu_locations-heading,
+#customize-theme-controls .customize-section-title-menu_locations-description {
+	padding: 0 12px 0 12px;
+}
+
+#customize-theme-controls .customize-control-description.customize-section-title-menu_locations-description {
+	/* Override the default italic style for control descriptions */
+	font-style: normal;
 }
 
 .menu-in-location,
@@ -27,6 +39,23 @@
 	line-height: 28px;
 }
 
+#customize-controls .customize-control-nav_menu_name {
+	margin-bottom: 12px;
+}
+
+.customize-control-nav_menu_name p:last-of-type {
+	margin-bottom: 0;
+}
+
+#customize-new-menu-submit {
+	float: left;
+	min-width: 85px;
+}
+
+#customize-new-menu-submit-description {
+	margin: 0;
+}
+
 .wp-customizer .menu-item-bar .menu-item-handle,
 .wp-customizer .menu-item-settings,
 .wp-customizer .menu-item-settings .description-thin {
@@ -175,12 +204,25 @@
 	border-top: none;
 }
 
-.menu-settings .customize-control-checkbox label {
+.wp-customizer .menu-location-settings {
+	margin-top: 12px;
+	border-top: none;
+}
+
+.wp-customizer .control-section-nav_menu .menu-location-settings {
+	margin-top: 24px;
+	border-top: 1px solid #ddd;
+	padding-top: 12px;
+}
+
+.menu-settings .customize-control-checkbox label,
+.menu-location-settings .customize-control-checkbox label {
 	line-height: 1;
 }
 
 /* @todo update selector or potentially remove */
-.menu-settings .customize-control.customize-control-checkbox {
+.menu-settings .customize-control.customize-control-checkbox,
+.menu-location-settings .customize-control.customize-control-checkbox {
 	margin-bottom: 8px; /* Override collapsing at smaller viewports. */
 }
 
@@ -738,27 +780,16 @@ body.adding-menu-items #customize-preview iframe {
 /* @todo update selector */
 #accordion-section-add_menu {
 	margin: 15px 12px;
-	overflow: hidden;
+	text-align: left;
 }
 
-.new-menu-section-content {
+#accordion-section-add_menu h3,
-	display: none;
+#accordion-section-add_menu .customize-add-menu-button {
-	padding: 15px 0 0 0;
+	margin: 0;
-	clear: both;
 }
 
-/* @todo update selector */
+#accordion-section-add_menu .customize-add-menu-button {
-#accordion-section-add_menu .accordion-section-title {
+	font-weight: normal;
-	padding-right: 45px;
-}
-
-/* @todo update selector */
-#accordion-section-add_menu .accordion-section-title:before {
-	font: normal 20px/1 dashicons;
-	position: absolute;
-	top: 12px;
-	right: 14px;
-	content: "\f132";
 }
 
 #create-new-menu-submit {
@@ -772,6 +803,10 @@ body.adding-menu-items #customize-preview iframe {
 	width: 100%;
 }
 
+.assigned-menu-locations-title p {
+	margin: 0 0 8px 0;
+}
+
 li.assigned-to-menu-location .menu-delete-item {
 	display: none;
 }
@@ -808,7 +843,12 @@ li.assigned-to-menu-location .add-new-menu-item {
 	margin-bottom: 0;
 }
 
-.customize-control-nav_menu {
+.customize-control-nav_menu .new-menu-item-invitation {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.customize-control-nav_menu .customize-control-nav_menu-buttons {
 	margin-top: 12px;
 }
 

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

@@ -1,10 +1,22 @@
 #customize-theme-controls #accordion-section-menu_locations {
 	position: relative;
-	margin-bottom: 15px;
+	margin-top: 15px;
 }
 
 #customize-theme-controls #accordion-section-menu_locations > .accordion-section-title {
 	border-bottom-color: #ddd;
+	margin-top: 15px;
+}
+
+#customize-theme-controls .customize-section-title-nav_menus-heading,
+#customize-theme-controls .customize-section-title-menu_locations-heading,
+#customize-theme-controls .customize-section-title-menu_locations-description {
+	padding: 0 12px 0 12px;
+}
+
+#customize-theme-controls .customize-control-description.customize-section-title-menu_locations-description {
+	/* Override the default italic style for control descriptions */
+	font-style: normal;
 }
 
 .menu-in-location,
@@ -27,6 +39,23 @@
 	line-height: 28px;
 }
 
+#customize-controls .customize-control-nav_menu_name {
+	margin-bottom: 12px;
+}
+
+.customize-control-nav_menu_name p:last-of-type {
+	margin-bottom: 0;
+}
+
+#customize-new-menu-submit {
+	float: right;
+	min-width: 85px;
+}
+
+#customize-new-menu-submit-description {
+	margin: 0;
+}
+
 .wp-customizer .menu-item-bar .menu-item-handle,
 .wp-customizer .menu-item-settings,
 .wp-customizer .menu-item-settings .description-thin {
@@ -175,12 +204,25 @@
 	border-top: none;
 }
 
-.menu-settings .customize-control-checkbox label {
+.wp-customizer .menu-location-settings {
+	margin-top: 12px;
+	border-top: none;
+}
+
+.wp-customizer .control-section-nav_menu .menu-location-settings {
+	margin-top: 24px;
+	border-top: 1px solid #ddd;
+	padding-top: 12px;
+}
+
+.menu-settings .customize-control-checkbox label,
+.menu-location-settings .customize-control-checkbox label {
 	line-height: 1;
 }
 
 /* @todo update selector or potentially remove */
-.menu-settings .customize-control.customize-control-checkbox {
+.menu-settings .customize-control.customize-control-checkbox,
+.menu-location-settings .customize-control.customize-control-checkbox {
 	margin-bottom: 8px; /* Override collapsing at smaller viewports. */
 }
 
@@ -738,27 +780,16 @@ body.adding-menu-items #customize-preview iframe {
 /* @todo update selector */
 #accordion-section-add_menu {
 	margin: 15px 12px;
-	overflow: hidden;
+	text-align: right;
 }
 
-.new-menu-section-content {
+#accordion-section-add_menu h3,
-	display: none;
+#accordion-section-add_menu .customize-add-menu-button {
-	padding: 15px 0 0 0;
+	margin: 0;
-	clear: both;
 }
 
-/* @todo update selector */
+#accordion-section-add_menu .customize-add-menu-button {
-#accordion-section-add_menu .accordion-section-title {
+	font-weight: normal;
-	padding-left: 45px;
-}
-
-/* @todo update selector */
-#accordion-section-add_menu .accordion-section-title:before {
-	font: normal 20px/1 dashicons;
-	position: absolute;
-	top: 12px;
-	left: 14px;
-	content: "\f132";
 }
 
 #create-new-menu-submit {
@@ -772,6 +803,10 @@ body.adding-menu-items #customize-preview iframe {
 	width: 100%;
 }
 
+.assigned-menu-locations-title p {
+	margin: 0 0 8px 0;
+}
+
 li.assigned-to-menu-location .menu-delete-item {
 	display: none;
 }
@@ -808,7 +843,12 @@ li.assigned-to-menu-location .add-new-menu-item {
 	margin-bottom: 0;
 }
 
-.customize-control-nav_menu {
+.customize-control-nav_menu .new-menu-item-invitation {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.customize-control-nav_menu .customize-control-nav_menu-buttons {
 	margin-top: 12px;
 }
 

wp-admin/js/customize-controls.js

@@ -1234,8 +1234,21 @@
 		 * @param {object}         [options.params] - Deprecated wrapper for the above properties.
 		 */
 		initialize: function ( id, options ) {
-			var section = this;
+			var section = this, params;
-			Container.prototype.initialize.call( section, id, options );
+			params = options.params || options;
+
+			// Look up the type if one was not supplied.
+			if ( ! params.type ) {
+				_.find( api.sectionConstructor, function( Constructor, type ) {
+					if ( Constructor === section.constructor ) {
+						params.type = type;
+						return true;
+					}
+					return false;
+				} );
+			}
+
+			Container.prototype.initialize.call( section, id, params );
 
 			section.id = id;
 			section.panel = new api.Value();
@@ -2507,8 +2520,22 @@
 		 * @param {object}         [options.params] - Deprecated wrapper for the above properties.
 		 */
 		initialize: function ( id, options ) {
-			var panel = this;
+			var panel = this, params;
-			Container.prototype.initialize.call( panel, id, options );
+			params = options.params || options;
+
+			// Look up the type if one was not supplied.
+			if ( ! params.type ) {
+				_.find( api.panelConstructor, function( Constructor, type ) {
+					if ( Constructor === panel.constructor ) {
+						params.type = type;
+						return true;
+					}
+					return false;
+				} );
+			}
+
+			Container.prototype.initialize.call( panel, id, params );
+
 			panel.embed();
 			panel.deferred.embedded.done( function () {
 				panel.ready();
@@ -3107,6 +3134,8 @@
 		defaultActiveArguments: { duration: 'fast', completeCallback: $.noop },
 
 		defaults: {
+			label: '',
+			description: '',
 			active: true,
 			priority: 10
 		},

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

@@ -811,6 +811,18 @@
 			panel.container.find( '.hide-column-tog' ).click( function() {
 				panel.saveManageColumnsState();
 			});
+
+			// Wait until after construction to patch the UI
+			_.defer( function () {
+
+				panel.contentContainer.find( '#accordion-section-menu_locations' ).prepend(
+					wp.template( 'nav-menu-locations-header' )( api.Menus.data )
+				);
+
+				panel.contentContainer.find( '#accordion-section-add_menu .accordion-section-title' ).replaceWith(
+					wp.template( 'nav-menu-create-menu-section-title' )
+				);
+			} );
 		},
 
 		/**
@@ -961,7 +973,16 @@
 		},
 
 		populateControls: function() {
-			var section = this, menuNameControlId, menuAutoAddControlId, menuControl, menuNameControl, menuAutoAddControl;
+			var section = this,
+				menuNameControlId,
+				menuLocationsControlId,
+				menuAutoAddControlId,
+				menuDeleteControlId,
+				menuControl,
+				menuNameControl,
+				menuLocationsControl,
+				menuAutoAddControl,
+				menuDeleteControl;
 
 			// Add the control for managing the menu name.
 			menuNameControlId = section.id + '[name]';
@@ -996,6 +1017,22 @@
 				menuControl.active.set( true );
 			}
 
+			// Add the menu locations control.
+			menuLocationsControlId = section.id + '[locations]';
+			menuLocationsControl = api.control( menuLocationsControlId );
+			if ( ! menuLocationsControl ) {
+				menuLocationsControl = new api.controlConstructor.nav_menu_locations( menuLocationsControlId, {
+					section: section.id,
+					priority: 999,
+					settings: {
+						'default': section.id
+					},
+					menu_id: section.params.menu_id
+				} );
+				api.control.add( menuLocationsControl.id, menuLocationsControl );
+				menuControl.active.set( true );
+			}
+
 			// Add the control for managing the menu auto_add.
 			menuAutoAddControlId = section.id + '[auto_add]';
 			menuAutoAddControl = api.control( menuAutoAddControlId );
@@ -1004,7 +1041,7 @@
 					type: 'nav_menu_auto_add',
 					label: '',
 					section: section.id,
-					priority: 999,
+					priority: 1000,
 					settings: {
 						'default': section.id
 					}
@@ -1013,6 +1050,25 @@
 				menuAutoAddControl.active.set( true );
 			}
 
+			// Add the control for deleting the menu
+			menuDeleteControlId = section.id + '[delete]';
+			menuDeleteControl = api.control( menuDeleteControlId );
+			if ( ! menuDeleteControl ) {
+				menuDeleteControl = new api.Control( menuDeleteControlId, {
+					section: section.id,
+					priority: 1001,
+					templateId: 'nav-menu-delete-button'
+				} );
+				api.control.add( menuDeleteControl.id, menuDeleteControl );
+				menuDeleteControl.active.set( true );
+				menuDeleteControl.deferred.embedded.done( function () {
+					menuDeleteControl.container.find( 'button' ).on( 'click', function() {
+						var menuId = section.params.menu_id;
+						var menuControl = api.Menus.getMenuControl( menuId );
+						menuControl.setting.set( false );
+					});
+				} );
+			}
 		},
 
 		/**
@@ -1093,7 +1149,6 @@
 	 * wp.customize.Menus.NewMenuSection
 	 *
 	 * Customizer section for new menus.
-	 * Note that 'new_menu' must match the WP_Customize_New_Menu_Section::$type.
 	 *
 	 * @constructor
 	 * @augments wp.customize.Section
@@ -1106,51 +1161,164 @@
 		 * @since 4.3.0
 		 */
 		attachEvents: function() {
-			var section = this;
+			var section = this,
-			this.container.on( 'click', '.add-menu-toggle', function() {
+				container = section.container,
-				if ( section.expanded() ) {
+				contentContainer = section.contentContainer;
-					section.collapse();
+
-				} else {
+			/*
-					section.expand();
+			 * We have to manually handle section expanded because we do not
-				}
+			 * apply the `accordion-section-title` class to this button-driven section.
+			 */
+			container.on( 'click', '.customize-add-menu-button', function() {
+				section.expand();
 			});
+
+			contentContainer.on( 'keydown', '.menu-name-field', function( event ) {
+				if ( 13 === event.which ) { // Enter.
+					section.submit();
+				}
+			} );
+			contentContainer.on( 'click', '#customize-new-menu-submit', function( event ) {
+				section.submit();
+				event.stopPropagation();
+				event.preventDefault();
+			} );
+
+			api.Section.prototype.attachEvents.apply( this, arguments );
 		},
 
 		/**
-		 * Update UI to reflect expanded state.
+		 * Set up the control.
 		 *
-		 * @since 4.1.0
+		 * @since 4.9.0
-		 *
-		 * @param {Boolean} expanded
 		 */
-		onChangeExpanded: function( expanded ) {
+		ready: function() {
+			this.populateControls();
+		},
+
+		/**
+		 * Create the controls for this section.
+		 *
+		 * @since 4.9.0
+		 */
+		populateControls: function() {
 			var section = this,
-				button = section.container.find( '.add-menu-toggle' ),
+				menuNameControlId,
-				content = section.contentContainer,
+				menuLocationsControlId,
-				customizer = section.headContainer.closest( '.wp-full-overlay-sidebar-content' );
+				newMenuSubmitControlId,
-			if ( expanded ) {
+				menuNameControl,
-				button.addClass( 'open' );
+				menuLocationsControl,
-				button.attr( 'aria-expanded', 'true' );
+				newMenuSubmitControl;
-				content.slideDown( 'fast', function() {
+
-					customizer.scrollTop( customizer.height() );
+			menuNameControlId = section.id + '[name]';
-				});
+			menuNameControl = api.control( menuNameControlId );
-			} else {
+			if ( ! menuNameControl ) {
-				button.removeClass( 'open' );
+				menuNameControl = new api.controlConstructor.nav_menu_name( menuNameControlId, {
-				button.attr( 'aria-expanded', 'false' );
+					label: api.Menus.data.l10n.menuNameLabel,
-				content.slideUp( 'fast' );
+					description: api.Menus.data.l10n.newMenuNameDescription,
-				content.find( '.menu-name-field' ).removeClass( 'invalid' );
+					section: section.id,
+					priority: 0
+				} );
+				api.control.add( menuNameControl.id, menuNameControl );
+				menuNameControl.active.set( true );
+			}
+
+			menuLocationsControlId = section.id + '[locations]';
+			menuLocationsControl = api.control( menuLocationsControlId );
+			if ( ! menuLocationsControl ) {
+				menuLocationsControl = new api.controlConstructor.nav_menu_locations( menuLocationsControlId, {
+					section: section.id,
+					priority: 1,
+					menu_id: ''
+				} );
+				api.control.add( menuLocationsControlId, menuLocationsControl );
+				menuLocationsControl.active.set( true );
+			}
+
+			newMenuSubmitControlId = section.id + '[submit]';
+			newMenuSubmitControl = api.control( newMenuSubmitControlId );
+			if ( !newMenuSubmitControl ) {
+				newMenuSubmitControl = new api.Control( newMenuSubmitControlId, {
+					section: section.id,
+					priority: 1,
+					templateId: 'nav-menu-submit-new-button'
+				} );
+				api.control.add( newMenuSubmitControlId, newMenuSubmitControl );
+				newMenuSubmitControl.active.set( true );
 			}
 		},
 
 		/**
-		 * Find the content element.
+		 * Create the new menu with name and location supplied by the user.
 		 *
-		 * @since 4.7.0
+		 * @since 4.9.0
-		 *
-		 * @returns {jQuery} Content UL element.
 		 */
-		getContent: function() {
+		submit: function() {
-			return this.container.find( 'ul:first' );
+			var section = this,
+				contentContainer = section.contentContainer,
+				nameInput = contentContainer.find( '.menu-name-field' ).first(),
+				name = nameInput.val(),
+				menuSection,
+				customizeId,
+				placeholderId = api.Menus.generatePlaceholderAutoIncrementId();
+
+			if ( ! name ) {
+				nameInput.addClass( 'invalid' );
+				nameInput.focus();
+				return;
+			}
+
+			customizeId = 'nav_menu[' + String( placeholderId ) + ']';
+
+			// Register the menu control setting.
+			api.create( customizeId, customizeId, {}, {
+				type: 'nav_menu',
+				transport: api.Menus.data.settingTransport,
+				previewer: api.previewer
+			} );
+			api( customizeId ).set( $.extend(
+				{},
+				api.Menus.data.defaultSettingValues.nav_menu,
+				{
+					name: name
+				}
+			) );
+
+			/*
+			 * Add the menu section (and its controls).
+			 * Note that this will automatically create the required controls
+			 * inside via the Section's ready method.
+			 */
+			menuSection = new api.Menus.MenuSection( customizeId, {
+				panel: 'nav_menus',
+				title: displayNavMenuName( name ),
+				customizeAction: api.Menus.data.l10n.customizingMenus,
+				priority: 10,
+				menu_id: placeholderId
+			} );
+			api.section.add( customizeId, menuSection );
+
+			// Clear name field.
+			nameInput.val( '' );
+			nameInput.removeClass( 'invalid' );
+
+			contentContainer.find( '.assigned-menu-location input[type=checkbox]' ).each( function() {
+				var checkbox = $( this ),
+				navMenuLocationSetting;
+
+				if ( checkbox.prop( 'checked' ) ) {
+					navMenuLocationSetting = api( 'nav_menu_locations[' + checkbox.data( 'location-id' ) + ']' );
+					navMenuLocationSetting.set( placeholderId );
+
+					// Reset state for next new menu
+					checkbox.prop( 'checked', false );
+				}
+			} );
+
+			wp.a11y.speak( api.Menus.data.l10n.menuAdded );
+
+			// Focus on the new menu section.
+			api.section( customizeId ).focus(); // @todo should we focus on the new menu's control and open the add-items panel? Thinking user flow...
 		}
 	});
 
@@ -1512,6 +1680,8 @@
 					wp.a11y.speak( api.Menus.data.l10n.itemDeleted );
 					$adjacentFocusTarget.focus(); // keyboard accessibility
 				} );
+
+				control.setting.set( false );
 			} );
 		},
 
@@ -2034,45 +2204,88 @@
 	api.Menus.MenuNameControl = api.Control.extend({
 
 		ready: function() {
-			var control = this,
+			var control = this;
-				settingValue = control.setting();
 
-			/*
+			if ( control.setting ) {
-			 * Since the control is not registered in PHP, we need to prevent the
-			 * preview's sending of the activeControls to result in this control
-			 * being deactivated.
-			 */
-			control.active.validate = function() {
-				var value, section = api.section( control.section() );
-				if ( section ) {
-					value = section.active();
-				} else {
-					value = false;
-				}
-				return value;
-			};
-
-			control.nameElement = new api.Element( control.container.find( '.menu-name-field' ) );
-
-			control.nameElement.bind(function( value ) {
 				var settingValue = control.setting();
-				if ( settingValue && settingValue.name !== value ) {
-					settingValue = _.clone( settingValue );
-					settingValue.name = value;
-					control.setting.set( settingValue );
-				}
-			});
-			if ( settingValue ) {
-				control.nameElement.set( settingValue.name );
-			}
 
-			control.setting.bind(function( object ) {
+				control.nameElement = new api.Element( control.container.find( '.menu-name-field' ) );
-				if ( object ) {
+
-					control.nameElement.set( object.name );
+				control.nameElement.bind(function( value ) {
+					var settingValue = control.setting();
+					if ( settingValue && settingValue.name !== value ) {
+						settingValue = _.clone( settingValue );
+						settingValue.name = value;
+						control.setting.set( settingValue );
+					}
+				});
+				if ( settingValue ) {
+					control.nameElement.set( settingValue.name );
 				}
+
+				control.setting.bind(function( object ) {
+					if ( object ) {
+						control.nameElement.set( object.name );
+					}
+				});
+			}
+		}
+	});
+
+	/**
+	 * wp.customize.Menus.MenuLocationsControl
+	 *
+	 * Customizer control for a nav menu's locations.
+	 *
+	 * @since 4.9.0
+	 * @constructor
+	 * @augments wp.customize.Control
+	 */
+	api.Menus.MenuLocationsControl = api.Control.extend({
+
+		/**
+		 * Set up the control.
+		 *
+		 * @since 4.9.0
+		 */
+		ready: function () {
+			var control = this;
+
+			control.container.find( '.assigned-menu-location' ).each(function() {
+				var container = $( this ),
+					checkbox = container.find( 'input[type=checkbox]' ),
+					element = new api.Element( checkbox ),
+					navMenuLocationSetting = api( 'nav_menu_locations[' + checkbox.data( 'location-id' ) + ']' ),
+					isNewMenu = control.params.menu_id === '',
+					updateCheckbox = isNewMenu ? _.noop : function( checked ) {
+						element.set( checked );
+					},
+					updateSetting = isNewMenu ? _.noop : function( checked ) {
+						navMenuLocationSetting.set( checked ? control.params.menu_id : 0 );
+					},
+					updateSelectedMenuLabel = function( selectedMenuId ) {
+						var menuSetting = api( 'nav_menu[' + String( selectedMenuId ) + ']' );
+						if ( ! selectedMenuId || ! menuSetting || ! menuSetting() ) {
+							container.find( '.theme-location-set' ).hide();
+						} else {
+							container.find( '.theme-location-set' ).show().find( 'span' ).text( displayNavMenuName( menuSetting().name ) );
+						}
+					};
+
+				updateCheckbox( navMenuLocationSetting.get() === control.params.menu_id );
+
+				checkbox.on( 'change', function() {
+					// Note: We can't use element.bind( function( checked ){ ... } ) here because it will trigger a change as well.
+					updateSetting( this.checked );
+				} );
+
+				navMenuLocationSetting.bind( function( selectedMenuId ) {
+					updateCheckbox( selectedMenuId === control.params.menu_id );
+					updateSelectedMenuLabel( selectedMenuId );
+				} );
+				updateSelectedMenuLabel( navMenuLocationSetting.get() );
 			});
 		}
-
 	});
 
 	/**
@@ -2180,7 +2393,6 @@
 			} );
 
 			this._setupAddition();
-			this._setupLocations();
 			this._setupTitle();
 
 			// Add menu to Custom Menu widgets.
@@ -2210,6 +2422,15 @@
 					select.append( new Option( name, menuId ) );
 				}
 			}
+
+			/*
+			 * Wait for menu items to be added.
+			 * Ideally, we'd bind to an event indicating construction is complete,
+			 * but deferring appears to be the best option today.
+			 */
+			_.defer( function () {
+				control.updateInvitationVisibility();
+			} );
 		},
 
 		/**
@@ -2235,11 +2456,6 @@
 					});
 				}
 			} );
-
-			control.container.find( '.menu-delete-item .button-link-delete' ).on( 'click', function( event ) {
-				event.preventDefault();
-				control.setting.set( false );
-			});
 		},
 
 		/**
@@ -2393,43 +2609,6 @@
 			widgetTemplate.find( 'option[value=' + String( menuId ) + ']' ).remove();
 		},
 
-		// Setup theme location checkboxes.
-		_setupLocations: function() {
-			var control = this;
-
-			control.container.find( '.assigned-menu-location' ).each(function() {
-				var container = $( this ),
-					checkbox = container.find( 'input[type=checkbox]' ),
-					element,
-					updateSelectedMenuLabel,
-					navMenuLocationSetting = api( 'nav_menu_locations[' + checkbox.data( 'location-id' ) + ']' );
-
-				updateSelectedMenuLabel = function( selectedMenuId ) {
-					var menuSetting = api( 'nav_menu[' + String( selectedMenuId ) + ']' );
-					if ( ! selectedMenuId || ! menuSetting || ! menuSetting() ) {
-						container.find( '.theme-location-set' ).hide();
-					} else {
-						container.find( '.theme-location-set' ).show().find( 'span' ).text( displayNavMenuName( menuSetting().name ) );
-					}
-				};
-
-				element = new api.Element( checkbox );
-				element.set( navMenuLocationSetting.get() === control.params.menu_id );
-
-				checkbox.on( 'change', function() {
-					// Note: We can't use element.bind( function( checked ){ ... } ) here because it will trigger a change as well.
-					navMenuLocationSetting.set( this.checked ? control.params.menu_id : 0 );
-				} );
-
-				navMenuLocationSetting.bind(function( selectedMenuId ) {
-					element.set( selectedMenuId === control.params.menu_id );
-					updateSelectedMenuLabel( selectedMenuId );
-				});
-				updateSelectedMenuLabel( navMenuLocationSetting.get() );
-
-			});
-		},
-
 		/**
 		 * Update Section Title as menu name is changed.
 		 */
@@ -2607,6 +2786,7 @@
 				currentAbsolutePosition: 0
 			} );
 
+			menuControl.updateInvitationVisibility( menuItemControls );
 			menuControl.container.find( '.reorder-toggle' ).toggle( menuItemControls.length > 1 );
 		},
 
@@ -2681,103 +2861,22 @@
 			wp.a11y.speak( api.Menus.data.l10n.itemAdded );
 
 			return menuItemControl;
+		},
+
+		/**
+		 * Show an invitation to add new menu items when there are no menu items.
+		 *
+		 * @since 4.9.0
+		 *
+		 * @param {wp.customize.controlConstructor.nav_menu_item[]} optionalMenuItemControls
+		 */
+		updateInvitationVisibility: function ( optionalMenuItemControls ) {
+			var menuItemControls = optionalMenuItemControls || this.getMenuItemControls();
+
+			this.container.find( '.new-menu-item-invitation' ).toggle( menuItemControls.length === 0 );
 		}
 	} );
 
-	/**
-	 * wp.customize.Menus.NewMenuControl
-	 *
-	 * Customizer control for creating new menus and handling deletion of existing menus.
-	 * Note that 'new_menu' must match the WP_Customize_New_Menu_Control::$type.
-	 *
-	 * @constructor
-	 * @augments wp.customize.Control
-	 */
-	api.Menus.NewMenuControl = api.Control.extend({
-		/**
-		 * Set up the control.
-		 */
-		ready: function() {
-			this._bindHandlers();
-		},
-
-		_bindHandlers: function() {
-			var self = this,
-				name = $( '#customize-control-new_menu_name input' ),
-				submit = $( '#create-new-menu-submit' );
-			name.on( 'keydown', function( event ) {
-				if ( 13 === event.which ) { // Enter.
-					self.submit();
-				}
-			} );
-			submit.on( 'click', function( event ) {
-				self.submit();
-				event.stopPropagation();
-				event.preventDefault();
-			} );
-		},
-
-		/**
-		 * Create the new menu with the name supplied.
-		 */
-		submit: function() {
-
-			var control = this,
-				container = control.container.closest( '.accordion-section-new-menu' ),
-				nameInput = container.find( '.menu-name-field' ).first(),
-				name = nameInput.val(),
-				menuSection,
-				customizeId,
-				placeholderId = api.Menus.generatePlaceholderAutoIncrementId();
-
-			if ( ! name ) {
-				nameInput.addClass( 'invalid' );
-				nameInput.focus();
-				return;
-			}
-
-			customizeId = 'nav_menu[' + String( placeholderId ) + ']';
-
-			// Register the menu control setting.
-			api.create( customizeId, customizeId, {}, {
-				type: 'nav_menu',
-				transport: api.Menus.data.settingTransport,
-				previewer: api.previewer
-			} );
-			api( customizeId ).set( $.extend(
-				{},
-				api.Menus.data.defaultSettingValues.nav_menu,
-				{
-					name: name
-				}
-			) );
-
-			/*
-			 * Add the menu section (and its controls).
-			 * Note that this will automatically create the required controls
-			 * inside via the Section's ready method.
-			 */
-			menuSection = new api.Menus.MenuSection( customizeId, {
-				panel: 'nav_menus',
-				title: displayNavMenuName( name ),
-				customizeAction: api.Menus.data.l10n.customizingMenus,
-				type: 'nav_menu',
-				priority: 10,
-				menu_id: placeholderId
-			} );
-			api.section.add( menuSection );
-
-			// Clear name field.
-			nameInput.val( '' );
-			nameInput.removeClass( 'invalid' );
-
-			wp.a11y.speak( api.Menus.data.l10n.menuAdded );
-
-			// Focus on the new menu section.
-			api.section( customizeId ).focus(); // @todo should we focus on the new menu's control and open the add-items panel? Thinking user flow...
-		}
-	});
-
 	/**
 	 * Extends wp.customize.controlConstructor with control constructor for
 	 * menu_location, menu_item, nav_menu, and new_menu.
@@ -2787,8 +2886,8 @@
 		nav_menu_item: api.Menus.MenuItemControl,
 		nav_menu: api.Menus.MenuControl,
 		nav_menu_name: api.Menus.MenuNameControl,
-		nav_menu_auto_add: api.Menus.MenuAutoAddControl,
+		nav_menu_locations: api.Menus.MenuLocationsControl,
-		new_menu: api.Menus.NewMenuControl
+		nav_menu_auto_add: api.Menus.MenuAutoAddControl
 	});
 
 	/**

wp-includes/class-wp-customize-control.php

@@ -769,16 +769,16 @@ require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-location
  */
 require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-name-control.php' );
 
+/**
+ * WP_Customize_Nav_Menu_Locations_Control class.
+ */
+require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-locations-control.php' );
+
 /**
  * WP_Customize_Nav_Menu_Auto_Add_Control class.
  */
 require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-auto-add-control.php' );
 
-/**
- * WP_Customize_New_Menu_Control class.
- */
-require_once( ABSPATH . WPINC . '/customize/class-wp-customize-new-menu-control.php' );
-
 /**
  * WP_Customize_Date_Time_Control class.
  */

wp-includes/class-wp-customize-manager.php

@@ -315,8 +315,8 @@ final class WP_Customize_Manager {
 		require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-item-control.php' );
 		require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-location-control.php' );
 		require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-name-control.php' );
+		require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-locations-control.php' );
 		require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-auto-add-control.php' );
-		require_once( ABSPATH . WPINC . '/customize/class-wp-customize-new-menu-control.php' );
 
 		require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menus-panel.php' );
 
@@ -324,7 +324,6 @@ final class WP_Customize_Manager {
 		require_once( ABSPATH . WPINC . '/customize/class-wp-customize-themes-section.php' );
 		require_once( ABSPATH . WPINC . '/customize/class-wp-customize-sidebar-section.php' );
 		require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-section.php' );
-		require_once( ABSPATH . WPINC . '/customize/class-wp-customize-new-menu-section.php' );
 
 		require_once( ABSPATH . WPINC . '/customize/class-wp-customize-custom-css-setting.php' );
 		require_once( ABSPATH . WPINC . '/customize/class-wp-customize-filter-setting.php' );

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

@@ -395,39 +395,49 @@ final class WP_Customize_Nav_Menus {
 		$temp_nav_menu_setting      = new WP_Customize_Nav_Menu_Setting( $this->manager, 'nav_menu[-1]' );
 		$temp_nav_menu_item_setting = new WP_Customize_Nav_Menu_Item_Setting( $this->manager, 'nav_menu_item[-1]' );
 
+		$num_locations = count( get_registered_nav_menus() );
+		if ( 1 === $num_locations ) {
+			$locations_description = __( 'Your theme can display menus in one location.' );
+		} else {
+			/* translators: %s: number of menu locations */
+			$locations_description = sprintf( _n( 'Your theme can display menus in %s location.', 'Your theme can display menus in %s locations.', $num_locations ), number_format_i18n( $num_locations ) );
+		}
+
 		// Pass data to JS.
 		$settings = array(
 			'allMenus'             => wp_get_nav_menus(),
 			'itemTypes'            => $this->available_item_types(),
 			'l10n'                 => array(
-				'untitled'          => _x( '(no label)', 'missing menu item navigation label' ),
+				'untitled'               => _x( '(no label)', 'missing menu item navigation label' ),
-				'unnamed'           => _x( '(unnamed)', 'Missing menu name.' ),
+				'unnamed'                => _x( '(unnamed)', 'Missing menu name.' ),
-				'custom_label'      => __( 'Custom Link' ),
+				'custom_label'           => __( 'Custom Link' ),
-				'page_label'        => get_post_type_object( 'page' )->labels->singular_name,
+				'page_label'             => get_post_type_object( 'page' )->labels->singular_name,
-				/* translators: %s: menu location */
+				/* translators: %s:      menu location */
-				'menuLocation'      => _x( '(Currently set to: %s)', 'menu' ),
+				'menuLocation'           => _x( '(Currently set to: %s)', 'menu' ),
-				'menuNameLabel'     => __( 'Menu Name' ),
+				'locationsDescription'   => $locations_description,
-				'itemAdded'         => __( 'Menu item added' ),
+				'menuNameLabel'          => __( 'Menu Name' ),
-				'itemDeleted'       => __( 'Menu item deleted' ),
+				'newMenuNameDescription' => __( 'If your theme has multiple menus, giving them clear names will help you manage them.' ),
-				'menuAdded'         => __( 'Menu created' ),
+				'itemAdded'              => __( 'Menu item added' ),
-				'menuDeleted'       => __( 'Menu deleted' ),
+				'itemDeleted'            => __( 'Menu item deleted' ),
-				'movedUp'           => __( 'Menu item moved up' ),
+				'menuAdded'              => __( 'Menu created' ),
-				'movedDown'         => __( 'Menu item moved down' ),
+				'menuDeleted'            => __( 'Menu deleted' ),
-				'movedLeft'         => __( 'Menu item moved out of submenu' ),
+				'movedUp'                => __( 'Menu item moved up' ),
-				'movedRight'        => __( 'Menu item is now a sub-item' ),
+				'movedDown'              => __( 'Menu item moved down' ),
+				'movedLeft'              => __( 'Menu item moved out of submenu' ),
+				'movedRight'             => __( 'Menu item is now a sub-item' ),
 				/* translators: ▸ is the unicode right-pointing triangle, and %s is the section title in the Customizer */
-				'customizingMenus'  => sprintf( __( 'Customizing ▸ %s' ), esc_html( $this->manager->get_panel( 'nav_menus' )->title ) ),
+				'customizingMenus'       => sprintf( __( 'Customizing ▸ %s' ), esc_html( $this->manager->get_panel( 'nav_menus' )->title ) ),
 				/* translators: %s: title of menu item which is invalid */
-				'invalidTitleTpl'   => __( '%s (Invalid)' ),
+				'invalidTitleTpl'        => __( '%s (Invalid)' ),
 				/* translators: %s: title of menu item in draft status */
-				'pendingTitleTpl'   => __( '%s (Pending)' ),
+				'pendingTitleTpl'        => __( '%s (Pending)' ),
-				'itemsFound'        => __( 'Number of items found: %d' ),
+				'itemsFound'             => __( 'Number of items found: %d' ),
-				'itemsFoundMore'    => __( 'Additional items found: %d' ),
+				'itemsFoundMore'         => __( 'Additional items found: %d' ),
-				'itemsLoadingMore'  => __( 'Loading more results... please wait.' ),
+				'itemsLoadingMore'       => __( 'Loading more results... please wait.' ),
-				'reorderModeOn'     => __( 'Reorder mode enabled' ),
+				'reorderModeOn'          => __( 'Reorder mode enabled' ),
-				'reorderModeOff'    => __( 'Reorder mode closed' ),
+				'reorderModeOff'         => __( 'Reorder mode closed' ),
-				'reorderLabelOn'    => esc_attr__( 'Reorder menu items' ),
+				'reorderLabelOn'         => esc_attr__( 'Reorder menu items' ),
-				'reorderLabelOff'   => esc_attr__( 'Close reorder mode' ),
+				'reorderLabelOff'        => esc_attr__( 'Close reorder mode' ),
 			),
 			'settingTransport'     => 'postMessage',
 			'phpIntMax'            => PHP_INT_MAX,
@@ -537,6 +547,7 @@ final class WP_Customize_Nav_Menus {
 		$this->manager->register_panel_type( 'WP_Customize_Nav_Menus_Panel' );
 		$this->manager->register_control_type( 'WP_Customize_Nav_Menu_Control' );
 		$this->manager->register_control_type( 'WP_Customize_Nav_Menu_Name_Control' );
+		$this->manager->register_control_type( 'WP_Customize_Nav_Menu_Locations_Control' );
 		$this->manager->register_control_type( 'WP_Customize_Nav_Menu_Auto_Add_Control' );
 		$this->manager->register_control_type( 'WP_Customize_Nav_Menu_Item_Control' );
 
@@ -558,23 +569,24 @@ final class WP_Customize_Nav_Menus {
 
 		// Menu locations.
 		$locations     = get_registered_nav_menus();
-		$num_locations = count( array_keys( $locations ) );
+		$num_locations = count( $locations );
 		if ( 1 == $num_locations ) {
-			$description = '<p>' . __( 'Your theme supports one menu. Select which menu you would like to use.' ) . '</p>';
+			$description = '<p>' . __( 'Your theme can display menus in one location. Select which menu you would like to use.' ) . '</p>';
 		} else {
 			/* translators: %s: number of menu locations */
-			$description = '<p>' . sprintf( _n( 'Your theme supports %s menu. Select which menu appears in each location.', 'Your theme supports %s menus. Select which menu appears in each location.', $num_locations ), number_format_i18n( $num_locations ) ) . '</p>';
+			$description = '<p>' . sprintf( _n( 'Your theme can display menus in %s location. Select which menu you would like to use.', 'Your theme can display menus in %s locations. Select which menu appears in each location.', $num_locations ), number_format_i18n( $num_locations ) ) . '</p>';
 		}
+
 		if ( current_theme_supports( 'widgets' ) ) {
 			/* translators: URL to the widgets panel of the customizer */
-			$description .= '<p>' . sprintf( __( 'You can also place menus in <a href="%s">widget areas</a> with the &#8220;Custom Menu&#8221; widget.' ), "javascript:wp.customize.panel( 'widgets' ).focus();" ) . '</p>';
+			$description .= '<p>' . sprintf( __( 'If your theme has widget areas, you can also add menus there. Visit the <a href="%s">Widgets panel</a> and add a &#8220;Custom Menu widget&#8221; to display a menu in a sidebar or footer.' ), "javascript:wp.customize.panel( 'widgets' ).focus();" ) . '</p>';
 		}
 
 		$this->manager->add_section( 'menu_locations', array(
-			'title'       => __( 'Menu Locations' ),
+			'title'       	=> __( 'View All Locations' ),
-			'panel'       => 'nav_menus',
+			'panel'       	=> 'nav_menus',
-			'priority'    => 5,
+			'priority'    	=> 30,
-			'description' => $description,
+			'description' 	=> $description
 		) );
 
 		$choices = array( '0' => __( '&mdash; Select &mdash;' ) );
@@ -667,27 +679,13 @@ final class WP_Customize_Nav_Menus {
 		}
 
 		// Add the add-new-menu section and controls.
-		$this->manager->add_section( new WP_Customize_New_Menu_Section( $this->manager, 'add_menu', array(
+		$this->manager->add_section( 'add_menu', array(
-			'title'    => __( 'Add a Menu' ),
+			'type'     => 'new_menu',
+			'title'    => __( 'New Menu' ),
 			'panel'    => 'nav_menus',
-			'priority' => 999,
+			'priority' => 20,
-		) ) );
-
-		$this->manager->add_control( 'new_menu_name', array(
-			'label'       => __( 'New menu name' ),
-			'section'     => 'add_menu',
-			'type'        => 'text',
-			'settings'    => array(),
-			'input_attrs' => array(
-				'class'       => 'menu-name-field',
-			),
 		) );
 
-		$this->manager->add_control( new WP_Customize_New_Menu_Control( $this->manager, 'create_new_menu', array(
-			'section'  => 'add_menu',
-			'settings' => array(),
-		) ) );
-
 		$this->manager->add_setting( new WP_Customize_Filter_Setting( $this->manager, 'nav_menus_created_posts', array(
 			'transport' => 'postMessage',
 			'type' => 'option', // To prevent theme prefix in changeset.
@@ -925,6 +923,32 @@ final class WP_Customize_Nav_Menus {
 				?>
 			</div>
 		</script>
+
+		<script type="text/html" id="tmpl-nav-menu-delete-button">
+			<div class="menu-delete-item">
+				<button type="button" class="button-link button-link-delete">
+					<?php _e( 'Delete Menu' ); ?>
+				</button>
+			</div>
+		</script>
+
+		<script type="text/html" id="tmpl-nav-menu-submit-new-button">
+			<p id="customize-new-menu-submit-description"><?php _e( 'Click "next" to start adding links to your new menu.' ); ?></p>
+			<button id="customize-new-menu-submit" type="button" class="button" aria-describedby="customize-new-menu-submit-description"><?php _e( 'Next' ); ?></button>
+		</script>
+
+		<script type="text/html" id="tmpl-nav-menu-locations-header">
+			<span class="customize-control-title customize-section-title-menu_locations-heading"><?php _e( 'Menu Locations' ); ?></span>
+			<p class="customize-control-description customize-section-title-menu_locations-description">{{ data.l10n.locationsDescription }}</p>
+		</script>
+
+		<script type="text/html" id="tmpl-nav-menu-create-menu-section-title">
+			<h3>
+				<button type="button" class="button customize-add-menu-button">
+					<?php _e( 'Create New Menu' ); ?>
+				</button>
+			</h3>
+		</script>
 	<?php
 	}
 

wp-includes/class-wp-customize-section.php

@@ -385,6 +385,3 @@ require_once( ABSPATH . WPINC . '/customize/class-wp-customize-sidebar-section.p
 
 /** WP_Customize_Nav_Menu_Section class */
 require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-section.php' );
-
-/** WP_Customize_New_Menu_Section class */
-require_once( ABSPATH . WPINC . '/customize/class-wp-customize-new-menu-section.php' );

wp-includes/customize/class-wp-customize-nav-menu-auto-add-control.php

@@ -38,11 +38,14 @@ class WP_Customize_Nav_Menu_Auto_Add_Control extends WP_Customize_Control {
 	 */
 	protected function content_template() {
 		?>
+		<# var elementId = _.uniqueId( 'customize-nav-menu-auto-add-control-' ); #>
 		<span class="customize-control-title"><?php _e( 'Menu Options' ); ?></span>
-		<label>
+		<span class="customize-inside-control-row">
-			<input type="checkbox" class="auto_add" />
+			<input id="{{ elementId }}" type="checkbox" class="auto_add" />
-			<?php _e( 'Automatically add new top-level pages to this menu' ); ?>
+			<label for="{{ elementId }}">
-		</label>
+				<?php _e( 'Automatically add new top-level pages to this menu' ); ?>
+			</label>
+		</span>
 		<?php
 	}
 }

wp-includes/customize/class-wp-customize-nav-menu-control.php

@@ -22,14 +22,6 @@ class WP_Customize_Nav_Menu_Control extends WP_Customize_Control {
 	 */
 	public $type = 'nav_menu';
 
-	/**
-	 * The nav menu setting.
-	 *
-	 * @since 4.3.0
-	 * @var WP_Customize_Nav_Menu_Setting
-	 */
-	public $setting;
-
 	/**
 	 * Don't render the control's content - it uses a JS template instead.
 	 *
@@ -44,45 +36,17 @@ class WP_Customize_Nav_Menu_Control extends WP_Customize_Control {
 	 */
 	public function content_template() {
 		?>
-		<# var elementId; #>
+		<p class="new-menu-item-invitation"><?php _e( 'Time to add some links! Click "Add menu items" to start putting pages, categories, and custom links in your menu. Add as many things as you\'d like.' ); ?></p>
-		<button type="button" class="button add-new-menu-item" aria-label="<?php esc_attr_e( 'Add or remove menu items' ); ?>" aria-expanded="false" aria-controls="available-menu-items">
+		<div class="customize-control-nav_menu-buttons">
-			<?php _e( 'Add Items' ); ?>
+			<button type="button" class="button add-new-menu-item" aria-label="<?php esc_attr_e( 'Add or remove menu items' ); ?>" aria-expanded="false" aria-controls="available-menu-items">
-		</button>
+				<?php _e( 'Add Items' ); ?>
-		<button type="button" class="button-link reorder-toggle" aria-label="<?php esc_attr_e( 'Reorder menu items' ); ?>" aria-describedby="reorder-items-desc-{{ data.menu_id }}">
-			<span class="reorder"><?php _e( 'Reorder' ); ?></span>
-			<span class="reorder-done"><?php _e( 'Done' ); ?></span>
-		</button>
-		<p class="screen-reader-text" id="reorder-items-desc-{{ data.menu_id }}"><?php _e( 'When in reorder mode, additional controls to reorder menu items will be available in the items list above.' ); ?></p>
-		<span class="menu-delete-item">
-			<button type="button" class="button-link button-link-delete">
-				<?php _e( 'Delete Menu' ); ?>
 			</button>
-		</span>
+			<button type="button" class="button-link reorder-toggle" aria-label="<?php esc_attr_e( 'Reorder menu items' ); ?>" aria-describedby="reorder-items-desc-{{ data.menu_id }}">
-		<?php if ( current_theme_supports( 'menus' ) ) : ?>
+				<span class="reorder"><?php _e( 'Reorder' ); ?></span>
-		<ul class="menu-settings">
+				<span class="reorder-done"><?php _e( 'Done' ); ?></span>
-			<li class="customize-control">
+			</button>
-				<span class="customize-control-title"><?php _e( 'Display Location' ); ?></span>
+		</div>
-			</li>
+		<p class="screen-reader-text" id="reorder-items-desc-{{ data.menu_id }}"><?php _e( 'When in reorder mode, additional controls to reorder menu items will be available in the items list above.' ); ?></p>
-
-			<?php foreach ( get_registered_nav_menus() as $location => $description ) : ?>
-				<# elementId = _.uniqueId( 'customize-nav-menu-control-location-' ); #>
-				<li class="customize-control customize-control-checkbox assigned-menu-location customize-inside-control-row">
-					<input id="{{ elementId }}" type="checkbox" data-menu-id="{{ data.menu_id }}" data-location-id="<?php echo esc_attr( $location ); ?>" class="menu-location" />
-					<label for="{{ elementId }}">
-						<?php echo $description; ?>
-						<span class="theme-location-set">
-							<?php
-							/* translators: %s: menu name */
-							printf( _x( '(Current: %s)', 'menu location' ),
-								'<span class="current-menu-location-name-' . esc_attr( $location ) . '"></span>'
-							);
-							?>
-						</span>
-					</label>
-				</li>
-			<?php endforeach; ?>
-		</ul>
-		<?php endif; ?>
 		<?php
 	}
 

wp-includes/customize/class-wp-customize-nav-menu-locations-control.php

@@ -0,0 +1,70 @@
+<?php
+/**
+ * Customize API: WP_Customize_Nav_Menu_Locations_Control class
+ *
+ * @package WordPress
+ * @subpackage Customize
+ * @since 4.9.0
+ */
+
+/**
+ * Customize Nav Menu Locations Control Class.
+ *
+ * @since 4.9.0
+ */
+class WP_Customize_Nav_Menu_Locations_Control extends WP_Customize_Control {
+
+	/**
+	 * Control type.
+	 *
+	 * @since 4.9.0
+	 * @var string
+	 */
+	public $type = 'nav_menu_locations';
+
+	/**
+	 * Don't render the control's content - it uses a JS template instead.
+	 *
+	 * @since 4.9.0
+	 */
+	public function render_content() {}
+
+	/**
+	 * JS/Underscore template for the control UI.
+	 *
+	 * @since 4.9.0
+	 */
+	public function content_template() {
+		if ( current_theme_supports( 'menus' ) ):
+			?>
+			<# var elementId; #>
+			<ul class="menu-location-settings">
+				<li class="customize-control assigned-menu-locations-title">
+					<span class="customize-control-title"><?php _e( 'Menu Locations' ); ?></span>
+					<p><?php _e( 'Here\'s where this menu appears. If you\'d like to change that, pick another location.' ); ?></p>
+				</li>
+
+				<?php foreach ( get_registered_nav_menus() as $location => $description ) : ?>
+					<# elementId = _.uniqueId( 'customize-nav-menu-control-location-' ); #>
+					<li class="customize-control customize-control-checkbox assigned-menu-location">
+						<span class="customize-inside-control-row">
+							<input id="{{ elementId }}" type="checkbox" data-menu-id="{{ data.menu_id }}" data-location-id="<?php echo esc_attr( $location ); ?>" class="menu-location" />
+							<label for="{{ elementId }}">
+								<?php echo $description; ?>
+								<span class="theme-location-set">
+									<?php
+									/* translators: %s: menu name */
+									printf( _x( '(Current: %s)', 'menu location' ),
+										'<span class="current-menu-location-name-' . esc_attr( $location ) . '"></span>'
+									);
+									?>
+								</span>
+							</label>
+						</span>
+					</li>
+				<?php endforeach; ?>
+			</ul>
+			<?php
+		endif;
+	}
+}

wp-includes/customize/class-wp-customize-nav-menu-name-control.php

@@ -40,10 +40,17 @@ class WP_Customize_Nav_Menu_Name_Control extends WP_Customize_Control {
 		?>
 		<label>
 			<# if ( data.label ) { #>
-				<span class="customize-control-title screen-reader-text">{{ data.label }}</span>
+				<span class="customize-control-title">{{ data.label }}</span>
 			<# } #>
-			<input type="text" class="menu-name-field live-update-section-title" />
+			<input type="text" class="menu-name-field live-update-section-title"
+				<# if ( data.description ) { #>
+					aria-describedby="{{ data.section }}-description"
+				<# } #>
+				/>
 		</label>
+		<# if ( data.description ) { #>
+			<p id="{{ data.section }}-description">{{ data.description }}</p>
+		<# } #>
 		<?php
 	}
 }

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

@@ -92,6 +92,10 @@ class WP_Customize_Nav_Menus_Panel extends WP_Customize_Panel {
 				<?php $this->render_screen_options(); ?>
 			</div>
 		</li>
+		<?php
+		// NOTE: The following is a workaround for an inability to treat (and thus label) a list of sections as a whole.
+		?>
+		<li class="customize-control-title customize-section-title-nav_menus-heading"><?php _e( 'Menus' ); ?></li>
 	<?php
 	}
 }

wp-includes/version.php

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