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
This commit is contained in:
Weston Ruter 2015-07-08 21:30:24 +00:00
parent 73d57e6c86
commit 3e58b38b28
4 changed files with 46 additions and 20 deletions

View File

@ -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;

View File

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

View File

@ -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);

View File

@ -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.