From 3e58b38b28e9b9211ef8afc63a2eb7b9c257075a Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Wed, 8 Jul 2015 21:30:24 +0000 Subject: [PATCH] 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 | 20 +++++++-- wp-includes/js/customize-preview-nav-menus.js | 42 ++++++++++++------- .../js/customize-preview-nav-menus.min.js | 2 +- wp-includes/version.php | 2 +- 4 files changed, 46 insertions(+), 20 deletions(-) diff --git a/wp-includes/class-wp-customize-nav-menus.php b/wp-includes/class-wp-customize-nav-menus.php index c13ed93ba7..f85ebfc0fb 100644 --- a/wp-includes/class-wp-customize-nav-menus.php +++ b/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( - '
%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 a/wp-includes/js/customize-preview-nav-menus.js b/wp-includes/js/customize-preview-nav-menus.js index ce962d63f4..d1ce55892b 100644 --- a/wp-includes/js/customize-preview-nav-menus.js +++ b/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 a/wp-includes/js/customize-preview-nav-menus.min.js b/wp-includes/js/customize-preview-nav-menus.min.js index 1bd2ee65e1..a773143100 100644 --- a/wp-includes/js/customize-preview-nav-menus.min.js +++ b/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); \ No newline at end of file +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); \ No newline at end of file diff --git a/wp-includes/version.php b/wp-includes/version.php index 021a0573e8..4c42b0b68a 100644 --- a/wp-includes/version.php +++ b/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.