Make WordPress Core

Changeset 33138


Ignore:
Timestamp:
07/08/2015 09:29:53 PM (9 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:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/class-wp-customize-nav-menus.php

    r33131 r33138  
    769769            &&
    770770            ( empty( $args['walker'] ) || is_string( $args['walker'] ) )
     771            &&
     772            (
     773                ! empty( $args['theme_location'] )
     774                ||
     775                ( ! empty( $args['menu'] ) && ( is_numeric( $args['menu'] ) || is_object( $args['menu'] ) ) )
     776            )
    771777        );
    772778        $args['can_partial_refresh'] = $can_partial_refresh;
     
    779785        }
    780786
     787        // Replace object menu arg with a term_id menu arg, as this exports better to JS and is easier to compare hashes.
     788        if ( ! empty( $hashed_args['menu'] ) && is_object( $hashed_args['menu'] ) ) {
     789            $hashed_args['menu'] = $hashed_args['menu']->term_id;
     790        }
     791
    781792        ksort( $hashed_args );
    782793        $hashed_args['args_hash'] = $this->hash_nav_menu_args( $hashed_args );
     
    799810    public function filter_wp_nav_menu( $nav_menu_content, $args ) {
    800811        if ( ! empty( $args->can_partial_refresh ) && ! empty( $args->instance_number ) ) {
    801             $nav_menu_content = sprintf(
    802                 '<div id="partial-refresh-menu-container-%1$d" class="partial-refresh-menu-container" data-instance-number="%1$d">%2$s</div>',
    803                 $args->instance_number,
    804                 $nav_menu_content
     812            $nav_menu_content = preg_replace(
     813                '/(?<=class=")/',
     814                sprintf( 'partial-refreshable-nav-menu partial-refreshable-nav-menu-%1$d ', $args->instance_number ),
     815                $nav_menu_content,
     816                1 // Only update the class on the first element found, the menu container.
    805817            );
    806818        }
  • trunk/src/wp-includes/js/customize-preview-nav-menus.js

    r33134 r33138  
    160160     */
    161161    self.refreshMenuInstance = function( instanceNumber ) {
    162         var self = this, data, customized, container, request, wpNavArgs, instance;
     162        var self = this, data, menuId, customized, container, request, wpNavArgs, instance, containerInstanceClassName;
    163163
    164164        if ( ! self.navMenuInstanceArgs[ instanceNumber ] ) {
     
    167167        instance = self.navMenuInstanceArgs[ instanceNumber ];
    168168
    169         container = $( '#partial-refresh-menu-container-' + String( instanceNumber ) );
    170 
    171         if ( ! instance.can_partial_refresh || 0 === container.length ) {
     169        containerInstanceClassName = 'partial-refreshable-nav-menu-' + String( instanceNumber );
     170        container = $( '.' + containerInstanceClassName );
     171
     172        if ( _.isNumber( instance.menu ) ) {
     173            menuId = instance.menu;
     174        } else if ( instance.theme_location && api.has( 'nav_menu_locations[' + instance.theme_location + ']' ) ) {
     175            menuId = api( 'nav_menu_locations[' + instance.theme_location + ']' ).get();
     176        }
     177
     178        if ( ! menuId || ! instance.can_partial_refresh || 0 === container.length ) {
    172179            api.preview.send( 'refresh' );
    173180            return;
    174181        }
     182        menuId = parseInt( menuId, 10 );
    175183
    176184        data = {
     
    184192        customized = {};
    185193        api.each( function( setting, id ) {
    186             // @todo We need to limit this to just the menu items that are associated with this menu/location.
    187             if ( /^(nav_menu|nav_menu_locations)/.test( id ) ) {
     194            // @todo Core should propagate the dirty state into the Preview as well so we can use that here.
     195            if ( id === 'nav_menu[' + String( menuId ) + ']' || ( /^nav_menu_item\[/.test( id ) && setting() && menuId === setting().nav_menu_term_id ) ) {
    188196                customized[ id ] = setting.get();
    189197            }
     
    204212        } );
    205213        request.done( function( data ) {
    206             var eventParam;
    207             container.empty().append( $( data ) );
     214            // If the menu is now not visible, refresh since the page layout may have changed.
     215            if ( false === data ) {
     216                api.preview.send( 'refresh' );
     217                return;
     218            }
     219
     220            var eventParam, previousContainer = container;
     221            container = $( data );
     222            container.addClass( containerInstanceClassName );
     223            container.addClass( 'partial-refreshable-nav-menu customize-partial-refreshing' );
     224            previousContainer.replaceWith( container );
    208225            eventParam = {
    209226                instanceNumber: instanceNumber,
    210                 wpNavArgs: wpNavArgs
     227                wpNavArgs: wpNavArgs,
     228                oldContainer: previousContainer,
     229                newContainer: container
    211230            };
     231            container.removeClass( 'customize-partial-refreshing' );
    212232            $( document ).trigger( 'customize-preview-menu-refreshed', [ eventParam ] );
    213         } );
    214         request.fail( function() {
    215             // @todo provide some indication for why
    216         } );
    217         request.always( function() {
    218             container.removeClass( 'customize-partial-refreshing' );
    219233        } );
    220234    };
  • trunk/tests/phpunit/tests/customize/nav-menus.php

    r33131 r33138  
    354354            'fallback_cb'     => 'wp_page_menu',
    355355            'walker'          => '',
     356            'menu'            => wp_create_nav_menu( 'Foo' ),
    356357        ) );
    357358        $this->assertEquals( 1, $results['can_partial_refresh'] );
     
    391392        $args = $menus->filter_wp_nav_menu_args( array(
    392393            'echo'        => true,
     394            'menu'        => wp_create_nav_menu( 'Foo' ),
    393395            'fallback_cb' => 'wp_page_menu',
    394396            'walker'      => '',
     
    402404        $result = $menus->filter_wp_nav_menu( $nav_menu_content, $object_args );
    403405        $expected = sprintf(
    404             '<div id="partial-refresh-menu-container-%1$d" class="partial-refresh-menu-container" data-instance-number="%1$d">%2$s</div>',
    405             $args['instance_number'],
    406             $nav_menu_content
     406            '<div class="partial-refreshable-nav-menu partial-refreshable-nav-menu-%1$d menu">',
     407            $args['instance_number']
    407408        );
    408         $this->assertEquals( $expected, $result );
     409        $this->assertStringStartsWith( $expected, $result );
    409410    }
    410411
Note: See TracChangeset for help on using the changeset viewer.