sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source 
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.


git-svn-id: https://develop.svn.wordpress.org/trunk@33138 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Weston Ruter 2015-07-08 21:29:53 +00:00
parent 55de610283
commit 2a8973f117
3 changed files with 49 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/wp-includes/class-wp-customize-nav-menus.php
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;

42
src/wp-includes/js/customize-preview-nav-menus.js
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 ] );
} );
};

9
tests/phpunit/tests/customize/nav-menus.php
View File

@ -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(
'<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
'<div class="partial-refreshable-nav-menu partial-refreshable-nav-menu-%1$d menu">',
$args['instance_number']
);
$this->assertEquals( $expected, $result );
$this->assertStringStartsWith( $expected, $result );
}
/**