Ticket #32841: 32841.5.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;
 
@@ -778 +784 @@
                         $hashed_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( $hashed_args['menu'] ) && is_object( $hashed_args['menu'] ) ) {
+                        $hashed_args['menu'] = $hashed_args['menu']->term_id;
+                }
+
                 ksort( $hashed_args );
                 $hashed_args['args_hash'] = $this->hash_nav_menu_args( $hashed_args );
 
@@ -798 +809 @@
          */
         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

@@ -159 +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
@@ -183 +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();
                         }
                 } );
@@ -203 +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 ] );
                 } );
         };
 

tests/phpunit/tests/customize/nav-menus.php

@@ -353 +353 @@
                         'echo'            => true,
                         'fallback_cb'     => 'wp_page_menu',
                         'walker'          => '',
+                        'menu'            => wp_create_nav_menu( 'Foo' ),
                 ) );
                 $this->assertEquals( 1, $results['can_partial_refresh'] );
 
@@ -390 +391 @@
 
                 $args = $menus->filter_wp_nav_menu_args( array(
                         'echo'        => true,
+                        'menu'        => wp_create_nav_menu( 'Foo' ),
                         'fallback_cb' => 'wp_page_menu',
                         'walker'      => '',
                 ) );
@@ -401 +403 @@
                 $object_args = json_decode( json_encode( $args ), false );
                 $result = $menus->filter_wp_nav_menu( $nav_menu_content, $object_args );
                 $expected = 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
+                        '<div class="partial-refreshable-nav-menu partial-refreshable-nav-menu-%1$d menu">',
+                        $args['instance_number']
                 );
-                $this->assertEquals( $expected, $result );
+                $this->assertStringStartsWith( $expected, $result );
         }
 
         /**