diff --git src/wp-includes/class-wp-customize-nav-menus.php src/wp-includes/class-wp-customize-nav-menus.php
index c13ed93..f85ebfc 100644
--- src/wp-includes/class-wp-customize-nav-menus.php
+++ src/wp-includes/class-wp-customize-nav-menus.php
@@ -768,6 +768,12 @@ final class WP_Customize_Nav_Menus {
( 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,6 +784,11 @@ final class WP_Customize_Nav_Menus {
$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,10 +809,11 @@ final class WP_Customize_Nav_Menus {
*/
public function filter_wp_nav_menu( $nav_menu_content, $args ) {
if ( ! empty( $args->can_partial_refresh ) && ! empty( $args->instance_number ) ) {
- $nav_menu_content = sprintf(
- '',
- $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;
diff --git src/wp-includes/js/customize-preview-nav-menus.js src/wp-includes/js/customize-preview-nav-menus.js
index ce962d6..d1ce558 100644
--- src/wp-includes/js/customize-preview-nav-menus.js
+++ src/wp-includes/js/customize-preview-nav-menus.js
@@ -159,19 +159,27 @@ wp.customize.menusPreview = ( function( $, api ) {
* @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,8 +191,8 @@ wp.customize.menusPreview = ( function( $, api ) {
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,19 +211,25 @@ wp.customize.menusPreview = ( function( $, api ) {
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 ] );
} );
};
diff --git tests/phpunit/tests/customize/nav-menus.php tests/phpunit/tests/customize/nav-menus.php
index 616bf0b..7fa88e7 100644
--- tests/phpunit/tests/customize/nav-menus.php
+++ tests/phpunit/tests/customize/nav-menus.php
@@ -353,6 +353,7 @@ class Test_WP_Customize_Nav_Menus extends WP_UnitTestCase {
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'walker' => '',
+ 'menu' => wp_create_nav_menu( 'Foo' ),
) );
$this->assertEquals( 1, $results['can_partial_refresh'] );
@@ -390,6 +391,7 @@ class Test_WP_Customize_Nav_Menus extends WP_UnitTestCase {
$args = $menus->filter_wp_nav_menu_args( array(
'echo' => true,
+ 'menu' => wp_create_nav_menu( 'Foo' ),
'fallback_cb' => 'wp_page_menu',
'walker' => '',
) );
@@ -401,11 +403,10 @@ class Test_WP_Customize_Nav_Menus extends WP_UnitTestCase {
$object_args = json_decode( json_encode( $args ), false );
$result = $menus->filter_wp_nav_menu( $nav_menu_content, $object_args );
$expected = sprintf(
- '',
- $args['instance_number'],
- $nav_menu_content
+ '