Ticket #32841: 32841.4.with-32894.diff

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

@@ -768 +768 @@
                         ( empty( $args['fallback_cb'] ) || is_string( $args['fallback_cb'] ) )
                         &&
                         ( empty( $args['walker'] ) || is_string( $args['walker'] ) )
+                        &&
+                        (
+                                ! empty( $args['theme_location'] )
+                                ||
+                                ( ! empty( $args['menu'] ) && ( is_numeric( $args['menu'] ) || is_object( $args['menu'] ) ) )
+                        )
                 );
                 $args['can_partial_refresh'] = $can_partial_refresh;
 
@@ -776 +782 @@
                         $args['walker'] = '';
                 }
 
+                // Replace object menu arg with a term_id menu arg, as this exports better to JS and is easier to compare hashes.
+                if ( ! empty( $args['menu'] ) && is_object( $args['menu'] ) ) {
+                        $args['menu'] = $args['menu']->term_id;
+                }
+
                 ksort( $args );
                 $args['args_hash'] = $this->hash_nav_menu_args( $args );
 
@@ -796 +807 @@
          */
         public function filter_wp_nav_menu( $nav_menu_content, $args ) {
                 if ( ! empty( $args->can_partial_refresh ) && ! empty( $args->instance_number ) ) {
-                        $nav_menu_content = sprintf(
-                                '<div id="partial-refresh-menu-container-%1$d" class="partial-refresh-menu-container" data-instance-number="%1$d">%2$s</div>',
-                                $args->instance_number,
-                                $nav_menu_content
+                        $nav_menu_content = preg_replace(
+                                '/(?<=class=")/',
+                                sprintf( 'partial-refreshable-nav-menu partial-refreshable-nav-menu-%1$d ', $args->instance_number ),
+                                $nav_menu_content,
+                                1 // Only update the class on the first element found, the menu container.
                         );
                 }
                 return $nav_menu_content;

src/wp-includes/js/customize-preview-nav-menus.js

@@ -9 +9 @@
                 renderNonceValue: null,
                 renderNoncePostKey: null,
                 previewCustomizeNonce: null,
-                previewReady: $.Deferred(),
                 requestUri: '/',
                 theme: {
                         active: false,
@@ -20 +19 @@
         };
 
         api.bind( 'preview-ready', function() {
-                self.previewReady.resolve();
-        } );
-        self.previewReady.done( function() {
-                self.init();
+                api.preview.bind( 'active', function() {
+                        self.init();
+                } );
         } );
 
         /**
@@ -36 +34 @@
                         $.extend( self, _wpCustomizePreviewNavMenusExports );
                 }
 
-                self.previewReady.done( function() {
-                        api.each( function( setting, id ) {
-                                setting.id = id;
-                                self.bindListener( setting );
-                        } );
+                api.each( function( setting, id ) {
+                        setting.id = id;
+                        self.bindListener( setting );
+                } );
 
-                        api.preview.bind( 'setting', function( args ) {
-                                var id, value, setting;
-                                args = args.slice();
-                                id = args.shift();
-                                value = args.shift();
-                                if ( ! api.has( id ) ) {
-                                        // Currently customize-preview.js is not creating settings for dynamically-created settings in the pane; so we have to do it
-                                        setting = api.create( id, value ); // @todo This should be in core
-                                        setting.id = id;
-                                        if ( self.bindListener( setting ) ) {
-                                                setting.callbacks.fireWith( setting, [ setting(), setting() ] );
-                                        }
+                api.preview.bind( 'setting', function( args ) {
+                        var id, value, setting;
+                        args = args.slice();
+                        id = args.shift();
+                        value = args.shift();
+                        if ( ! api.has( id ) ) {
+                                // Currently customize-preview.js is not creating settings for dynamically-created settings in the pane; so we have to do it
+                                setting = api.create( id, value ); // @todo This should be in core
+                                setting.id = id;
+                                if ( self.bindListener( setting ) ) {
+                                        setting.callbacks.fireWith( setting, [ setting(), null ] );
                                 }
-                        } );
+                        }
                 } );
         };
 
@@ -163 +159 @@
          * @param {int} instanceNumber
          */
         self.refreshMenuInstance = function( instanceNumber ) {
-                var self = this, data, customized, container, request, wpNavArgs, instance;
+                var self = this, data, menuId, customized, container, request, wpNavArgs, instance, containerInstanceClassName;
 
                 if ( ! self.navMenuInstanceArgs[ instanceNumber ] ) {
                         throw new Error( 'unknown_instance_number' );
                 }
                 instance = self.navMenuInstanceArgs[ instanceNumber ];
 
-                container = $( '#partial-refresh-menu-container-' + String( instanceNumber ) );
+                containerInstanceClassName = 'partial-refreshable-nav-menu-' + String( instanceNumber );
+                container = $( '.' + containerInstanceClassName );
 
-                if ( ! instance.can_partial_refresh || 0 === container.length ) {
+                if ( _.isNumber( instance.menu ) ) {
+                        menuId = instance.menu;
+                } else if ( instance.theme_location && api.has( 'nav_menu_locations[' + instance.theme_location + ']' ) ) {
+                        menuId = api( 'nav_menu_locations[' + instance.theme_location + ']' ).get();
+                }
+
+                if ( ! menuId || ! instance.can_partial_refresh || 0 === container.length ) {
                         api.preview.send( 'refresh' );
                         return;
                 }
+                menuId = parseInt( menuId, 10 );
 
                 data = {
                         nonce: self.previewCustomizeNonce, // for Customize Preview
@@ -187 +191 @@
                 data[ self.renderQueryVar ] = '1';
                 customized = {};
                 api.each( function( setting, id ) {
-                        // @todo We need to limit this to just the menu items that are associated with this menu/location.
-                        if ( /^(nav_menu|nav_menu_locations)/.test( id ) ) {
+                        // @todo Core should propagate the dirty state into the Preview as well so we can use that here.
+                        if ( id === 'nav_menu[' + String( menuId ) + ']' || ( /^nav_menu_item\[/.test( id ) && setting() && menuId === setting().nav_menu_term_id ) ) {
                                 customized[ id ] = setting.get();
                         }
                 } );
@@ -207 +211 @@
                         url: self.requestUri
                 } );
                 request.done( function( data ) {
-                        var eventParam;
-                        container.empty().append( $( data ) );
+                        // If the menu is now not visible, refresh since the page layout may have changed.
+                        if ( false === data ) {
+                                api.preview.send( 'refresh' );
+                                return;
+                        }
+
+                        var eventParam, previousContainer = container;
+                        container = $( data );
+                        container.addClass( containerInstanceClassName );
+                        container.addClass( 'partial-refreshable-nav-menu customize-partial-refreshing' );
+                        previousContainer.replaceWith( container );
                         eventParam = {
                                 instanceNumber: instanceNumber,
-                                wpNavArgs: wpNavArgs
+                                wpNavArgs: wpNavArgs,
+                                oldContainer: previousContainer,
+                                newContainer: container
                         };
-                        $( document ).trigger( 'customize-preview-menu-refreshed', [ eventParam ] );
-                } );
-                request.fail( function() {
-                        // @todo provide some indication for why
-                } );
-                request.always( function() {
                         container.removeClass( 'customize-partial-refreshing' );
+                        $( document ).trigger( 'customize-preview-menu-refreshed', [ eventParam ] );
                 } );
         };