From 043609bca4e4446c1d418d81d9c8fb7d767de878 Mon Sep 17 00:00:00 2001
From: Konstantin Obenland <obenland@git.wordpress.org>
Date: Wed, 18 Oct 2017 14:50:34 +0000
Subject: [PATCH] Customize: Allow menu creation in locations pane

Adds a link to the menu creation workflow from the locations selector in the nav menu control.

Props bpayton, westonruter, Travel_girl, melchoyce, celloexpressions.
Fixes #36279.


git-svn-id: https://develop.svn.wordpress.org/trunk@41899 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/customize-nav-menus.css      |  5 +-
 src/wp-admin/js/customize-nav-menus.js        | 55 +++++++++++++++++--
 ...wp-customize-nav-menu-location-control.php |  2 +
 .../qunit/wp-admin/js/customize-nav-menus.js  |  1 +
 4 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/src/wp-admin/css/customize-nav-menus.css b/src/wp-admin/css/customize-nav-menus.css
index f88c21d353..50f907aeb9 100644
--- a/src/wp-admin/css/customize-nav-menus.css
+++ b/src/wp-admin/css/customize-nav-menus.css
@@ -32,8 +32,9 @@
 	color: #555;
 }
 
-/* The `edit-menu` button uses also the `button-link` class. */
-.customize-control-nav_menu_location .edit-menu {
+/* The `edit-menu` and `create-menu` buttons also use the `button-link` class. */
+.customize-control-nav_menu_location .edit-menu,
+.customize-control-nav_menu_location .create-menu {
 	margin-left: 6px;
 	vertical-align: middle;
 	line-height: 28px;
diff --git a/src/wp-admin/js/customize-nav-menus.js b/src/wp-admin/js/customize-nav-menus.js
index 6ca5daba46..31768861ad 100644
--- a/src/wp-admin/js/customize-nav-menus.js
+++ b/src/wp-admin/js/customize-nav-menus.js
@@ -1384,6 +1384,28 @@
 
 			// 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...
+		},
+
+		/**
+		 * Select a default location.
+		 *
+		 * This method selects a single location by default so we can support
+		 * creating a menu for a specific menu location.
+		 *
+		 * @since 4.9.0
+		 *
+		 * @param {string|null} locationId - The ID of the location to select. `null` clears all selections.
+		 * @returns {void}
+		 */
+		selectDefaultLocation: function( locationId ) {
+			var locationControl = api.control( this.id + '[locations]' ),
+				locationSelections = {};
+
+			if ( locationId !== null ) {
+				locationSelections[ locationId ] = true;
+			}
+
+			locationControl.setSelections( locationSelections );
 		}
 	});
 
@@ -1416,17 +1438,20 @@
 				}
 			};
 
-			// Edit menu button.
+			// Create and Edit menu buttons.
+			control.container.find( '.create-menu' ).on( 'click', function() {
+				var addMenuSection = api.section( 'add_menu' );
+				addMenuSection.selectDefaultLocation( this.dataset.locationId );
+				addMenuSection.focus();
+			} );
 			control.container.find( '.edit-menu' ).on( 'click', function() {
 				var menuId = control.setting();
 				api.section( 'nav_menu[' + menuId + ']' ).focus();
 			});
 			control.setting.bind( 'change', function() {
-				if ( 0 === control.setting() ) {
-					control.container.find( '.edit-menu' ).addClass( 'hidden' );
-				} else {
-					control.container.find( '.edit-menu' ).removeClass( 'hidden' );
-				}
+				var menuIsSelected = 0 !== control.setting();
+				control.container.find( '.create-menu' ).toggleClass( 'hidden', menuIsSelected );
+				control.container.find( '.edit-menu' ).toggleClass( 'hidden', ! menuIsSelected );
 			});
 
 			// Add/remove menus from the available options when they are added and removed.
@@ -2350,6 +2375,24 @@
 				} );
 				updateSelectedMenuLabel( navMenuLocationSetting.get() );
 			});
+		},
+
+		/**
+		 * Set the selected locations.
+		 *
+		 * This method sets the selected locations and allows us to do things like
+		 * set the default location for a new menu.
+		 *
+		 * @since 4.9.0
+		 *
+		 * @param {Object.<string,boolean>} selections - A map of location selections.
+		 * @returns {void}
+		 */
+		setSelections: function( selections ) {
+			this.container.find( '.menu-location' ).each( function( i, checkboxNode ) {
+				var locationId = checkboxNode.dataset.locationId;
+				checkboxNode.checked = locationId in selections ? selections[ locationId ] : false;
+			} );
 		}
 	});
 
diff --git a/src/wp-includes/customize/class-wp-customize-nav-menu-location-control.php b/src/wp-includes/customize/class-wp-customize-nav-menu-location-control.php
index dff79f17ad..40ea69e4e1 100644
--- a/src/wp-includes/customize/class-wp-customize-nav-menu-location-control.php
+++ b/src/wp-includes/customize/class-wp-customize-nav-menu-location-control.php
@@ -50,6 +50,7 @@ class WP_Customize_Nav_Menu_Location_Control extends WP_Customize_Control {
 	 * Render content just like a normal select control.
 	 *
 	 * @since 4.3.0
+	 * @since 4.9.0 Added a button to create menus.
 	 */
 	public function render_content() {
 		if ( empty( $this->choices ) ) {
@@ -73,6 +74,7 @@ class WP_Customize_Nav_Menu_Location_Control extends WP_Customize_Control {
 				?>
 			</select>
 		</label>
+		<button type="button" class="button-link create-menu<?php if ( $this->value() ) { echo ' hidden'; } ?>" data-location-id="<?php echo esc_attr( $this->location_id ); ?>" aria-label="<?php esc_attr_e( 'Create a menu for this location' ); ?>"><?php _e( '+ Create New Menu' ); ?></button>
 		<button type="button" class="button-link edit-menu<?php if ( ! $this->value() ) { echo ' hidden'; } ?>" aria-label="<?php esc_attr_e( 'Edit selected menu' ); ?>"><?php _e( 'Edit Menu' ); ?></button>
 		<?php
 	}
diff --git a/tests/qunit/wp-admin/js/customize-nav-menus.js b/tests/qunit/wp-admin/js/customize-nav-menus.js
index f77111c171..9b60272875 100644
--- a/tests/qunit/wp-admin/js/customize-nav-menus.js
+++ b/tests/qunit/wp-admin/js/customize-nav-menus.js
@@ -110,6 +110,7 @@ jQuery( window ).load( function (){
 
 	// @todo Add tests for api.Menus.NewMenuSection
 	// @todo Add tests for api.Menus.MenuLocationControl
+	// @todo Add tests for api.Menus.MenuLocationsControl
 	// @todo Add tests for api.Menus.MenuAutoAddControl
 	// @todo Add tests for api.Menus.MenuControl
 	// @todo Add tests for api.Menus.NewMenuControl