Ticket #32841: 32841.diff

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

@@ -795 +795 @@
          */
         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

@@ -163 +163 @@
          * @param {int} instanceNumber
          */
         self.refreshMenuInstance = function( instanceNumber ) {
-                var self = this, data, customized, container, request, wpNavArgs, instance;
+                var self = this, data, 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 ) {
                         api.preview.send( 'refresh' );
@@ -207 +208 @@
                         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
                         };
-                        $( 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 ] );
                 } );
         };