Customizer: Remove additional wrapper element around `wp_nav_menu()` which broke some theme designs.

Also includes these related changes:
* Export `oldContainer` and `newContainer` among the `customize-preview-menu-refreshed` event params for themes to be able to more easily re-initialize the DOM elements.
* Improve performance for partial refresh by only sending settings related to the menu being previewed.
* Fix previewing of menu assigned to Custom Menu by exporting a menu `term_id` as opposed to an object, as the former is more stable for comparing in in args hashes.
* Do full refresh of preview when nav menu unassigned so that the layout can be updated.
* Harden conditions for when partial refresh is eligible for a `wp_nav_menu()` instance.

Fixes #32841.

Built from https://develop.svn.wordpress.org/trunk@33138


git-svn-id: http://core.svn.wordpress.org/trunk@33109 1a063a9b-81f0-0310-95a4-ce76da25c4cd

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(
-				'<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;

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 ] );
 		} );
 	};
 

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

@@ -1 +1 @@
-wp.customize.menusPreview=function(a,b){"use strict";var c;return c={renderQueryVar:null,renderNonceValue:null,renderNoncePostKey:null,previewCustomizeNonce:null,requestUri:"/",theme:{active:!1,stylesheet:""},navMenuInstanceArgs:{},refreshDebounceDelay:200},b.bind("preview-ready",function(){b.preview.bind("active",function(){c.init()})}),c.init=function(){var c=this;"undefined"!=typeof _wpCustomizePreviewNavMenusExports&&a.extend(c,_wpCustomizePreviewNavMenusExports),b.each(function(a,b){a.id=b,c.bindListener(a)}),b.preview.bind("setting",function(a){var d,e,f;a=a.slice(),d=a.shift(),e=a.shift(),b.has(d)||(f=b.create(d,e),f.id=d,c.bindListener(f)&&f.callbacks.fireWith(f,[f(),null]))})},c.bindListener=function(a){var b,d;return(b=a.id.match(/^nav_menu\[(-?\d+)]$/))?(a.navMenuId=parseInt(b[1],10),a.bind(c.onChangeNavMenuSetting),!0):(b=a.id.match(/^nav_menu_item\[(-?\d+)]$/))?(a.navMenuItemId=parseInt(b[1],10),a.bind(c.onChangeNavMenuItemSetting),!0):(b=a.id.match(/^nav_menu_locations\[(.+?)]/),b?(d=b[1],a.bind(function(){c.refreshMenuLocation(d)}),!0):!1)},c.onChangeNavMenuSetting=function(){var a=this;if(!a.navMenuId)throw new Error("Expected navMenuId property to be set.");c.refreshMenu(a.navMenuId)},c.onChangeNavMenuItemSetting=function(a,b){!b||!b.nav_menu_term_id||a&&b.nav_menu_term_id===a.nav_menu_term_id||c.refreshMenu(b.nav_menu_term_id),a&&a.nav_menu_term_id&&c.refreshMenu(a.nav_menu_term_id)},c.refreshMenu=function(a){var c=this,d=[];b.each(function(b,c){var e=c.match(/^nav_menu_locations\[(.+?)]/);e&&a===b()&&d.push(e[1])}),_.each(c.navMenuInstanceArgs,function(b,e){(a===b.menu||-1!==_.indexOf(d,b.theme_location))&&c.refreshMenuInstanceDebounced(e)})},c.refreshMenuLocation=function(a){var d=!1;_.each(c.navMenuInstanceArgs,function(b,e){a===b.theme_location&&(c.refreshMenuInstanceDebounced(e),d=!0)}),d||b.preview.send("refresh")},c.refreshMenuInstance=function(c){var d,e,f,g,h,i,j=this;if(!j.navMenuInstanceArgs[c])throw new Error("unknown_instance_number");return i=j.navMenuInstanceArgs[c],f=a("#partial-refresh-menu-container-"+String(c)),i.can_partial_refresh&&0!==f.length?(d={nonce:j.previewCustomizeNonce,wp_customize:"on"},j.theme.active||(d.theme=j.theme.stylesheet),d[j.renderQueryVar]="1",e={},b.each(function(a,b){/^(nav_menu|nav_menu_locations)/.test(b)&&(e[b]=a.get())}),d.customized=JSON.stringify(e),d[j.renderNoncePostKey]=j.renderNonceValue,h=a.extend({},i),d.wp_nav_menu_args_hash=h.args_hash,delete h.args_hash,d.wp_nav_menu_args=JSON.stringify(h),f.addClass("customize-partial-refreshing"),g=wp.ajax.send(null,{data:d,url:j.requestUri}),g.done(function(b){var d;f.empty().append(a(b)),d={instanceNumber:c,wpNavArgs:h},a(document).trigger("customize-preview-menu-refreshed",[d])}),g.fail(function(){}),void g.always(function(){f.removeClass("customize-partial-refreshing")})):void b.preview.send("refresh")},c.currentRefreshMenuInstanceDebouncedCalls={},c.refreshMenuInstanceDebounced=function(a){c.currentRefreshMenuInstanceDebouncedCalls[a]&&clearTimeout(c.currentRefreshMenuInstanceDebouncedCalls[a]),c.currentRefreshMenuInstanceDebouncedCalls[a]=setTimeout(function(){c.refreshMenuInstance(a)},c.refreshDebounceDelay)},c}(jQuery,wp.customize);
+wp.customize.menusPreview=function(a,b){"use strict";var c;return c={renderQueryVar:null,renderNonceValue:null,renderNoncePostKey:null,previewCustomizeNonce:null,requestUri:"/",theme:{active:!1,stylesheet:""},navMenuInstanceArgs:{},refreshDebounceDelay:200},b.bind("preview-ready",function(){b.preview.bind("active",function(){c.init()})}),c.init=function(){var c=this;"undefined"!=typeof _wpCustomizePreviewNavMenusExports&&a.extend(c,_wpCustomizePreviewNavMenusExports),b.each(function(a,b){a.id=b,c.bindListener(a)}),b.preview.bind("setting",function(a){var d,e,f;a=a.slice(),d=a.shift(),e=a.shift(),b.has(d)||(f=b.create(d,e),f.id=d,c.bindListener(f)&&f.callbacks.fireWith(f,[f(),null]))})},c.bindListener=function(a){var b,d;return(b=a.id.match(/^nav_menu\[(-?\d+)]$/))?(a.navMenuId=parseInt(b[1],10),a.bind(c.onChangeNavMenuSetting),!0):(b=a.id.match(/^nav_menu_item\[(-?\d+)]$/))?(a.navMenuItemId=parseInt(b[1],10),a.bind(c.onChangeNavMenuItemSetting),!0):(b=a.id.match(/^nav_menu_locations\[(.+?)]/),b?(d=b[1],a.bind(function(){c.refreshMenuLocation(d)}),!0):!1)},c.onChangeNavMenuSetting=function(){var a=this;if(!a.navMenuId)throw new Error("Expected navMenuId property to be set.");c.refreshMenu(a.navMenuId)},c.onChangeNavMenuItemSetting=function(a,b){!b||!b.nav_menu_term_id||a&&b.nav_menu_term_id===a.nav_menu_term_id||c.refreshMenu(b.nav_menu_term_id),a&&a.nav_menu_term_id&&c.refreshMenu(a.nav_menu_term_id)},c.refreshMenu=function(a){var c=this,d=[];b.each(function(b,c){var e=c.match(/^nav_menu_locations\[(.+?)]/);e&&a===b()&&d.push(e[1])}),_.each(c.navMenuInstanceArgs,function(b,e){(a===b.menu||-1!==_.indexOf(d,b.theme_location))&&c.refreshMenuInstanceDebounced(e)})},c.refreshMenuLocation=function(a){var d=!1;_.each(c.navMenuInstanceArgs,function(b,e){a===b.theme_location&&(c.refreshMenuInstanceDebounced(e),d=!0)}),d||b.preview.send("refresh")},c.refreshMenuInstance=function(c){var d,e,f,g,h,i,j,k,l=this;if(!l.navMenuInstanceArgs[c])throw new Error("unknown_instance_number");return j=l.navMenuInstanceArgs[c],k="partial-refreshable-nav-menu-"+String(c),g=a("."+k),_.isNumber(j.menu)?e=j.menu:j.theme_location&&b.has("nav_menu_locations["+j.theme_location+"]")&&(e=b("nav_menu_locations["+j.theme_location+"]").get()),e&&j.can_partial_refresh&&0!==g.length?(e=parseInt(e,10),d={nonce:l.previewCustomizeNonce,wp_customize:"on"},l.theme.active||(d.theme=l.theme.stylesheet),d[l.renderQueryVar]="1",f={},b.each(function(a,b){(b==="nav_menu["+String(e)+"]"||/^nav_menu_item\[/.test(b)&&a()&&e===a().nav_menu_term_id)&&(f[b]=a.get())}),d.customized=JSON.stringify(f),d[l.renderNoncePostKey]=l.renderNonceValue,i=a.extend({},j),d.wp_nav_menu_args_hash=i.args_hash,delete i.args_hash,d.wp_nav_menu_args=JSON.stringify(i),g.addClass("customize-partial-refreshing"),h=wp.ajax.send(null,{data:d,url:l.requestUri}),void h.done(function(d){if(!1===d)return void b.preview.send("refresh");var e,f=g;g=a(d),g.addClass(k),g.addClass("partial-refreshable-nav-menu customize-partial-refreshing"),f.replaceWith(g),e={instanceNumber:c,wpNavArgs:i,oldContainer:f,newContainer:g},g.removeClass("customize-partial-refreshing"),a(document).trigger("customize-preview-menu-refreshed",[e])})):void b.preview.send("refresh")},c.currentRefreshMenuInstanceDebouncedCalls={},c.refreshMenuInstanceDebounced=function(a){c.currentRefreshMenuInstanceDebouncedCalls[a]&&clearTimeout(c.currentRefreshMenuInstanceDebouncedCalls[a]),c.currentRefreshMenuInstanceDebouncedCalls[a]=setTimeout(function(){c.refreshMenuInstance(a)},c.refreshDebounceDelay)},c}(jQuery,wp.customize);

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.3-beta1-33137';
+$wp_version = '4.3-beta1-33138';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.