WordPress.org
Get WordPress

Make WordPress Core

Ticket #34391: 34391_1.diff

File 34391_1.diff, 45.0 KB (added by delawski, 10 years ago)

  • src/wp-admin/css/common.css 

    diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index 2ec8b7d..10de37e 100644
    a b img { 
    31893189        display: none;
    31903190}
    31913191
    3192 .control-section .accordion-section-title {
     3192.control-section .accordion-section-title,
     3193.customize-pane-child .accordion-section-title {
    31933194        border-left: none;
    31943195        border-right: none;
    31953196        padding: 10px 10px 11px 14px;
    … … img { 
    31973198        background: #fff;
    31983199}
    31993200
    3200 .control-section .accordion-section-title:after {
     3201.control-section .accordion-section-title:after,
     3202.customize-pane-child .accordion-section-title:after {
    32013203        top: 11px;
    32023204}
    32033205

  • src/wp-admin/css/customize-controls.css 

    diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index 7991e4b..6015df9 100644
    a b body { 
    7777        line-height: 24px;
    7878}
    7979
    80 #customize-controls .control-section .customize-section-title h3,
    81 #customize-controls .control-section h3.customize-section-title,
     80#customize-controls .customize-pane-child .customize-section-title h3,
     81#customize-controls .customize-pane-child h3.customize-section-title,
    8282#customize-controls .customize-info .panel-title {
    8383        font-size: 20px;
    8484        font-weight: 200;
    … … body { 
    218218        box-sizing: border-box;
    219219}
    220220
     221.wp-full-overlay #customize-controls .wp-full-overlay-sidebar-content {
     222        /* Promote to separate layer to avoid full-screen repaints */
     223        transform: translate3d(0,0,0);
     224}
     225
     226#customize-info,
     227#customize-theme-controls .customize-pane-parent,
     228#customize-theme-controls .customize-pane-child {
     229        overflow: visible;
     230        width: 100%;
     231        margin: 0;
     232        padding: 0;
     233        -webkit-box-sizing: border-box;
     234        -moz-box-sizing: border-box;
     235        box-sizing: border-box;
     236        transition: 0.6s transform cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
     237}
     238
     239#customize-info,
     240#customize-theme-controls .customize-pane-parent {
     241        position: relative;
     242        visibility: visible;
     243        height: auto;
     244        max-height: none;
     245        overflow: auto;
     246        transform: none;
     247}
     248
     249#customize-theme-controls .customize-pane-child {
     250        position: absolute;
     251        top: 0;
     252        left: 0;
     253        transform: translateX(100%);
     254        visibility: hidden;
     255        height: 0;
     256        max-height: none;
     257        overflow: hidden;
     258}
     259
     260#customize-theme-controls .customize-pane-child.open,
     261#customize-theme-controls .customize-pane-child.current-panel,
     262#customize-theme-controls .customize-themes-panel.customize-pane-child.current-panel {
     263        transform: none;
     264}
     265
     266#customize-theme-controls .customize-themes-panel.customize-pane-child,
     267.section-open #customize-theme-controls .customize-pane-parent,
     268.in-sub-panel #customize-theme-controls .customize-pane-parent,
     269.section-open #customize-info,
     270.in-sub-panel #customize-info,
     271.in-sub-panel.section-open #customize-theme-controls .customize-pane-child.current-panel,
     272.in-themes-panel #customize-theme-controls .customize-pane-parent,
     273.in-themes-panel #customize-info {
     274        visibility: hidden;
     275        height: 0;
     276        overflow: hidden;
     277        transform: translateX(-100%);
     278}
     279
     280.section-open #customize-theme-controls .customize-pane-parent.transitioning,
     281.in-sub-panel #customize-theme-controls .customize-pane-parent.transitioning,
     282.in-themes-panel #customize-theme-controls .customize-pane-parent.transitioning,
     283.section-open #customize-info.transitioning,
     284.in-sub-panel #customize-info.transitioning,
     285.in-themes-panel #customize-info.transitioning,
     286.transitioning.section-open.in-sub-panel #customize-theme-controls .customize-pane-child.current-panel,
     287#customize-theme-controls .customize-pane-child.open,
     288#customize-theme-controls .customize-pane-child.current-panel,
     289#customize-theme-controls .customize-pane-child.transitioning {
     290        visibility: visible;
     291        height: auto;
     292        overflow: auto;
     293}
     294
     295.in-themes-panel #customize-theme-controls .customize-pane-parent,
     296.in-themes-panel #customize-info {
     297        transform: translateX(100%);
     298}
     299
     300#customize-theme-controls .customize-pane-child.accordion-section-content,
     301#customize-theme-controls .customize-pane-child.accordion-sub-container {
     302        display: block;
     303        overflow-x: hidden;
     304}
     305
     306#customize-theme-controls .customize-pane-child.accordion-section-content {
     307        padding: 12px;
     308}
     309
    221310.customize-section-description-container {
    222311        margin-bottom: 15px;
    223312}
    … … h3.customize-section-title { 
    257346        color: #555;
    258347}
    259348
    260 #customize-theme-controls {
    261         position: relative;
    262         left: 0;
    263         -webkit-transition: .18s left ease-in-out;
    264         transition: .18s left ease-in-out;
    265 }
    266 
    267 .ios #customize-theme-controls {
    268         -webkit-transition: left 0s;
    269         transition: left 0s;
    270 }
    271 
    272 .section-open #customize-info,
    273 .section-open #customize-theme-controls {
    274         left: -100%;
    275 }
    276 
    277349.accordion-sub-container.control-panel-content {
    278350        display: none;
    279351        position: absolute;
    … … h3.customize-section-title { 
    289361        transition: left 0s;
    290362}
    291363
    292 .accordion-sub-container.control-panel-content.animating {
     364.accordion-sub-container.control-panel-content.transitioning {
    293365        display: block;
    294366}
    295367
    … … h3.customize-section-title { 
    332404        -webkit-box-shadow: none;
    333405        box-shadow: none;
    334406        cursor: pointer;
    335         -webkit-transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
    336         transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
     407        -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
     408        transition: color .1s ease-in-out, background .1s ease-in-out;
    337409}
    338410
    339411.customize-section-back {
    340412        height: 74px;
    341413}
    342414
    343 .ios .customize-panel-back,
    344 .ios .customize-section-back {
    345         -webkit-transition: left 0s;
    346         transition: left 0s;
    347 }
    348 
    349415.ios .customize-panel-back {
    350416        display: none;
    351417}
    … … h3.customize-section-title { 
    411477        padding-left: 62px;
    412478}
    413479
    414 #customize-info,
    415 #customize-theme-controls > ul > .accordion-section {
    416         position: relative;
    417         left: 0;
    418         -webkit-transition: left ease-in-out .18s;
    419         transition: left ease-in-out .18s;
    420 }
    421 
    422 .ios #customize-info,
    423 .ios #customize-theme-controls > ul > .accordion-section {
    424         -webkit-transition: left 0s;
    425         transition: left 0s;
    426 }
    427 
    428 .in-sub-panel #customize-info,
    429 .in-sub-panel #customize-theme-controls > ul > .accordion-section {
    430         left: -300px;
    431         width: 300px;
    432 }
    433 
    434 .in-sub-panel #customize-theme-controls .accordion-section.current-panel {
    435         width: 100%;
    436 }
    437 
    438 #customize-theme-controls .control-section.current-panel {
    439         padding: 0;
    440 }
    441 
    442 #customize-theme-controls .control-section > h3.accordion-section-title {
    443         position: relative;
    444         left: 0;
    445 }
    446 
    447 #customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
    448         left: -354px;
    449         -webkit-transition: left ease-in-out .18s;
    450         transition: left ease-in-out .18s;
    451 }
    452 
    453 .ios #customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
    454         -webkit-transition: left 0s;
    455         transition: left 0s;
    456 }
    457 
    458 .wp-full-overlay.section-open #customize-controls .wp-full-overlay-sidebar-content {
    459         visibility: hidden;
    460         overflow-y: hidden;
    461 }
    462 
    463 .wp-full-overlay.section-open .wp-full-overlay-sidebar-content .accordion-section.open {
    464         visibility: visible;
    465 }
    466 
    467 .wp-full-overlay.section-open .wp-full-overlay-sidebar-content .accordion-section.open .accordion-section-content {
    468         overflow-y: auto;
    469 }
    470 
    471480p.customize-section-description {
    472481        font-style: normal;
    473482        margin-top: 22px;
    … … p.customize-section-description { 
    10151024        animation: customize-reload .75s;
    10161025}
    10171026
    1018 .control-section-themes .accordion-section-title {
     1027#customize-controls .control-section-themes .accordion-section-title {
    10191028        cursor: default;
    10201029}
    10211030
    … … p.customize-section-description { 
    10251034        background-color: #fff;
    10261035}
    10271036
    1028 .control-section-themes .accordion-section-title {
     1037#customize-controls .control-section-themes .accordion-section-title {
    10291038        margin: 15px 0;
    10301039}
    10311040
    1032 .customize-themes-panel .accordion-section-title {
     1041#customize-controls .customize-themes-panel .accordion-section-title {
    10331042        margin: 15px -8px;
    10341043}
    10351044
    1036 .control-section-themes .accordion-section-title {
     1045#customize-controls .control-section-themes .accordion-section-title,
     1046#customize-controls .customize-themes-panel .accordion-section-title {
    10371047        padding-right: 100px; /* Space for the button */
    10381048}
    10391049
    1040 .control-section-themes .accordion-section-title span.customize-action,
     1050#customize-controls .control-section-themes .accordion-section-title span.customize-action,
    10411051#customize-controls .customize-section-title span.customize-action {
    10421052        font-size: 13px;
    10431053        display: block;
    10441054        font-weight: 400;
    10451055}
    10461056
    1047 .control-section-themes .accordion-section-title .change-theme,
    1048 .control-section-themes .accordion-section-title .customize-theme {
     1057#customize-controls .control-section-themes .accordion-section-title .change-theme,
     1058#customize-controls .customize-themes-panel .accordion-section-title .customize-theme {
    10491059        position: absolute;
    10501060        right: 10px;
    10511061        top: 50%;
    … … p.customize-section-description { 
    10531063        font-weight: normal;
    10541064}
    10551065
    1056 .control-section-themes .accordion-section-title:before {
     1066#customize-controls .control-section-themes .accordion-section-title:before {
    10571067        display: none;
    10581068}
    10591069
    1060 .customize-themes-panel {
    1061         display: none;
     1070#customize-controls .customize-themes-panel {
    10621071        padding: 0 8px;
    10631072        background: #f1f1f1;
    10641073        -webkit-box-sizing: border-box;
    … … p.customize-section-description { 
    10661075        box-sizing: border-box;
    10671076}
    10681077
    1069 .customize-themes-panel .accordion-section-title:first-child {
     1078#customize-controls .customize-themes-panel .accordion-section-title:first-child {
    10701079        margin-top: 0;
    10711080}
    10721081
    … … p.customize-section-description { 
    10751084        font-weight: 600;
    10761085}
    10771086
    1078 .customize-themes-panel > h2 {
     1087#customize-controls .customize-themes-panel > h2 {
    10791088        padding: 15px 8px 0 8px;
    10801089}
    10811090
    1082 .control-section.open .customize-themes-panel {
    1083         display: block;
    1084 }
    1085 
    10861091#customize-theme-controls .customize-themes-panel .accordion-section-content {
    10871092        background: transparent;
    10881093        display: block;
    … … p.customize-section-description { 
    11281133        width: 100%;
    11291134}
    11301135
    1131 #accordion-section-themes .accordion-section-title:after {
     1136.control-section-themes .accordion-section-title:after,
     1137.customize-themes-panel .accordion-section-title:after {
    11321138        display: none;
    11331139}
    11341140
    1135 #customize-theme-controls .control-section-themes.current-panel > h3.accordion-section-title {
    1136         left: 0;
    1137 }
    1138 
    11391141.customize-themes-panel.control-panel-content {
    1140         position: absolute;
    1141         left: -100%;
    1142         top: 0;
    1143         width: 100%;
    11441142        border-top: 1px solid #ddd;
    11451143}
    11461144
    1147 .in-themes-panel #customize-info,
    1148 .in-themes-panel #customize-theme-controls > ul > .accordion-section {
    1149         left: 100%;
    1150 }
    1151 
    11521145/* Details View */
    11531146.wp-customizer .theme-overlay {
    11541147        display: none;
    … … p.customize-section-description { 
    11821175        text-align: right; /* Because there's only one action, match the pattern of media modals and right-align the action. */
    11831176}
    11841177
    1185 .modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content {
    1186         overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */
     1178.in-themes-panel #customize-controls .wp-full-overlay-sidebar-content,
     1179.in-themes-panel #customize-controls #customize-theme-controls .control-panel-content {
     1180        transform: none; /* Prevent creating new stacking contexts and containing blocks for themes modal. */
    11871181}
    11881182
    11891183.ie8 .wp-customizer .theme-overlay .theme-header,

  • src/wp-admin/css/customize-nav-menus.css 

    diff --git a/src/wp-admin/css/customize-nav-menus.css b/src/wp-admin/css/customize-nav-menus.css
index cc6725e..4d6b2af 100644
    a b  
    355355.reordering .menu-item-depth-10 > .menu-item-bar { margin-right: 150px; }
    356356.reordering .menu-item-depth-11 > .menu-item-bar { margin-right: 165px; }
    357357
    358 .control-section-nav_menu .menu .menu-item-edit-active {
     358.accordion-section-content.menu .menu-item-edit-active {
    359359        margin-left: 0;
    360360}
    361361
    362 .control-section-nav_menu .menu .menu-item-edit-active .menu-item-bar {
     362.accordion-section-content.menu .menu-item-edit-active .menu-item-bar {
    363363        margin-right: 0;
    364364}
    365365
    366 .control-section-nav_menu .menu .sortable-placeholder {
     366.accordion-section-content.menu .sortable-placeholder {
    367367        margin-top: 0;
    368368        margin-bottom: 1px;
    369369        max-width: -webkit-calc(100% - 2px);
    … …  
    377377        float: none;
    378378}
    379379
    380 .control-section-nav_menu .menu ul.menu-item-transport .menu-item-bar {
     380.accordion-section-content.menu ul.menu-item-transport .menu-item-bar {
    381381        margin-top: 0;
    382382}
    383383

  • src/wp-admin/customize.php 

    diff --git a/src/wp-admin/customize.php b/src/wp-admin/customize.php
index 4a15c15..b364ab4 100644
    a b  
    142142                        </div>
    143143
    144144                        <div id="customize-theme-controls">
    145                                 <ul><?php // Panels and sections are managed here via JavaScript ?></ul>
     145                                <ul class="customize-pane-parent"><?php // Panels and sections are managed here via JavaScript ?></ul>
    146146                        </div>
    147147                </div>
    148148                </div>

  • src/wp-admin/js/customize-controls.js 

    diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js
index ef01674..bec58c5 100644
    a b  
    11/* global _wpCustomizeHeader, _wpCustomizeBackground, _wpMediaViewsL10n, MediaElementPlayer */
    22(function( exports, $ ){
    3         var Container, focus, api = wp.customize;
     3        var Container, focus, normalizedTransitionendEventName, api = wp.customize;
    44
    55        /**
    66         * A Customizer Setting.
    … …  
    7777         * @param {Function} [params.completeCallback]
    7878         */
    7979        focus = function ( params ) {
    80                 var construct, completeCallback, focus, focusElement;
    81                 construct = this;
     80                var construct = this,
     81                        completeCallback, focus;
     82
    8283                params = params || {};
    8384                focus = function () {
    84                         var focusContainer;
    85                         if ( construct.extended( api.Panel ) && construct.expanded && construct.expanded() ) {
    86                                 focusContainer = construct.container.find( 'ul.control-panel-content' );
    87                         } else if ( construct.extended( api.Section ) && construct.expanded && construct.expanded() ) {
    88                                 focusContainer = construct.container.find( 'ul.accordion-section-content' );
    89                         } else {
    90                                 focusContainer = construct.container;
    91                         }
     85                        var focusContainer = construct.container,
     86                                focusElement;
    9287
    93                         focusElement = focusContainer.find( '.control-focus:first' );
     88                        if ( ( construct.extended( api.Panel ) || construct.extended( api.Section ) ) && construct.expanded && construct.expanded() ) {
     89                                focusContainer = ( construct.content.is( 'ul' ) ) ? construct.content : construct.content.find( 'ul:first' );
     90                        }
     91                        focusElement = focusContainer.find( '.control-focus, input, select, textarea, button' ).filter( ':visible' ).first();
    9492                        if ( 0 === focusElement.length ) {
    9593                                // Note that we can't use :focusable due to a jQuery UI issue. See: https://github.com/jquery/jquery-ui/pull/1583
    96                                 focusElement = focusContainer.find( 'input, select, textarea, button, object, a[href], [tabindex]' ).filter( ':visible' ).first();
     94                                focusElement = focusContainer.find( 'object, a[href], [tabindex]' ).filter( ':visible' ).first();
    9795                        }
    9896                        focusElement.focus();
    9997                };
     98
    10099                if ( params.completeCallback ) {
    101100                        completeCallback = params.completeCallback;
    102101                        params.completeCallback = function () {
    … …  
    167166        };
    168167
    169168        /**
     169         * Return browser supported `transitionend` event name
     170         *
     171         * @since
     172         *
     173         * @returns {String}
     174         */
     175        normalizedTransitionendEventName = (function () {
     176                var el, transitions, prop;
     177                el = document.createElement( 'div' );
     178                transitions = {
     179                        'transition'      : 'transitionend',
     180                        'OTransition'     : 'oTransitionEnd',
     181                        'MozTransition'   : 'transitionend',
     182                        'WebkitTransition': 'webkitTransitionEnd'
     183                };
     184                prop = _.find( _.keys( transitions ), function( prop ) {
     185                        return ! _.isUndefined( el.style[ prop ] );
     186                } );
     187                if ( prop ) {
     188                        return transitions[ prop ];
     189                } else {
     190                        return null;
     191                }
     192        })();
     193
     194        /**
    170195         * Base class for Panel and Section.
    171196         *
    172197         * @since 4.1.0
    … …  
    217242                        if ( 0 === container.container.length ) {
    218243                                container.container = $( container.getContainer() );
    219244                        }
     245                        container.content = container.getContent();
    220246
    221247                        container.deferred = {
    222248                                embedded: new $.Deferred()
    … …  
    351377                                        construct.container.stop( true, true ).slideUp( duration, args.completeCallback );
    352378                                }
    353379                        }
    354 
    355                         // Recalculate the margin-top immediately, not waiting for debounced reflow, to prevent momentary (100ms) vertical jiggle.
    356                         if ( expandedOtherPanel ) {
    357                                 expandedOtherPanel._recalculateTopMargin();
    358                         }
    359380                },
    360381
    361382                /**
    … …  
    485506                        }
    486507
    487508                        return '<li></li>';
     509                },
     510
     511                /**
     512                 * Detach and return the content html, extracted from the container html, if it exists.
     513                 *
     514                 * @since
     515                 */
     516                getContent: function () {
     517                        var container = this,
     518                                list = container.container.find( '.accordion-section-content, .control-panel-content' ).first(),
     519                                contentId = 'sub-accordion-list-' + container.id;
     520
     521                        container.setOwnership( contentId );
     522
     523                        return list.detach().attr( {
     524                                'id': contentId,
     525                                'class': 'customize-pane-child ' + list.attr( 'class' )
     526                        } );
     527                },
     528
     529                /**
     530                 * Add new element to `aria-owned` property of the container.
     531                 *
     532                 * @since
     533                 */
     534                setOwnership: function ( elementId ) {
     535                        var container = this.container,
     536                                ownedElements = container.attr( 'aria-owns' );
     537
     538                        if ( _.isUndefined( ownedElements ) ) {
     539                                container.attr( {
     540                                        'aria-owns': elementId
     541                                } );
     542                        } else {
     543                                container.attr( {
     544                                        'aria-owns': ownedElements + ' ' + elementId
     545                                } );
     546                        }
    488547                }
    489548        });
    490549
    … …  
    547606                 * @since 4.1.0
    548607                 */
    549608                embed: function () {
    550                         var section = this, inject;
     609                        var inject,
     610                                section = this,
     611                                container = $( '#customize-theme-controls' );
    551612
    552613                        // Watch for changes to the panel state
    553614                        inject = function ( panelId ) {
    … …  
    557618                                        api.panel( panelId, function ( panel ) {
    558619                                                // The panel has been registered, wait for it to become ready/initialized
    559620                                                panel.deferred.embedded.done( function () {
    560                                                         parentContainer = panel.container.find( 'ul:first' );
     621                                                        parentContainer = panel.content;
    561622                                                        if ( ! section.container.parent().is( parentContainer ) ) {
    562623                                                                parentContainer.append( section.container );
    563624                                                        }
     625                                                        if ( ! section.content.parent().is( section.container ) ) {
     626                                                                container.append( section.content );
     627                                                        }
    564628                                                        section.deferred.embedded.resolve();
    565629                                                });
    566630                                        } );
    567631                                } else {
    568632                                        // There is no panel, so embed the section in the root of the customizer
    569                                         parentContainer = $( '#customize-theme-controls' ).children( 'ul' ); // @todo This should be defined elsewhere, and to be configurable
     633                                        parentContainer = $( '.customize-pane-parent' ); // @todo This should be defined elsewhere, and to be configurable
    570634                                        if ( ! section.container.parent().is( parentContainer ) ) {
    571635                                                parentContainer.append( section.container );
    572636                                        }
     637                                        if ( ! section.content.parent().is( section.container ) ) {
     638                                                container.append( section.content );
     639                                        }
    573640                                        section.deferred.embedded.resolve();
    574641                                }
    575642                        };
    576643                        section.panel.bind( inject );
    577644                        inject( section.panel.get() ); // Since a section may never get a panel, assume that it won't ever get one
    578 
    579                         section.deferred.embedded.done(function() {
    580                                 // Fix the top margin after reflow.
    581                                 api.bind( 'pane-contents-reflowed', _.debounce( function() {
    582                                         section._recalculateTopMargin();
    583                                 }, 100 ) );
    584                         });
    585645                },
    586646
    587647                /**
    … …  
    590650                 * @since 4.1.0
    591651                 */
    592652                attachEvents: function () {
    593                         var section = this;
     653                        var section = this,
     654                                toggleHandler;
    594655
    595656                        // Expand/Collapse accordion sections on click.
    596                         section.container.find( '.accordion-section-title, .customize-section-back' ).on( 'click keydown', function( event ) {
     657                        toggleHandler = function ( event ) {
    597658                                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    598659                                        return;
    599660                                }
    … …  
    604665                                } else {
    605666                                        section.expand();
    606667                                }
    607                         });
     668                        };
     669
     670                        section.container.find( '.accordion-section-title' ).on( 'click keydown', toggleHandler );
     671                        section.content.find( '.customize-section-back' ).on( 'click keydown', toggleHandler );
    608672                },
    609673
    610674                /**
    … …  
    648712                onChangeExpanded: function ( expanded, args ) {
    649713                        var section = this,
    650714                                container = section.container.closest( '.wp-full-overlay-sidebar-content' ),
    651                                 content = section.container.find( '.accordion-section-content' ),
     715                                content = section.content,
    652716                                overlay = section.container.closest( '.wp-full-overlay' ),
    653                                 backBtn = section.container.find( '.customize-section-back' ),
     717                                info = overlay.find( '#customize-info' ),
     718                                parent = overlay.find( '.customize-pane-parent' ),
     719                                backBtn = content.find( '.customize-section-back' ),
    654720                                sectionTitle = section.container.find( '.accordion-section-title' ).first(),
    655                                 headerActionsHeight = $( '#customize-header-actions' ).height(),
    656                                 resizeContentHeight, expand, position, scroll;
     721                                expand, handleTransition;
     722
     723                        /**
     724                         * Handle transitions if they are supported by the browser.
     725                         *
     726                         * @param  {object} args
     727                         * @param  {object} args.focusElement  Object gaining focus on after transition.
     728                         */
     729                        handleTransition = function ( args ) {
     730                                var focus;
     731
     732                                focus = function () {
     733                                        if ( ! _.isUndefined( args.focusElement ) ) {
     734                                                args.focusElement.focus();
     735                                        }
     736                                };
     737
     738                                container.scrollTop( 0 );
     739                                if ( normalizedTransitionendEventName ) {
     740                                        _.each( [ content, overlay ], function ( el ) {
     741                                                el.addClass( 'transitioning' );
     742                                        } );
     743
     744                                        if ( ! overlay.hasClass( 'in-sub-panel' ) ) {
     745                                                _.each( [ info, parent ], function ( el ) {
     746                                                        el.addClass( 'transitioning' );
     747                                                } );
     748                                        }
     749
     750                                        content.on( normalizedTransitionendEventName, function ( event ) {
     751                                                if ( ! content.is( event.target ) || 'transform' !== event.originalEvent.propertyName ) {
     752                                                        return this;
     753                                                }
     754                                                content.off( normalizedTransitionendEventName );
     755
     756                                                _.each( [ content, overlay ], function ( el ) {
     757                                                        el.removeClass( 'transitioning' );
     758                                                } );
     759
     760                                                if ( info.hasClass( 'transitioning' ) ) {
     761                                                        _.each( [ info, parent ], function ( el ) {
     762                                                                el.removeClass( 'transitioning' );
     763                                                        } );
     764                                                }
     765
     766                                                focus();
     767                                                return this;
     768                                        } );
     769                                } else {
     770                                        focus();
     771                                }
     772                        };
    657773
    658                         if ( expanded && ! section.container.hasClass( 'open' ) ) {
     774                        if ( expanded && ! content.hasClass( 'open' ) ) {
    659775
    660776                                if ( args.unchanged ) {
    661777                                        expand = args.completeCallback;
    662778                                } else {
    663                                         container.scrollTop( 0 );
    664                                         resizeContentHeight = function() {
    665                                                 var matchMedia, offset;
    666                                                 matchMedia = window.matchMedia || window.msMatchMedia;
    667                                                 offset = 90; // 45px for customize header actions + 45px for footer actions.
    668 
    669                                                 // No footer on small screens.
    670                                                 if ( matchMedia && matchMedia( '(max-width: 640px)' ).matches ) {
    671                                                         offset = 45;
    672                                                 }
    673                                                 content.css( 'height', ( window.innerHeight - offset ) );
    674                                         };
    675779                                        expand = function() {
    676                                                 section.container.addClass( 'open' );
     780                                                handleTransition( { focusElement: backBtn } );
     781                                                content.addClass( 'open' );
    677782                                                overlay.addClass( 'section-open' );
    678                                                 position = content.offset().top;
    679                                                 scroll = container.scrollTop();
    680                                                 content.css( 'margin-top', ( headerActionsHeight - position - scroll ) );
    681                                                 resizeContentHeight();
     783
    682784                                                sectionTitle.attr( 'tabindex', '-1' );
    683785                                                backBtn.attr( 'tabindex', '0' );
    684                                                 backBtn.focus();
     786
    685787                                                if ( args.completeCallback ) {
    686788                                                        args.completeCallback();
    687789                                                }
    688 
    689                                                 // Fix the height after browser resize.
    690                                                 $( window ).on( 'resize.customizer-section', _.debounce( resizeContentHeight, 100 ) );
    691 
    692                                                 setTimeout( _.bind( section._recalculateTopMargin, section ), 0 );
    693790                                        };
    694791                                }
    695792
    … …  
    713810                                        expand();
    714811                                }
    715812
    716                         } else if ( ! expanded && section.container.hasClass( 'open' ) ) {
    717                                 section.container.removeClass( 'open' );
     813                        } else if ( ! expanded && content.hasClass( 'open' ) ) {
     814
     815                                handleTransition( { focusElement: sectionTitle } );
     816                                content.removeClass( 'open' );
    718817                                overlay.removeClass( 'section-open' );
    719                                 content.css( 'margin-top', '' );
    720                                 container.scrollTop( 0 );
     818
    721819                                backBtn.attr( 'tabindex', '-1' );
    722820                                sectionTitle.attr( 'tabindex', '0' );
    723                                 sectionTitle.focus();
     821
    724822                                if ( args.completeCallback ) {
    725823                                        args.completeCallback();
    726824                                }
    727                                 $( window ).off( 'resize.customizer-section' );
     825
    728826                        } else {
    729827                                if ( args.completeCallback ) {
    730828                                        args.completeCallback();
    731829                                }
    732830                        }
    733                 },
    734 
    735                 /**
    736                  * Recalculate the top margin.
    737                  *
    738                  * @since 4.4.0
    739                  * @private
    740                  */
    741                 _recalculateTopMargin: function() {
    742                         var section = this, content, offset, headerActionsHeight;
    743                         content = section.container.find( '.accordion-section-content' );
    744                         if ( 0 === content.length ) {
    745                                 return;
    746                         }
    747                         headerActionsHeight = $( '#customize-header-actions' ).height();
    748                         offset = ( content.offset().top - headerActionsHeight );
    749                         if ( 0 < offset ) {
    750                                 content.css( 'margin-top', ( parseInt( content.css( 'margin-top' ), 10 ) - offset ) );
    751                         }
    752831                }
    753832        });
    754833
    … …  
    782861                 */
    783862                ready: function () {
    784863                        var section = this;
    785                         section.overlay = section.container.find( '.theme-overlay' );
     864                        section.overlay = section.content.find( '.theme-overlay' );
    786865                        section.template = wp.template( 'customize-themes-details-view' );
    787866
    788867                        // Bind global keyboard events.
    … …  
    829908                 * @since 4.2.0
    830909                 */
    831910                attachEvents: function () {
    832                         var section = this;
     911                        var section = this,
     912                                content = section.content,
     913                                toggleHandler;
    833914
    834915                        // Expand/Collapse section/panel.
    835                         section.container.find( '.change-theme, .customize-theme' ).on( 'click keydown', function( event ) {
     916                        toggleHandler = function ( event ) {
    836917                                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    837918                                        return;
    838919                                }
    … …  
    843924                                } else {
    844925                                        section.expand();
    845926                                }
    846                         });
     927                        };
     928
     929                        section.container.find( '.change-theme' ).on( 'click keydown', toggleHandler );
     930                        content.find( '.customize-theme' ).on( 'click keydown', toggleHandler );
    847931
    848932                        // Theme navigation in details view.
    849                         section.container.on( 'click keydown', '.left', function( event ) {
     933                        content.on( 'click keydown', '.left', function( event ) {
    850934                                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    851935                                        return;
    852936                                }
    … …  
    856940                                section.previousTheme();
    857941                        });
    858942
    859                         section.container.on( 'click keydown', '.right', function( event ) {
     943                        content.on( 'click keydown', '.right', function( event ) {
    860944                                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    861945                                        return;
    862946                                }
    … …  
    866950                                section.nextTheme();
    867951                        });
    868952
    869                         section.container.on( 'click keydown', '.theme-backdrop, .close', function( event ) {
     953                        content.on( 'click keydown', '.theme-backdrop, .close', function( event ) {
    870954                                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    871955                                        return;
    872956                                }
    … …  
    877961                        });
    878962
    879963                        var renderScreenshots = _.throttle( _.bind( section.renderScreenshots, this ), 100 );
    880                         section.container.on( 'input', '#themes-filter', function( event ) {
     964                        content.on( 'input', '#themes-filter', function( event ) {
    881965                                var count,
    882966                                        term = event.currentTarget.value.toLowerCase().trim().replace( '-', ' ' ),
    883967                                        controls = section.controls();
    … …  
    889973                                renderScreenshots();
    890974
    891975                                // Update theme count.
    892                                 count = section.container.find( 'li.customize-control:visible' ).length;
    893                                 section.container.find( '.theme-count' ).text( count );
     976                                count = content.find( 'li.customize-control:visible' ).length;
     977                                content.find( '.theme-count' ).text( count );
    894978                        });
    895979
    896980                        // Pre-load the first 3 theme screenshots.
    … …  
    9261010                        }
    9271011
    9281012                        // Note: there is a second argument 'args' passed
    929                         var position, scroll,
    930                                 panel = this,
    931                                 section = panel.container.closest( '.accordion-section' ),
     1013                        var panel = this,
     1014                                section = panel.content,
    9321015                                overlay = section.closest( '.wp-full-overlay' ),
    9331016                                container = section.closest( '.wp-full-overlay-sidebar-content' ),
    934                                 siblings = container.find( '.open' ),
     1017                                info = overlay.find( '#customize-info' ),
     1018                                parent = overlay.find( '.customize-pane-parent' ),
    9351019                                customizeBtn = section.find( '.customize-theme' ),
    936                                 changeBtn = section.find( '.change-theme' ),
    937                                 content = section.find( '.control-panel-content' );
     1020                                changeBtn = panel.container.find( '.change-theme' ),
     1021                                handleTransition;
     1022
     1023                        /**
     1024                         * Handle transitions if they are supported by the browser.
     1025                         *
     1026                         * @param  {object} args
     1027                         * @param  {object} args.focusElement  Object gaining focus on after transition.
     1028                         */
     1029                        handleTransition = function ( args ) {
     1030                                var focus, transitionedElements = [ section, info, parent, overlay ];
     1031                               
     1032                                focus = function () {
     1033                                        if ( ! _.isUndefined( args.focusElement ) ) {
     1034                                                args.focusElement.focus();
     1035                                        }
     1036                                };
    9381037
    939                         if ( expanded ) {
     1038                                container.scrollTop( 0 );
     1039                                if ( normalizedTransitionendEventName ) {
     1040                                        _.each( transitionedElements, function ( el ) {
     1041                                                el.addClass( 'transitioning' );
     1042                                        } );
     1043
     1044                                        section.on( normalizedTransitionendEventName, function ( event ) {
     1045                                                if ( ! section.is( event.target ) || 'transform' !== event.originalEvent.propertyName ) {
     1046                                                        return this;
     1047                                                }
     1048                                                section.off( normalizedTransitionendEventName );
     1049
     1050                                                _.each( transitionedElements, function ( el ) {
     1051                                                        el.removeClass( 'transitioning' );
     1052                                                } );
     1053
     1054                                                focus();
     1055                                                _.delay( panel.renderScreenshots, 10 );
     1056                                                return this;
     1057                                        } );
     1058                                } else {
     1059                                        focus();
     1060                                }
     1061                        };
     1062
     1063                        if ( expanded && ! section.hasClass( 'current-panel' ) ) {
    9401064
    9411065                                // Collapse any sibling sections/panels
    9421066                                api.section.each( function ( otherSection ) {
    … …  
    9481072                                        otherPanel.collapse( { duration: 0 } );
    9491073                                });
    9501074
    951                                 content.show( 0, function() {
    952                                         position = content.offset().top;
    953                                         scroll = container.scrollTop();
    954                                         content.css( 'margin-top', ( $( '#customize-header-actions' ).height() - position - scroll ) );
    955                                         section.addClass( 'current-panel' );
    956                                         overlay.addClass( 'in-themes-panel' );
    957                                         container.scrollTop( 0 );
    958                                         _.delay( panel.renderScreenshots, 10 ); // Wait for the controls
    959                                         panel.$customizeSidebar.on( 'scroll.customize-themes-section', _.throttle( panel.renderScreenshots, 300 ) );
    960                                         if ( args.completeCallback ) {
    961                                                 args.completeCallback();
    962                                         }
    963                                 } );
    964                                 customizeBtn.focus();
    965                         } else {
    966                                 siblings.removeClass( 'open' );
     1075                                handleTransition( { focusElement: customizeBtn } );
     1076                                section.addClass( 'current-panel' );
     1077                                overlay.addClass( 'in-themes-panel' );
     1078
     1079                                panel.$customizeSidebar.on( 'scroll.customize-themes-section', _.throttle( panel.renderScreenshots, 300 ) );
     1080
     1081                                if ( args.completeCallback ) {
     1082                                        args.completeCallback();
     1083                                }
     1084                        } else if ( ! expanded && section.hasClass( 'current-panel' ) ) {
     1085
     1086                                handleTransition( { focusElement: changeBtn } );
    9671087                                section.removeClass( 'current-panel' );
    9681088                                overlay.removeClass( 'in-themes-panel' );
     1089
    9691090                                panel.$customizeSidebar.off( 'scroll.customize-themes-section' );
    970                                 content.delay( 180 ).hide( 0, function() {
    971                                         content.css( 'margin-top', 'inherit' ); // Reset
    972                                         if ( args.completeCallback ) {
    973                                                 args.completeCallback();
    974                                         }
    975                                 } );
     1091
    9761092                                customizeBtn.attr( 'tabindex', '0' );
    977                                 changeBtn.focus();
    978                                 container.scrollTop( 0 );
     1093                               
     1094                                if ( args.completeCallback ) {
     1095                                        args.completeCallback();
     1096                                }
    9791097                        }
    9801098                },
    9811099
    9821100                /**
    983                  * Recalculate the top margin.
    984                  *
    985                  * @since 4.4.0
    986                  * @private
    987                  */
    988                 _recalculateTopMargin: function() {
    989                         api.Panel.prototype._recalculateTopMargin.call( this );
    990                 },
    991 
    992                 /**
    9931101                 * Render control's screenshot if the control comes into view.
    9941102                 *
    9951103                 * @since 4.2.0
    … …  
    12151323                 */
    12161324                embed: function () {
    12171325                        var panel = this,
    1218                                 parentContainer = $( '#customize-theme-controls > ul' ); // @todo This should be defined elsewhere, and to be configurable
     1326                                container = $( '#customize-theme-controls' ),
     1327                                parentContainer = $( '.customize-pane-parent' ); // @todo This should be defined elsewhere, and to be configurable
    12191328
    12201329                        if ( ! panel.container.parent().is( parentContainer ) ) {
    12211330                                parentContainer.append( panel.container );
     1331                        }
     1332                        if ( ! panel.content.parent().is( panel.container ) ) {
     1333                                container.append( panel.content );
    12221334                                panel.renderContent();
    12231335                        }
    12241336
    1225                         api.bind( 'pane-contents-reflowed', _.debounce( function() {
    1226                                 panel._recalculateTopMargin();
    1227                         }, 100 ) );
    1228 
    12291337                        panel.deferred.embedded.resolve();
    12301338                },
    12311339
    … …  
    12481356                        });
    12491357
    12501358                        // Close panel.
    1251                         panel.container.find( '.customize-panel-back' ).on( 'click keydown', function( event ) {
     1359                        panel.content.find( '.customize-panel-back' ).on( 'click keydown', function( event ) {
    12521360                                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    12531361                                        return;
    12541362                                }
    … …  
    12591367                                }
    12601368                        });
    12611369
    1262                         meta = panel.container.find( '.panel-meta:first' );
     1370                        meta = panel.content.find( '.panel-meta:first' );
    12631371
    12641372                        meta.find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) {
    12651373                                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    … …  
    12671375                                }
    12681376                                event.preventDefault(); // Keep this AFTER the key filter above
    12691377
    1270                                 meta = panel.container.find( '.panel-meta' );
    12711378                                if ( meta.hasClass( 'cannot-expand' ) ) {
    12721379                                        return;
    12731380                                }
    … …  
    12831390                                        $( this ).attr( 'aria-expanded', true );
    12841391                                }
    12851392                        });
    1286 
    12871393                },
    12881394
    12891395                /**
    … …  
    13371443                        }
    13381444
    13391445                        // Note: there is a second argument 'args' passed
    1340                         var position, scroll,
    1341                                 panel = this,
    1342                                 accordionSection = panel.container.closest( '.accordion-section' ),
     1446                        var panel = this,
     1447                                accordionSection = panel.content,
    13431448                                overlay = accordionSection.closest( '.wp-full-overlay' ),
    13441449                                container = accordionSection.closest( '.wp-full-overlay-sidebar-content' ),
    1345                                 siblings = container.find( '.open' ),
    1346                                 topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ),
     1450                                info = overlay.find( '#customize-info' ),
     1451                                parent = overlay.find( '.customize-pane-parent' ),
     1452                                topPanel = panel.container.find( '.accordion-section-title' ),
    13471453                                backBtn = accordionSection.find( '.customize-panel-back' ),
    1348                                 panelTitle = accordionSection.find( '.accordion-section-title' ).first(),
    1349                                 content = accordionSection.find( '.control-panel-content' ),
    1350                                 headerActionsHeight = $( '#customize-header-actions' ).height();
     1454                                handleTransition;
     1455
     1456                        /**
     1457                         * Handle transitions if they are supported by the browser.
     1458                         *
     1459                         * @param  {object} args
     1460                         * @param  {object} args.focusElement  Object gaining focus on after transition.
     1461                         */
     1462                        handleTransition = function ( args ) {
     1463                                var focus, transitionedElements = [ accordionSection, info, parent, overlay ];
     1464                               
     1465                                focus = function () {
     1466                                        if ( ! _.isUndefined( args.focusElement ) ) {
     1467                                                args.focusElement.focus();
     1468                                        }
     1469                                };
     1470
     1471                                container.scrollTop( 0 );
     1472                                if ( normalizedTransitionendEventName ) {
     1473                                        _.each( transitionedElements, function ( el ) {
     1474                                                el.addClass( 'transitioning' );
     1475                                        } );
    13511476
    1352                         if ( expanded ) {
     1477                                        accordionSection.on( normalizedTransitionendEventName, function ( event ) {
     1478                                                if ( ! accordionSection.is( event.target ) || 'transform' !== event.originalEvent.propertyName ) {
     1479                                                        return this;
     1480                                                }
     1481                                                accordionSection.off( normalizedTransitionendEventName );
     1482
     1483                                                _.each( transitionedElements, function ( el ) {
     1484                                                        el.removeClass( 'transitioning' );
     1485                                                } );
     1486
     1487                                                focus();
     1488                                                return this;
     1489                                        } );
     1490                                } else {
     1491                                        focus();
     1492                                }
     1493                        };
     1494
     1495                        if ( expanded && ! accordionSection.hasClass( 'current-panel' ) ) {
    13531496
    13541497                                // Collapse any sibling sections/panels
    13551498                                api.section.each( function ( section ) {
    … …  
    13631506                                        }
    13641507                                });
    13651508
    1366                                 content.show( 0, function() {
    1367                                         content.parent().show();
    1368                                         position = content.offset().top;
    1369                                         scroll = container.scrollTop();
    1370                                         content.css( 'margin-top', ( headerActionsHeight - position - scroll ) );
    1371                                         accordionSection.addClass( 'current-panel' );
    1372                                         overlay.addClass( 'in-sub-panel' );
    1373                                         container.scrollTop( 0 );
    1374                                         if ( args.completeCallback ) {
    1375                                                 args.completeCallback();
    1376                                         }
    1377                                 } );
     1509                                handleTransition( { focusElement: backBtn } );
     1510                                overlay.addClass( 'in-sub-panel' );
     1511                                accordionSection.addClass( 'current-panel' );
     1512
    13781513                                topPanel.attr( 'tabindex', '-1' );
    13791514                                backBtn.attr( 'tabindex', '0' );
    1380                                 backBtn.focus();
    1381                                 panel._recalculateTopMargin();
    1382                         } else {
    1383                                 siblings.removeClass( 'open' );
    1384                                 accordionSection.removeClass( 'current-panel' );
     1515
     1516                                if ( args.completeCallback ) {
     1517                                        args.completeCallback();
     1518                                }
     1519
     1520                        } else if ( ! expanded && accordionSection.hasClass( 'current-panel' ) ) {
     1521
     1522                                handleTransition( { focusElement: topPanel } );
    13851523                                overlay.removeClass( 'in-sub-panel' );
    1386                                 content.delay( 180 ).hide( 0, function() {
    1387                                         content.css( 'margin-top', 'inherit' ); // Reset
    1388                                         if ( args.completeCallback ) {
    1389                                                 args.completeCallback();
    1390                                         }
    1391                                 } );
     1524                                accordionSection.removeClass( 'current-panel' );
     1525
    13921526                                topPanel.attr( 'tabindex', '0' );
    13931527                                backBtn.attr( 'tabindex', '-1' );
    1394                                 panelTitle.focus();
    1395                                 container.scrollTop( 0 );
    1396                         }
    1397                 },
    13981528
    1399                 /**
    1400                  * Recalculate the top margin.
    1401                  *
    1402                  * @since 4.4.0
    1403                  * @private
    1404                  */
    1405                 _recalculateTopMargin: function() {
    1406                         var panel = this, headerActionsHeight, content, accordionSection;
    1407                         headerActionsHeight = $( '#customize-header-actions' ).height();
    1408                         accordionSection = panel.container.closest( '.accordion-section' );
    1409                         content = accordionSection.find( '.control-panel-content' );
    1410                         content.css( 'margin-top', ( parseInt( content.css( 'margin-top' ), 10 ) - ( content.offset().top - headerActionsHeight ) ) );
     1529                                if ( args.completeCallback ) {
     1530                                        args.completeCallback();
     1531                                }
     1532                        }
    14111533                },
    14121534
    14131535                /**
    … …  
    14281550                                template = wp.template( 'customize-panel-default-content' );
    14291551                        }
    14301552                        if ( template && panel.container ) {
    1431                                 panel.container.find( '.accordion-sub-container' ).html( template( panel.params ) );
     1553                                panel.content.html( template( panel.params ) );
    14321554                        }
    14331555                }
    14341556        });
    … …  
    15681690                                api.section( sectionId, function ( section ) {
    15691691                                        // Wait for the section to be ready/initialized
    15701692                                        section.deferred.embedded.done( function () {
    1571                                                 parentContainer = section.container.find( 'ul:first' );
     1693                                                parentContainer = ( section.content.is( 'ul' ) ) ? section.content : section.content.find( 'ul:first' );
    15721694                                                if ( ! control.container.parent().is( parentContainer ) ) {
    15731695                                                        parentContainer.append( control.container );
    15741696                                                        control.renderContent();
    … …  
    35053627                                var sections = panel.sections(),
    35063628                                        sectionContainers = _.pluck( sections, 'container' );
    35073629                                rootNodes.push( panel );
    3508                                 appendContainer = panel.container.find( 'ul:first' );
     3630                                appendContainer = ( panel.content.is( 'ul' ) ) ? panel.content : panel.content.find( 'ul:first' );
    35093631                                if ( ! api.utils.areElementListsEqual( sectionContainers, appendContainer.children( '[id]' ) ) ) {
    35103632                                        _( sections ).each( function ( section ) {
    35113633                                                appendContainer.append( section.container );
    … …  
    35213643                                if ( ! section.panel() ) {
    35223644                                        rootNodes.push( section );
    35233645                                }
    3524                                 appendContainer = section.container.find( 'ul:first' );
     3646                                appendContainer = ( section.content.is( 'ul' ) ) ? section.content : section.content.find( 'ul:first' );
    35253647                                if ( ! api.utils.areElementListsEqual( controlContainers, appendContainer.children( '[id]' ) ) ) {
    35263648                                        _( controls ).each( function ( control ) {
    35273649                                                appendContainer.append( control.container );
    … …  
    35333655                        // Sort the root panels and sections
    35343656                        rootNodes.sort( api.utils.prioritySort );
    35353657                        rootContainers = _.pluck( rootNodes, 'container' );
    3536                         appendContainer = $( '#customize-theme-controls' ).children( 'ul' ); // @todo This should be defined elsewhere, and to be configurable
     3658                        appendContainer = $( '.customize-pane-parent' ); //$( '#customize-theme-controls' ).children( 'ul' ); // @todo This should be defined elsewhere, and to be configurable
    35373659                        if ( ! api.utils.areElementListsEqual( rootContainers, appendContainer.children() ) ) {
    35383660                                _( rootNodes ).each( function ( rootNode ) {
    35393661                                        appendContainer.append( rootNode.container );

  • src/wp-admin/js/customize-nav-menus.js 

    diff --git a/src/wp-admin/js/customize-nav-menus.js b/src/wp-admin/js/customize-nav-menus.js
index d27f57c..855a9ec 100644
    a b  
    539539                        api.Panel.prototype.attachEvents.call( this );
    540540
    541541                        var panel = this,
    542                                 panelMeta = panel.container.find( '.panel-meta' ),
     542                                panelMeta = panel.content.find( '.panel-meta' ),
    543543                                help = panelMeta.find( '.customize-help-toggle' ),
    544544                                content = panelMeta.find( '.customize-panel-description' ),
    545545                                options = $( '#screen-options-wrap' ),
    … …  
    716716
    717717                        api.bind( 'pane-contents-reflowed', function() {
    718718                                // Skip menus that have been removed.
    719                                 if ( ! section.container.parent().length ) {
     719                                if ( ! section.content.parent().length ) {
    720720                                        return;
    721721                                }
    722                                 section.container.find( '.menu-item .menu-item-reorder-nav button' ).attr({ 'tabindex': '0', 'aria-hidden': 'false' });
    723                                 section.container.find( '.menu-item.move-up-disabled .menus-move-up' ).attr({ 'tabindex': '-1', 'aria-hidden': 'true' });
    724                                 section.container.find( '.menu-item.move-down-disabled .menus-move-down' ).attr({ 'tabindex': '-1', 'aria-hidden': 'true' });
    725                                 section.container.find( '.menu-item.move-left-disabled .menus-move-left' ).attr({ 'tabindex': '-1', 'aria-hidden': 'true' });
    726                                 section.container.find( '.menu-item.move-right-disabled .menus-move-right' ).attr({ 'tabindex': '-1', 'aria-hidden': 'true' });
     722                                section.content.find( '.menu-item .menu-item-reorder-nav button' ).attr({ 'tabindex': '0', 'aria-hidden': 'false' });
     723                                section.content.find( '.menu-item.move-up-disabled .menus-move-up' ).attr({ 'tabindex': '-1', 'aria-hidden': 'true' });
     724                                section.content.find( '.menu-item.move-down-disabled .menus-move-down' ).attr({ 'tabindex': '-1', 'aria-hidden': 'true' });
     725                                section.content.find( '.menu-item.move-left-disabled .menus-move-left' ).attr({ 'tabindex': '-1', 'aria-hidden': 'true' });
     726                                section.content.find( '.menu-item.move-right-disabled .menus-move-right' ).attr({ 'tabindex': '-1', 'aria-hidden': 'true' });
    727727                        } );
    728728                },
    729729
    … …  
    834834                        var section = this;
    835835
    836836                        if ( expanded ) {
    837                                 wpNavMenu.menuList = section.container.find( '.accordion-section-content:first' );
     837                                wpNavMenu.menuList = section.content;
    838838                                wpNavMenu.targetList = wpNavMenu.menuList;
    839839
    840840                                // Add attributes needed by wpNavMenu
    … …  
    896896                onChangeExpanded: function( expanded ) {
    897897                        var section = this,
    898898                                button = section.container.find( '.add-menu-toggle' ),
    899                                 content = section.container.find( '.new-menu-section-content' ),
     899                                content = section.content,
    900900                                customizer = section.container.closest( '.wp-full-overlay-sidebar-content' );
    901901                        if ( expanded ) {
    902902                                button.addClass( 'open' );
    … …  
    910910                                content.slideUp( 'fast' );
    911911                                content.find( '.menu-name-field' ).removeClass( 'invalid' );
    912912                        }
     913                },
     914
     915                /**
     916                 * Detach and return the content html, extracted from the container html, if it exists.
     917                 *
     918                 * @since
     919                 */
     920                getContent: function () {
     921                        return this.container.find( 'ul:first' );
    913922                }
    914923        });
    915924
    … …  
    18531862                 */
    18541863                ready: function() {
    18551864                        var control = this,
     1865                                section = api.section( control.section() ),
    18561866                                menuId = control.params.menu_id,
    18571867                                menu = control.setting(),
    18581868                                name,
    … …  
    18691879                         * being deactivated.
    18701880                         */
    18711881                        control.active.validate = function() {
    1872                                 var value, section = api.section( control.section() );
     1882                                var value;
    18731883                                if ( section ) {
    18741884                                        value = section.active();
    18751885                                } else {
    … …  
    18781888                                return value;
    18791889                        };
    18801890
    1881                         control.$controlSection = control.container.closest( '.control-section' );
     1891                        control.$controlSection = section.container;
    18821892                        control.$sectionContent = control.container.closest( '.accordion-section-content' );
    18831893
    18841894                        this._setupModel();
    … …  
    20612071                        section = api.section( control.section() );
    20622072                        removeSection = function() {
    20632073                                section.container.remove();
     2074                                section.content.remove();
    20642075                                api.section.remove( section.id );
    20652076                        };
    20662077
    … …  
    21522163                                        return;
    21532164                                }
    21542165
    2155                                 var section = control.container.closest( '.accordion-section' ),
     2166                                var section = api.section( control.section() ),
    21562167                                        menuId = control.params.menu_id,
    2157                                         controlTitle = section.find( '.accordion-section-title' ),
    2158                                         sectionTitle = section.find( '.customize-section-title h3' ),
    2159                                         location = section.find( '.menu-in-location' ),
     2168                                        controlTitle = section.container.find( '.accordion-section-title' ),
     2169                                        sectionTitle = section.content.find( '.customize-section-title h3' ),
     2170                                        location = section.container.find( '.menu-in-location' ),
    21602171                                        action = sectionTitle.find( '.customize-action' ),
    21612172                                        name = displayNavMenuName( menu.name );
    21622173
    … …  
    21802191                                } );
    21812192
    21822193                                // Update the nav menu name in all location checkboxes.
    2183                                 section.find( '.customize-control-checkbox input' ).each( function() {
     2194                                section.content.find( '.customize-control-checkbox input' ).each( function() {
    21842195                                        if ( $( this ).prop( 'checked' ) ) {
    21852196                                                $( '.current-menu-location-name-' + $( this ).data( 'location-id' ) ).text( name );
    21862197                                        }