Changeset 33138

Timestamp:

07/08/2015 09:29:53 PM (11 years ago)

Author:

westonruter

Message:

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.

Location:

trunk

Files:

• src/wp-includes/class-wp-customize-nav-menus.php (modified) (3 diffs)
• src/wp-includes/js/customize-preview-nav-menus.js (modified) (4 diffs)
• tests/phpunit/tests/customize/nav-menus.php (modified) (3 diffs)

trunk/src/wp-includes/class-wp-customize-nav-menus.php

@@ -769 +769 @@
                         &&
                         ( 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;
@@ -779 +785 @@
                 }
 
+                // 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 );
@@ -799 +810 @@
         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.
                         );
                 }

trunk/src/wp-includes/js/customize-preview-nav-menus.js

@@ -160 +160 @@
          */
         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 ] ) {
@@ -167 +167 @@
                 instance = self.navMenuInstanceArgs[ instanceNumber ];
 
-                container = $( '#partial-refresh-menu-container-' + String( instanceNumber ) );
-
-                if ( ! instance.can_partial_refresh || 0 === container.length ) {
+                containerInstanceClassName = 'partial-refreshable-nav-menu-' + String( instanceNumber );
+                container = $( '.' + containerInstanceClassName );
+
+                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 = {
@@ -184 +192 @@
                 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();
                         }
@@ -204 +212 @@
                 } );
                 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
                         };
+                        container.removeClass( 'customize-partial-refreshing' );
                         $( document ).trigger( 'customize-preview-menu-refreshed', [ eventParam ] );
-                } );
-                request.fail( function() {
-                        // @todo provide some indication for why
-                } );
-                request.always( function() {
-                        container.removeClass( 'customize-partial-refreshing' );
                 } );
         };

trunk/tests/phpunit/tests/customize/nav-menus.php

@@ -354 +354 @@
                         'fallback_cb'     => 'wp_page_menu',
                         'walker'          => '',
+                        'menu'            => wp_create_nav_menu( 'Foo' ),
                 ) );
                 $this->assertEquals( 1, $results['can_partial_refresh'] );
@@ -391 +392 @@
                 $args = $menus->filter_wp_nav_menu_args( array(
                         'echo'        => true,
+                        'menu'        => wp_create_nav_menu( 'Foo' ),
                         'fallback_cb' => 'wp_page_menu',
                         'walker'      => '',
@@ -402 +404 @@
                 $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 );
         }