Ticket #32820: 32820.diff

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

@@ -676 +676 @@
                 },
 
                 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]';
@@ -707 +707 @@
                                                 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
                                                 section: section.id,
-                                                priority: 999,
+                                                priority: 998,
                                                 active: true,
                                                 settings: {
                                                         'default': section.id
@@ -719 +719 @@
                                 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 );
+                        }
+
                 },
 
                 /**
@@ -1592 +1613 @@
         });
 
         /**
+         * 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
          *
          * Customizer control for menus.
@@ -1662 +1729 @@
                         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 +2292 @@
                 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
         });
 

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

@@ -1603 +1603 @@
                         <?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;
         }
 
         /**
@@ -1886 +1879 @@
 }
 
 /**
+ * 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.
  *
  * @since 4.3.0

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

@@ -405 +405 @@
                 $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.