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.

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


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

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

@@ -32,8 +32,9 @@
 	color: #555;
 }
 
-/* The `edit-menu` button uses also the `button-link` class. */
+/* 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 .edit-menu,
+.customize-control-nav_menu_location .create-menu {
 	margin-right: 6px;
 	vertical-align: middle;
 	line-height: 28px;

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

@@ -32,8 +32,9 @@
 	color: #555;
 }
 
-/* The `edit-menu` button uses also the `button-link` class. */
+/* 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 .edit-menu,
+.customize-control-nav_menu_location .create-menu {
 	margin-left: 6px;
 	vertical-align: middle;
 	line-height: 28px;

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() ) {
+				var menuIsSelected = 0 !== control.setting();
-					control.container.find( '.edit-menu' ).addClass( 'hidden' );
+				control.container.find( '.create-menu' ).toggleClass( 'hidden', menuIsSelected );
-				} else {
+				control.container.find( '.edit-menu' ).toggleClass( 'hidden', ! menuIsSelected );
-					control.container.find( '.edit-menu' ).removeClass( 'hidden' );
-				}
 			});
 
 			// 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;
+			} );
 		}
 	});
 

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
 	}

wp-includes/version.php

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