Customizer: Disambiguate a menu's auto-add pages option from preceding menu location checkboxes.

Creates a separate `nav_menu_auto_add` control type following the pattern of the `nav_menu_name` control type.

Props valendesigns.
Fixes #32820.

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


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

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

@@ -676,7 +676,7 @@
 		},
 
 		populateControls: function() {
-			var section = this, menuNameControlId, menuControl, menuNameControl;
+			var section = this, menuNameControlId, menuAutoAddControlId, menuControl, menuNameControl, menuAutoAddControl;
 
 			// Add the control for managing the menu name.
 			menuNameControlId = section.id + '[name]';
@@ -685,7 +685,7 @@
 				menuNameControl = new api.controlConstructor.nav_menu_name( menuNameControlId, {
 					params: {
 						type: 'nav_menu_name',
-						content: '<li id="customize-control-' + section.id.replace( '[', '-' ).replace( ']', '' ) + '-name" class="customize-control customize-control-nav_menu_name"></li>', // @todo core should do this for us
+						content: '<li id="customize-control-' + section.id.replace( '[', '-' ).replace( ']', '' ) + '-name" class="customize-control customize-control-nav_menu_name"></li>', // @todo core should do this for us; see #30741
 						label: '',
 						active: true,
 						section: section.id,
@@ -705,9 +705,9 @@
 				menuControl = new api.controlConstructor.nav_menu( section.id, {
 					params: {
 						type: 'nav_menu',
-						content: '<li id="customize-control-' + section.id.replace( '[', '-' ).replace( ']', '' ) + '" class="customize-control customize-control-nav_menu"></li>', // @todo core should do this for us
+						content: '<li id="customize-control-' + section.id.replace( '[', '-' ).replace( ']', '' ) + '" class="customize-control customize-control-nav_menu"></li>', // @todo core should do this for us; see #30741
 						section: section.id,
-						priority: 999,
+						priority: 998,
 						active: true,
 						settings: {
 							'default': section.id
@@ -719,6 +719,27 @@
 				menuControl.active.set( true );
 			}
 
+			// Add the control for managing the menu auto_add.
+			menuAutoAddControlId = section.id + '[auto_add]';
+			menuAutoAddControl = api.control( menuAutoAddControlId );
+			if ( ! menuAutoAddControl ) {
+				menuAutoAddControl = new api.controlConstructor.nav_menu_auto_add( menuAutoAddControlId, {
+					params: {
+						type: 'nav_menu_auto_add',
+						content: '<li id="customize-control-' + section.id.replace( '[', '-' ).replace( ']', '' ) + '-auto-add" class="customize-control customize-control-nav_menu_auto_add"></li>', // @todo core should do this for us
+						label: '',
+						active: true,
+						section: section.id,
+						priority: 999,
+						settings: {
+							'default': section.id
+						}
+					}
+				} );
+				api.control.add( menuAutoAddControl.id, menuAutoAddControl );
+				menuAutoAddControl.active.set( true );
+			}
+
 		},
 
 		/**
@@ -1591,6 +1612,52 @@
 
 	});
 
+	/**
+	 * wp.customize.Menus.MenuAutoAddControl
+	 *
+	 * Customizer control for a nav menu's auto add.
+	 *
+	 * @constructor
+	 * @augments wp.customize.Control
+	 */
+	api.Menus.MenuAutoAddControl = api.Control.extend({
+
+		ready: function() {
+			var control = this,
+				settingValue = 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() {
+				return api.section( control.section() ).active();
+			};
+
+			control.autoAddElement = new api.Element( control.container.find( 'input[type=checkbox].auto_add' ) );
+
+			control.autoAddElement.bind(function( value ) {
+				var settingValue = control.setting();
+				if ( settingValue && settingValue.name !== value ) {
+					settingValue = _.clone( settingValue );
+					settingValue.auto_add = value;
+					control.setting.set( settingValue );
+				}
+			});
+			if ( settingValue ) {
+				control.autoAddElement.set( settingValue.auto_add );
+			}
+
+			control.setting.bind(function( object ) {
+				if ( object ) {
+					control.autoAddElement.set( object.auto_add );
+				}
+			});
+		}
+
+	});
+
 	/**
 	 * wp.customize.Menus.MenuControl
 	 *
@@ -1662,25 +1729,6 @@
 			var control = this,
 				menuId = control.params.menu_id;
 
-			control.elements = {};
-			control.elements.auto_add = new api.Element( control.container.find( 'input[type=checkbox].auto_add' ) );
-
-			control.elements.auto_add.bind(function( auto_add ) {
-				var settingValue = control.setting();
-				if ( settingValue && settingValue.auto_add !== auto_add ) {
-					settingValue = _.clone( settingValue );
-					settingValue.auto_add = auto_add;
-					control.setting.set( settingValue );
-				}
-			});
-			control.elements.auto_add.set( control.setting().auto_add );
-			control.setting.bind(function( object ) {
-				if ( ! object ) {
-					return;
-				}
-				control.elements.auto_add.set( object.auto_add );
-			});
-
 			control.setting.bind( function( to ) {
 				var name;
 				if ( false === to ) {
@@ -2244,6 +2292,7 @@
 		nav_menu_item: api.Menus.MenuItemControl,
 		nav_menu: api.Menus.MenuControl,
 		nav_menu_name: api.Menus.MenuNameControl,
+		nav_menu_auto_add: api.Menus.MenuAutoAddControl,
 		new_menu: api.Menus.NewMenuControl
 	});
 

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

@@ -1603,14 +1603,7 @@ class WP_Customize_Nav_Menu_Control extends WP_Customize_Control {
 			<?php endforeach; ?>
 
 		</ul>
-		<?php endif; ?>
-		<p>
-			<label>
-				<input type="checkbox" class="auto_add">
-				<?php _e( 'Automatically add new top-level pages to this menu' ) ?>
-			</label>
-		</p>
-		<?php
+		<?php endif;
 	}
 
 	/**
@@ -1885,6 +1878,45 @@ class WP_Customize_Nav_Menu_Name_Control extends WP_Customize_Control {
 	}
 }
 
+/**
+ * Customize control to represent the auto_add field for a given menu.
+ *
+ * @since 4.3.0
+ */
+class WP_Customize_Nav_Menu_Auto_Add_Control extends WP_Customize_Control {
+
+	/**
+	 * Type of control, used by JS.
+	 *
+	 * @since 4.3.0
+	 *
+	 * @var string
+	 */
+	public $type = 'nav_menu_auto_add';
+
+	/**
+	 * No-op since we're using JS template.
+	 *
+	 * @since 4.3.0
+	 */
+	protected function render_content() {}
+
+	/**
+	 * Render the Underscore template for this control.
+	 *
+	 * @since 4.3.0
+	 */
+	protected function content_template() {
+		?>
+		<label>
+			<span class="customize-control-title"><?php _e( 'Menu Options' ); ?></span>
+			<input type="checkbox" class="auto_add" />
+			<?php _e( 'Automatically add new top-level pages to this menu' ); ?>
+		</label>
+		<?php
+	}
+}
+
 /**
  * Customize control class for new menus.
  *

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

@@ -405,6 +405,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_Auto_Add_Control' );
 		$this->manager->register_control_type( 'WP_Customize_Nav_Menu_Item_Control' );
 
 		// Create a panel for Menus.

wp-includes/version.php

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