diff --git src/wp-includes/class-wp-customize-nav-menus.php src/wp-includes/class-wp-customize-nav-menus.php index e7b7e0f..05efe43 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; @@ -776,6 +782,11 @@ final class WP_Customize_Nav_Menus { $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,10 +807,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( - '
%2$s
', - $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 2b6c994..d1ce558 100644 --- src/wp-includes/js/customize-preview-nav-menus.js +++ src/wp-includes/js/customize-preview-nav-menus.js @@ -9,7 +9,6 @@ wp.customize.menusPreview = ( function( $, api ) { renderNonceValue: null, renderNoncePostKey: null, previewCustomizeNonce: null, - previewReady: $.Deferred(), requestUri: '/', theme: { active: false, @@ -20,10 +19,9 @@ wp.customize.menusPreview = ( function( $, api ) { }; api.bind( 'preview-ready', function() { - self.previewReady.resolve(); - } ); - self.previewReady.done( function() { - self.init(); + api.preview.bind( 'active', function() { + self.init(); + } ); } ); /** @@ -36,26 +34,24 @@ wp.customize.menusPreview = ( function( $, api ) { $.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,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 @@ -187,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(); } } ); @@ -207,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 ] ); } ); };