[wp-trac] [WordPress Trac] #32841: Partial refresh <div> in menu customizer breaks some theme designs

[WordPress Trac]

#32841: Partial refresh <div> in menu customizer breaks some theme designs
--------------------------+--------------------------
 Reporter:  greenshady    |       Owner:  westonruter
     Type:  defect (bug)  |      Status:  accepted
 Priority:  normal        |   Milestone:  4.3
Component:  Customize     |     Version:  trunk
 Severity:  normal        |  Resolution:
 Keywords:  has-patch     |     Focuses:  javascript
--------------------------+--------------------------

Comment (by westonruter):

 Replying to [comment:7 greenshady]:
 > > BTW, I think the properties on this `params` object may need to be
 revisited. Like, in addition to the `wpNavArgs` object it would be handy
 to have the actual `container` for the nav menu element that was injected.
 >
 > I'm not familiar enough with the code to reply to this.

 So what this would mean is that your event handler you could reference
 `params.container` as the jQuery object for the new menu being inserted
 into the document. But in your case, it looks like you'd also want to be
 able to have the old container available too, so you could persist the
 `open` state, for instance:

 {{{#!js
 jQuery( document ).on( 'customize-preview-menu-refreshed', function( e,
 params ) {
     if ( params.oldContainer.hasClass( 'open' ) ) {
         params.newContainer.addClass( 'open' );
     } else if ( params.oldContainer.hasClass( 'close' ) ) {
         params.newContainer.addClass( 'close' );
     }
     params.newContainer.css( 'display', params.oldContainer.css( 'display'
 ) );
 } );
 }}}

 Let me know what you think about that, and how best to facilitate dynamic
 menus.

 The additional change I'm proposing for the triggered event is:

 {{{#!diff
 --- src/wp-includes/js/customize-preview-nav-menus.js
 +++ src/wp-includes/js/customize-preview-nav-menus.js
 @@ -228,7 +228,9 @@ wp.customize.menusPreview = ( function( $, api ) {
                         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 ] );
 }}}

--
Ticket URL: <https://core.trac.wordpress.org/ticket/32841#comment:8>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform