Ticket #38952: 38952.1.diff

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

@@ -301 +301 @@
         text-decoration: none !important;
 }
 
-#accordion-panel-nav_menus .field-link-target,
-#accordion-panel-nav_menus .field-title-attribute,
-#accordion-panel-nav_menus .field-css-classes,
-#accordion-panel-nav_menus .field-xfn,
-#accordion-panel-nav_menus .field-description {
+.control-section-nav_menu .field-link-target,
+.control-section-nav_menu .field-title-attribute,
+.control-section-nav_menu .field-css-classes,
+.control-section-nav_menu .field-xfn,
+.control-section-nav_menu .field-description {
         display: none;
 }
 
-#accordion-panel-nav_menus.field-link-target-active .field-link-target,
-#accordion-panel-nav_menus.field-title-attribute-active .field-title-attribute,
-#accordion-panel-nav_menus.field-css-classes-active .field-css-classes,
-#accordion-panel-nav_menus.field-xfn-active .field-xfn,
-#accordion-panel-nav_menus.field-description-active .field-description {
+.control-section-nav_menu.field-link-target-active .field-link-target,
+.control-section-nav_menu.field-title-attribute-active .field-title-attribute,
+.control-section-nav_menu.field-css-classes-active .field-css-classes,
+.control-section-nav_menu.field-xfn-active .field-xfn,
+.control-section-nav_menu.field-description-active .field-description {
         display: block;
 }
 

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

@@ -790 +790 @@
                  */
                 ready: function() {
                         var panel = this;
-                        this.container.find( '.hide-column-tog' ).click( function() {
-                                var $t = $( this ), column = $t.val();
-                                if ( $t.prop( 'checked' ) ) {
-                                        panel.checked( column );
-                                } else {
-                                        panel.unchecked( column );
-                                }
-
+                        panel.container.find( '.hide-column-tog' ).click( function() {
                                 panel.saveManageColumnsState();
                         });
-                        this.container.find( '.hide-column-tog' ).each( function() {
-                        var $t = $( this ), column = $t.val();
-                                if ( $t.prop( 'checked' ) ) {
-                                        panel.checked( column );
-                                } else {
-                                        panel.unchecked( column );
-                                }
-                        });
                 },
 
+                /**
+                 * Save hidden column states.
+                 *
+                 * @since 4.3.0
+                 * @private
+                 *
+                 * @returns {void}
+                 */
                 saveManageColumnsState: _.debounce( function() {
                         var panel = this;
                         if ( panel._updateHiddenColumnsRequest ) {
@@ -826 +819 @@
                         } );
                 }, 2000 ),
 
-                checked: function( column ) {
-                        this.container.addClass( 'field-' + column + '-active' );
-                },
+                /**
+                 * @deprecated Since 4.7.0 now that the nav_menu sections are responsible for toggling the classes on their own containers.
+                 */
+                checked: function() {},
 
-                unchecked: function( column ) {
-                        this.container.removeClass( 'field-' + column + '-active' );
-                },
+                /**
+                 * @deprecated Since 4.7.0 now that the nav_menu sections are responsible for toggling the classes on their own containers.
+                 */
+                unchecked: function() {},
 
+                /**
+                 * Get hidden fields.
+                 *
+                 * @since 4.3.0
+                 * @private
+                 *
+                 * @returns {Array} Fields (columns) that are hidden.
+                 */
                 hidden: function() {
                         return $( '.hide-column-tog' ).not( ':checked' ).map( function() {
                                 var id = this.id;
@@ -871 +874 @@
                  * Ready.
                  */
                 ready: function() {
-                        var section = this;
+                        var section = this, fieldActiveToggles, handleFieldActiveToggle;
 
                         if ( 'undefined' === typeof section.params.menu_id ) {
                                 throw new Error( 'params.menu_id was not defined' );
@@ -923 +926 @@
                                 section.container.find( '.menu-item.move-left-disabled .menus-move-left' ).attr({ 'tabindex': '-1', 'aria-hidden': 'true' });
                                 section.container.find( '.menu-item.move-right-disabled .menus-move-right' ).attr({ 'tabindex': '-1', 'aria-hidden': 'true' });
                         } );
+
+                        /**
+                         * Update the active field class for the content container for a given checkbox toggle.
+                         *
+                         * @this {jQuery}
+                         * @returns {void}
+                         */
+                        handleFieldActiveToggle = function() {
+                                var className = 'field-' + $( this ).val() + '-active';
+                                section.contentContainer.toggleClass( className, $( this ).prop( 'checked' ) );
+                        };
+                        fieldActiveToggles = api.panel( 'nav_menus' ).contentContainer.find( '.metabox-prefs:first' ).find( '.hide-column-tog' );
+                        fieldActiveToggles.each( handleFieldActiveToggle );
+                        fieldActiveToggles.on( 'click', handleFieldActiveToggle );
                 },
 
                 populateControls: function() {