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. git-svn-id: https://develop.svn.wordpress.org/trunk@33138 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
parent
55de610283
commit
2a8973f117
|
@ -768,6 +768,12 @@ final class WP_Customize_Nav_Menus {
|
||||||
( empty( $args['fallback_cb'] ) || is_string( $args['fallback_cb'] ) )
|
( empty( $args['fallback_cb'] ) || is_string( $args['fallback_cb'] ) )
|
||||||
&&
|
&&
|
||||||
( empty( $args['walker'] ) || is_string( $args['walker'] ) )
|
( 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;
|
$args['can_partial_refresh'] = $can_partial_refresh;
|
||||||
|
|
||||||
|
@ -778,6 +784,11 @@ final class WP_Customize_Nav_Menus {
|
||||||
$hashed_args['walker'] = '';
|
$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 );
|
ksort( $hashed_args );
|
||||||
$hashed_args['args_hash'] = $this->hash_nav_menu_args( $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 ) {
|
public function filter_wp_nav_menu( $nav_menu_content, $args ) {
|
||||||
if ( ! empty( $args->can_partial_refresh ) && ! empty( $args->instance_number ) ) {
|
if ( ! empty( $args->can_partial_refresh ) && ! empty( $args->instance_number ) ) {
|
||||||
$nav_menu_content = sprintf(
|
$nav_menu_content = preg_replace(
|
||||||
'<div id="partial-refresh-menu-container-%1$d" class="partial-refresh-menu-container" data-instance-number="%1$d">%2$s</div>',
|
'/(?<=class=")/',
|
||||||
$args->instance_number,
|
sprintf( 'partial-refreshable-nav-menu partial-refreshable-nav-menu-%1$d ', $args->instance_number ),
|
||||||
$nav_menu_content
|
$nav_menu_content,
|
||||||
|
1 // Only update the class on the first element found, the menu container.
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
return $nav_menu_content;
|
return $nav_menu_content;
|
||||||
|
|
|
@ -159,19 +159,27 @@ wp.customize.menusPreview = ( function( $, api ) {
|
||||||
* @param {int} instanceNumber
|
* @param {int} instanceNumber
|
||||||
*/
|
*/
|
||||||
self.refreshMenuInstance = function( 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 ] ) {
|
if ( ! self.navMenuInstanceArgs[ instanceNumber ] ) {
|
||||||
throw new Error( 'unknown_instance_number' );
|
throw new Error( 'unknown_instance_number' );
|
||||||
}
|
}
|
||||||
instance = self.navMenuInstanceArgs[ instanceNumber ];
|
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' );
|
api.preview.send( 'refresh' );
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
menuId = parseInt( menuId, 10 );
|
||||||
|
|
||||||
data = {
|
data = {
|
||||||
nonce: self.previewCustomizeNonce, // for Customize Preview
|
nonce: self.previewCustomizeNonce, // for Customize Preview
|
||||||
|
@ -183,8 +191,8 @@ wp.customize.menusPreview = ( function( $, api ) {
|
||||||
data[ self.renderQueryVar ] = '1';
|
data[ self.renderQueryVar ] = '1';
|
||||||
customized = {};
|
customized = {};
|
||||||
api.each( function( setting, id ) {
|
api.each( function( setting, id ) {
|
||||||
// @todo We need to limit this to just the menu items that are associated with this menu/location.
|
// @todo Core should propagate the dirty state into the Preview as well so we can use that here.
|
||||||
if ( /^(nav_menu|nav_menu_locations)/.test( id ) ) {
|
if ( id === 'nav_menu[' + String( menuId ) + ']' || ( /^nav_menu_item\[/.test( id ) && setting() && menuId === setting().nav_menu_term_id ) ) {
|
||||||
customized[ id ] = setting.get();
|
customized[ id ] = setting.get();
|
||||||
}
|
}
|
||||||
} );
|
} );
|
||||||
|
@ -203,19 +211,25 @@ wp.customize.menusPreview = ( function( $, api ) {
|
||||||
url: self.requestUri
|
url: self.requestUri
|
||||||
} );
|
} );
|
||||||
request.done( function( data ) {
|
request.done( function( data ) {
|
||||||
var eventParam;
|
// If the menu is now not visible, refresh since the page layout may have changed.
|
||||||
container.empty().append( $( data ) );
|
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 = {
|
eventParam = {
|
||||||
instanceNumber: instanceNumber,
|
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' );
|
container.removeClass( 'customize-partial-refreshing' );
|
||||||
|
$( document ).trigger( 'customize-preview-menu-refreshed', [ eventParam ] );
|
||||||
} );
|
} );
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -353,6 +353,7 @@ class Test_WP_Customize_Nav_Menus extends WP_UnitTestCase {
|
||||||
'echo' => true,
|
'echo' => true,
|
||||||
'fallback_cb' => 'wp_page_menu',
|
'fallback_cb' => 'wp_page_menu',
|
||||||
'walker' => '',
|
'walker' => '',
|
||||||
|
'menu' => wp_create_nav_menu( 'Foo' ),
|
||||||
) );
|
) );
|
||||||
$this->assertEquals( 1, $results['can_partial_refresh'] );
|
$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(
|
$args = $menus->filter_wp_nav_menu_args( array(
|
||||||
'echo' => true,
|
'echo' => true,
|
||||||
|
'menu' => wp_create_nav_menu( 'Foo' ),
|
||||||
'fallback_cb' => 'wp_page_menu',
|
'fallback_cb' => 'wp_page_menu',
|
||||||
'walker' => '',
|
'walker' => '',
|
||||||
) );
|
) );
|
||||||
|
@ -401,11 +403,10 @@ class Test_WP_Customize_Nav_Menus extends WP_UnitTestCase {
|
||||||
$object_args = json_decode( json_encode( $args ), false );
|
$object_args = json_decode( json_encode( $args ), false );
|
||||||
$result = $menus->filter_wp_nav_menu( $nav_menu_content, $object_args );
|
$result = $menus->filter_wp_nav_menu( $nav_menu_content, $object_args );
|
||||||
$expected = sprintf(
|
$expected = sprintf(
|
||||||
'<div id="partial-refresh-menu-container-%1$d" class="partial-refresh-menu-container" data-instance-number="%1$d">%2$s</div>',
|
'<div class="partial-refreshable-nav-menu partial-refreshable-nav-menu-%1$d menu">',
|
||||||
$args['instance_number'],
|
$args['instance_number']
|
||||||
$nav_menu_content
|
|
||||||
);
|
);
|
||||||
$this->assertEquals( $expected, $result );
|
$this->assertStringStartsWith( $expected, $result );
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
Loading…
Reference in New Issue