From f3e8e7735d261b77dc123606fb65ff0e9260aebb Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Fri, 23 Sep 2016 22:22:09 +0000 Subject: [PATCH] Customize: Re-architect and harden panel/section UI logic. Removes contents for sections and panels from being logically nested (in the DOM) in order to eliminate many issues related to using `margin-top` hacks. The element containing the link to expand the content element for panels and sections is now a sibling element to its content element: the content is removed from being nested at initialization. The content element is now available in a `contentContainer` property whereas the head element (containing the link to open the construct) is in a `headContainer` property. The existing `container` property is now a jQuery collection that contains both of these elements. Since the head element is no longer in an ancestor element to the `content` element, the `aria-owns` property is now used to maintain the relationship between the `headContainer` and the `contentContainer`. These changes are also accompanied by an improvement to the animation performance for the sliding panes. Props delawski, celloexpressions. Fixes #34391. Fixes #34344. Fixes #35947. git-svn-id: https://develop.svn.wordpress.org/trunk@38648 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/css/common.css | 6 +- src/wp-admin/css/customize-controls.css | 241 ++++----- src/wp-admin/css/customize-nav-menus.css | 8 +- src/wp-admin/customize.php | 2 +- src/wp-admin/js/customize-controls.js | 500 ++++++++++-------- src/wp-admin/js/customize-nav-menus.js | 37 +- tests/qunit/wp-admin/js/customize-controls.js | 68 ++- tests/qunit/wp-admin/js/customize-widgets.js | 6 +- 8 files changed, 480 insertions(+), 388 deletions(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 8cf69f5327..0676888a39 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -3367,7 +3367,8 @@ img { display: none; } -.control-section .accordion-section-title { +.control-section .accordion-section-title, +.customize-pane-child .accordion-section-title { border-left: none; border-right: none; padding: 10px 10px 11px 14px; @@ -3375,7 +3376,8 @@ img { background: #fff; } -.control-section .accordion-section-title:after { +.control-section .accordion-section-title:after, +.customize-pane-child .accordion-section-title:after { top: 11px; } diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css index 5118b600f2..3f2193b286 100644 --- a/src/wp-admin/css/customize-controls.css +++ b/src/wp-admin/css/customize-controls.css @@ -77,8 +77,8 @@ body { line-height: 24px; } -#customize-controls .control-section .customize-section-title h3, -#customize-controls .control-section h3.customize-section-title, +#customize-controls .customize-pane-child .customize-section-title h3, +#customize-controls .customize-pane-child h3.customize-section-title, #customize-controls .customize-info .panel-title { font-size: 20px; font-weight: 200; @@ -229,6 +229,103 @@ body { box-sizing: border-box; } +#customize-info, +#customize-theme-controls .customize-pane-parent, +#customize-theme-controls .customize-pane-child { + overflow: visible; + width: 100%; + margin: 0; + padding: 0; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + -webkit-transition: 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1); + transition: 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1); + transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1); + transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1), 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1); /* easeInOutCubic */ +} + +#customize-info, +#customize-theme-controls .customize-pane-parent { + position: relative; + visibility: visible; + height: auto; + max-height: none; + overflow: auto; + -webkit-transform: none; + -ms-transform: none; + transform: none; +} + +#customize-theme-controls .customize-pane-child { + position: absolute; + top: 0; + left: 0; + visibility: hidden; + height: 0; + max-height: none; + overflow: hidden; + -webkit-transform: translateX(100%); + -ms-transform: translateX(100%); + transform: translateX(100%); +} + +#customize-theme-controls .customize-pane-child.open, +#customize-theme-controls .customize-pane-child.current-panel, +#customize-theme-controls .customize-themes-panel.customize-pane-child.current-panel { + -webkit-transform: none; + -ms-transform: none; + transform: none; +} + +#customize-theme-controls .customize-themes-panel.customize-pane-child, +.section-open #customize-theme-controls .customize-pane-parent, +.in-sub-panel #customize-theme-controls .customize-pane-parent, +.section-open #customize-info, +.in-sub-panel #customize-info, +.in-sub-panel.section-open #customize-theme-controls .customize-pane-child.current-panel, +.in-themes-panel #customize-theme-controls .customize-pane-parent, +.in-themes-panel #customize-info { + visibility: hidden; + height: 0; + overflow: hidden; + -webkit-transform: translateX(-100%); + -ms-transform: translateX(-100%); + transform: translateX(-100%); +} + +.section-open #customize-theme-controls .customize-pane-parent.busy, +.in-sub-panel #customize-theme-controls .customize-pane-parent.busy, +.in-themes-panel #customize-theme-controls .customize-pane-parent.busy, +.section-open #customize-info.busy, +.in-sub-panel #customize-info.busy, +.in-themes-panel #customize-info.busy, +.busy.section-open.in-sub-panel #customize-theme-controls .customize-pane-child.current-panel, +#customize-theme-controls .customize-pane-child.open, +#customize-theme-controls .customize-pane-child.current-panel, +#customize-theme-controls .customize-pane-child.busy { + visibility: visible; + height: auto; + overflow: auto; +} + +.in-themes-panel #customize-theme-controls .customize-pane-parent, +.in-themes-panel #customize-info { + -webkit-transform: translateX(100%); + -ms-transform: translateX(100%); + transform: translateX(100%); +} + +#customize-theme-controls .customize-pane-child.accordion-section-content, +#customize-theme-controls .customize-pane-child.accordion-sub-container { + display: block; + overflow-x: hidden; +} + +#customize-theme-controls .customize-pane-child.accordion-section-content { + padding: 12px; +} + .customize-section-description-container { margin-bottom: 15px; } @@ -268,39 +365,14 @@ h3.customize-section-title { color: #555; } -#customize-theme-controls { - position: relative; - left: 0; - -webkit-transition: .18s left ease-in-out; - transition: .18s left ease-in-out; -} - -.ios #customize-theme-controls { - -webkit-transition: left 0s; - transition: left 0s; -} - -.section-open #customize-info, -.section-open #customize-theme-controls { - left: -100%; -} - .accordion-sub-container.control-panel-content { display: none; position: absolute; - left: 100%; top: 0; width: 100%; - -webkit-transition: left ease-in-out .18s; - transition: left ease-in-out .18s; } -.ios .accordion-sub-container.control-panel-content { - -webkit-transition: left 0s; - transition: left 0s; -} - -.accordion-sub-container.control-panel-content.animating { +.accordion-sub-container.control-panel-content.busy { display: block; } @@ -343,20 +415,14 @@ h3.customize-section-title { -webkit-box-shadow: none; box-shadow: none; cursor: pointer; - -webkit-transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out; - transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out; + -webkit-transition: color .1s ease-in-out, background .1s ease-in-out; + transition: color .1s ease-in-out, background .1s ease-in-out; } .customize-section-back { height: 74px; } -.ios .customize-panel-back, -.ios .customize-section-back { - -webkit-transition: left 0s; - transition: left 0s; -} - .ios .customize-panel-back { display: none; } @@ -423,63 +489,6 @@ h3.customize-section-title { padding-left: 62px; } -#customize-info, -#customize-theme-controls > ul > .accordion-section { - position: relative; - left: 0; - -webkit-transition: left ease-in-out .18s; - transition: left ease-in-out .18s; -} - -.ios #customize-info, -.ios #customize-theme-controls > ul > .accordion-section { - -webkit-transition: left 0s; - transition: left 0s; -} - -.in-sub-panel #customize-info, -.in-sub-panel #customize-theme-controls > ul > .accordion-section { - left: -100%; - width: 100%; -} - -.in-sub-panel #customize-theme-controls .accordion-section.current-panel { - width: 100%; -} - -#customize-theme-controls .control-section.current-panel { - padding: 0; -} - -#customize-theme-controls .control-section > h3.accordion-section-title { - position: relative; - left: 0; -} - -#customize-theme-controls .control-section.current-panel > h3.accordion-section-title { - left: -354px; - -webkit-transition: left ease-in-out .18s; - transition: left ease-in-out .18s; -} - -.ios #customize-theme-controls .control-section.current-panel > h3.accordion-section-title { - -webkit-transition: left 0s; - transition: left 0s; -} - -.wp-full-overlay.section-open #customize-controls .wp-full-overlay-sidebar-content { - visibility: hidden; - overflow-y: hidden; -} - -.wp-full-overlay.section-open .wp-full-overlay-sidebar-content .accordion-section.open { - visibility: visible; -} - -.wp-full-overlay.section-open .wp-full-overlay-sidebar-content .accordion-section.open .accordion-section-content { - overflow-y: auto; -} - p.customize-section-description { font-style: normal; margin-top: 22px; @@ -1005,26 +1014,27 @@ p.customize-section-description { #customize-theme-controls .control-section-themes > .accordion-section-title:hover, /* Not a focusable element. */ #customize-theme-controls .control-section-themes > .accordion-section-title { - margin: 15px 0; + margin: 0 0 15px; } -.customize-themes-panel .accordion-section-title { +#customize-controls .customize-themes-panel .accordion-section-title { margin: 15px -8px; } -.control-section-themes .accordion-section-title { +#customize-controls .control-section-themes .accordion-section-title, +#customize-controls .customize-themes-panel .accordion-section-title { padding-right: 100px; /* Space for the button */ } -.control-section-themes .accordion-section-title span.customize-action, +#customize-controls .control-section-themes .accordion-section-title span.customize-action, #customize-controls .customize-section-title span.customize-action { font-size: 13px; display: block; font-weight: 400; } -.control-section-themes .accordion-section-title .change-theme, -.control-section-themes .accordion-section-title .customize-theme { +#customize-controls .control-section-themes .accordion-section-title .change-theme, +#customize-controls .customize-themes-panel .accordion-section-title .customize-theme { position: absolute; right: 10px; top: 50%; @@ -1032,12 +1042,11 @@ p.customize-section-description { font-weight: 400; } -.control-section-themes .accordion-section-title:before { +#customize-controls .control-section-themes .accordion-section-title:before { display: none; } -.customize-themes-panel { - display: none; +#customize-controls .customize-themes-panel { padding: 0 8px; background: #f1f1f1; -webkit-box-sizing: border-box; @@ -1045,7 +1054,7 @@ p.customize-section-description { box-sizing: border-box; } -.customize-themes-panel .accordion-section-title:first-child { +#customize-controls .customize-themes-panel .accordion-section-title:first-child { margin-top: 0; } @@ -1054,14 +1063,10 @@ p.customize-section-description { font-weight: 600; } -.customize-themes-panel > h2 { +#customize-controls .customize-themes-panel > h2 { padding: 15px 8px 0 8px; } -.control-section.open .customize-themes-panel { - display: block; -} - #customize-theme-controls .customize-themes-panel .accordion-section-content { background: transparent; display: block; @@ -1107,27 +1112,15 @@ p.customize-section-description { width: 100%; } -#accordion-section-themes .accordion-section-title:after { +.control-section-themes .accordion-section-title:after, +.customize-themes-panel .accordion-section-title:after { display: none; } -#customize-theme-controls .control-section-themes.current-panel > h3.accordion-section-title { - left: 0; -} - .customize-themes-panel.control-panel-content { - position: absolute; - left: -100%; - top: 0; - width: 100%; border-top: 1px solid #ddd; } -.in-themes-panel #customize-info, -.in-themes-panel #customize-theme-controls > ul > .accordion-section { - left: 100%; -} - /* Details View */ .wp-customizer .theme-overlay { display: none; @@ -1161,10 +1154,6 @@ p.customize-section-description { text-align: right; /* Because there's only one action, match the pattern of media modals and right-align the action. */ } -.modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content { - overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */ -} - .ie8 .wp-customizer .theme-overlay .theme-header, .ie8 .wp-customizer .theme-overlay .theme-about, .ie8 .wp-customizer .theme-overlay .theme-actions { diff --git a/src/wp-admin/css/customize-nav-menus.css b/src/wp-admin/css/customize-nav-menus.css index d557cc3733..d180fb3b35 100644 --- a/src/wp-admin/css/customize-nav-menus.css +++ b/src/wp-admin/css/customize-nav-menus.css @@ -381,15 +381,15 @@ .reordering .menu-item-depth-10 > .menu-item-bar { margin-right: 150px; } .reordering .menu-item-depth-11 > .menu-item-bar { margin-right: 165px; } -.control-section-nav_menu .menu .menu-item-edit-active { +.control-section-nav_menu.menu .menu-item-edit-active { margin-left: 0; } -.control-section-nav_menu .menu .menu-item-edit-active .menu-item-bar { +.control-section-nav_menu.menu .menu-item-edit-active .menu-item-bar { margin-right: 0; } -.control-section-nav_menu .menu .sortable-placeholder { +.control-section-nav_menu.menu .sortable-placeholder { margin-top: 0; margin-bottom: 1px; max-width: -webkit-calc(100% - 2px); @@ -403,7 +403,7 @@ float: none; } -.control-section-nav_menu .menu ul.menu-item-transport .menu-item-bar { +.control-section-nav_menu.menu ul.menu-item-transport .menu-item-bar { margin-top: 0; } diff --git a/src/wp-admin/customize.php b/src/wp-admin/customize.php index bd8e11819b..6c0b20d6c2 100644 --- a/src/wp-admin/customize.php +++ b/src/wp-admin/customize.php @@ -142,7 +142,7 @@ do_action( 'customize_controls_print_scripts' );
- +
diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js index 7078cfd059..d5f2e4e448 100644 --- a/src/wp-admin/js/customize-controls.js +++ b/src/wp-admin/js/customize-controls.js @@ -1,6 +1,6 @@ /* global _wpCustomizeHeader, _wpCustomizeBackground, _wpMediaViewsL10n, MediaElementPlayer */ (function( exports, $ ){ - var Container, focus, api = wp.customize; + var Container, focus, normalizedTransitionendEventName, api = wp.customize; /** * A Customizer Setting. @@ -101,10 +101,8 @@ params = params || {}; focus = function () { var focusContainer; - if ( construct.extended( api.Panel ) && construct.expanded && construct.expanded() ) { - focusContainer = construct.container.find( 'ul.control-panel-content' ); - } else if ( construct.extended( api.Section ) && construct.expanded && construct.expanded() ) { - focusContainer = construct.container.find( 'ul.accordion-section-content' ); + if ( ( construct.extended( api.Panel ) || construct.extended( api.Section ) ) && construct.expanded && construct.expanded() ) { + focusContainer = construct.contentContainer; } else { focusContainer = construct.container; } @@ -187,6 +185,32 @@ return equal; }; + /** + * Return browser supported `transitionend` event name. + * + * @since 4.7.0 + * + * @returns {string|null} Normalized `transitionend` event name or null if CSS transitions are not supported. + */ + normalizedTransitionendEventName = (function () { + var el, transitions, prop; + el = document.createElement( 'div' ); + transitions = { + 'transition' : 'transitionend', + 'OTransition' : 'oTransitionEnd', + 'MozTransition' : 'transitionend', + 'WebkitTransition': 'webkitTransitionEnd' + }; + prop = _.find( _.keys( transitions ), function( prop ) { + return ! _.isUndefined( el.style[ prop ] ); + } ); + if ( prop ) { + return transitions[ prop ]; + } else { + return null; + } + })(); + /** * Base class for Panel and Section. * @@ -238,6 +262,9 @@ if ( 0 === container.container.length ) { container.container = $( container.getContainer() ); } + container.headContainer = container.container; + container.contentContainer = container.getContent(); + container.container = container.container.add( container.contentContainer ); container.deferred = { embedded: new $.Deferred() @@ -325,7 +352,10 @@ * @param {Object} args.completeCallback */ onChangeActive: function( active, args ) { - var duration, construct = this, expandedOtherPanel; + var construct = this, + headContainer = construct.headContainer, + duration, expandedOtherPanel; + if ( args.unchanged ) { if ( args.completeCallback ) { args.completeCallback(); @@ -352,31 +382,26 @@ } } - if ( ! $.contains( document, construct.container[0] ) ) { + if ( ! $.contains( document, headContainer ) ) { // jQuery.fn.slideUp is not hiding an element if it is not in the DOM - construct.container.toggle( active ); + headContainer.toggle( active ); if ( args.completeCallback ) { args.completeCallback(); } } else if ( active ) { - construct.container.stop( true, true ).slideDown( duration, args.completeCallback ); + headContainer.stop( true, true ).slideDown( duration, args.completeCallback ); } else { if ( construct.expanded() ) { construct.collapse({ duration: duration, completeCallback: function() { - construct.container.stop( true, true ).slideUp( duration, args.completeCallback ); + headContainer.stop( true, true ).slideUp( duration, args.completeCallback ); } }); } else { - construct.container.stop( true, true ).slideUp( duration, args.completeCallback ); + headContainer.stop( true, true ).slideUp( duration, args.completeCallback ); } } - - // Recalculate the margin-top immediately, not waiting for debounced reflow, to prevent momentary (100ms) vertical jiggle. - if ( expandedOtherPanel ) { - expandedOtherPanel._recalculateTopMargin(); - } }, /** @@ -482,6 +507,66 @@ return this._toggleExpanded( false, params ); }, + /** + * Animate container state change if transitions are supported by the browser. + * + * @since 4.7.0 + * + * @param {function} completeCallback Function to be called after transition is completed. + * @returns {void} + * @private + */ + _animateChangeExpanded: function( completeCallback ) { + // Return if CSS transitions are not supported. + if ( ! normalizedTransitionendEventName ) { + if ( completeCallback ) { + completeCallback(); + } + return; + } + + var construct = this, + content = construct.contentContainer, + overlay = content.closest( '.wp-full-overlay' ), + elements, transitionEndCallback; + + // Determine set of elements that are affected by the animation. + elements = overlay.add( content ); + if ( _.isUndefined( construct.panel ) || '' === construct.panel() ) { + elements = elements.add( '#customize-info, .customize-pane-parent' ); + } + + // Handle `transitionEnd` event. + transitionEndCallback = function( e ) { + if ( 2 !== e.eventPhase || ! $( e.target ).is( content ) ) { + return; + } + content.off( normalizedTransitionendEventName, transitionEndCallback ); + elements.removeClass( 'busy' ); + if ( completeCallback ) { + completeCallback(); + } + }; + content.on( normalizedTransitionendEventName, transitionEndCallback ); + elements.addClass( 'busy' ); + + // Prevent screen flicker when pane has been scrolled before expanding. + _.defer( function() { + var container = content.closest( '.wp-full-overlay-sidebar-content' ), + currentScrollTop = container.scrollTop(), + previousScrollTop = content.data( 'previous-scrollTop' ) || 0, + expanded = construct.expanded(); + + if ( expanded && 0 < currentScrollTop ) { + content.css( 'top', currentScrollTop + 'px' ); + content.data( 'previous-scrollTop', currentScrollTop ); + } else if ( ! expanded && 0 < currentScrollTop + previousScrollTop ) { + content.css( 'top', previousScrollTop - currentScrollTop + 'px' ); + container.scrollTop( previousScrollTop ); + } + } ); + }, + /** * Bring the container into view and then expand this and bring it into view * @param {Object} [params] @@ -507,6 +592,39 @@ } return '
  • '; + }, + + /** + * Find content element which is displayed when the section is expanded. + * + * After a construct is initialized, the return value will be available via the `contentContainer` property. + * By default the element will be related it to the parent container with `aria-owns` and detached. + * Custom panels and sections (such as the `NewMenuSection`) that do not have a sliding pane should + * just return the content element without needing to add the `aria-owns` element or detach it from + * the container. Such non-sliding pane custom sections also need to override the `onChangeExpanded` + * method to handle animating the panel/section into and out of view. + * + * @since 4.7.0 + * + * @returns {jQuery} Detached content element. + */ + getContent: function() { + var construct = this, + container = construct.container, + content = container.find( '.accordion-section-content, .control-panel-content' ).first(), + contentId = 'sub-' + container.attr( 'id' ), + ownedElements = contentId, + alreadyOwnedElements = container.attr( 'aria-owns' ); + + if ( alreadyOwnedElements ) { + ownedElements = ownedElements + ' ' + alreadyOwnedElements; + } + container.attr( 'aria-owns', ownedElements ); + + return content.detach().attr( { + 'id': contentId, + 'class': 'customize-pane-child ' + content.attr( 'class' ) + ' ' + container.attr( 'class' ) + } ); } }); @@ -552,7 +670,7 @@ section.id = id; section.panel = new api.Value(); section.panel.bind( function ( id ) { - $( section.container ).toggleClass( 'control-subsection', !! id ); + $( section.headContainer ).toggleClass( 'control-subsection', !! id ); }); section.panel.set( section.params.panel || '' ); api.utils.bubbleChildValueChanges( section, [ 'panel' ] ); @@ -569,7 +687,9 @@ * @since 4.1.0 */ embed: function () { - var section = this, inject; + var inject, + section = this, + container = $( '#customize-theme-controls' ); // Watch for changes to the panel state inject = function ( panelId ) { @@ -579,31 +699,30 @@ api.panel( panelId, function ( panel ) { // The panel has been registered, wait for it to become ready/initialized panel.deferred.embedded.done( function () { - parentContainer = panel.container.find( 'ul:first' ); - if ( ! section.container.parent().is( parentContainer ) ) { - parentContainer.append( section.container ); + parentContainer = panel.contentContainer; + if ( ! section.headContainer.parent().is( parentContainer ) ) { + parentContainer.append( section.headContainer ); + } + if ( ! section.contentContainer.parent().is( section.headContainer ) ) { + container.append( section.contentContainer ); } section.deferred.embedded.resolve(); }); } ); } else { // There is no panel, so embed the section in the root of the customizer - parentContainer = $( '#customize-theme-controls' ).children( 'ul' ); // @todo This should be defined elsewhere, and to be configurable - if ( ! section.container.parent().is( parentContainer ) ) { - parentContainer.append( section.container ); + parentContainer = $( '.customize-pane-parent' ); // @todo This should be defined elsewhere, and to be configurable + if ( ! section.headContainer.parent().is( parentContainer ) ) { + parentContainer.append( section.headContainer ); + } + if ( ! section.contentContainer.parent().is( section.headContainer ) ) { + container.append( section.contentContainer ); } section.deferred.embedded.resolve(); } }; section.panel.bind( inject ); inject( section.panel.get() ); // Since a section may never get a panel, assume that it won't ever get one - - section.deferred.embedded.done(function() { - // Fix the top margin after reflow. - api.bind( 'pane-contents-reflowed', _.debounce( function() { - section._recalculateTopMargin(); - }, 100 ) ); - }); }, /** @@ -669,50 +788,35 @@ */ onChangeExpanded: function ( expanded, args ) { var section = this, - container = section.container.closest( '.wp-full-overlay-sidebar-content' ), - content = section.container.find( '.accordion-section-content' ), - overlay = section.container.closest( '.wp-full-overlay' ), - backBtn = section.container.find( '.customize-section-back' ), - sectionTitle = section.container.find( '.accordion-section-title' ).first(), - headerActionsHeight = $( '#customize-header-actions' ).height(), - resizeContentHeight, expand, position, scroll; + container = section.headContainer.closest( '.wp-full-overlay-sidebar-content' ), + content = section.contentContainer, + overlay = section.headContainer.closest( '.wp-full-overlay' ), + backBtn = content.find( '.customize-section-back' ), + sectionTitle = section.headContainer.find( '.accordion-section-title' ).first(), + expand; - if ( expanded && ! section.container.hasClass( 'open' ) ) { + if ( expanded && ! content.hasClass( 'open' ) ) { if ( args.unchanged ) { expand = args.completeCallback; } else { - container.scrollTop( 0 ); - resizeContentHeight = function() { - var matchMedia, offset; - matchMedia = window.matchMedia || window.msMatchMedia; - offset = 90; // 45px for customize header actions + 45px for footer actions. + expand = $.proxy( function() { + section._animateChangeExpanded( function() { + sectionTitle.attr( 'tabindex', '-1' ); + backBtn.attr( 'tabindex', '0' ); - // No footer on small screens. - if ( matchMedia && matchMedia( '(max-width: 640px)' ).matches ) { - offset = 45; - } - content.css( 'height', ( window.innerHeight - offset ) ); - }; - expand = function() { - section.container.addClass( 'open' ); + backBtn.focus(); + content.css( 'top', '' ); + container.scrollTop( 0 ); + + if ( args.completeCallback ) { + args.completeCallback(); + } + } ); + + content.addClass( 'open' ); overlay.addClass( 'section-open' ); - position = content.offset().top; - scroll = container.scrollTop(); - content.css( 'margin-top', ( headerActionsHeight - position - scroll ) ); - resizeContentHeight(); - sectionTitle.attr( 'tabindex', '-1' ); - backBtn.attr( 'tabindex', '0' ); - backBtn.focus(); - if ( args.completeCallback ) { - args.completeCallback(); - } - - // Fix the height after browser resize. - $( window ).on( 'resize.customizer-section', _.debounce( resizeContentHeight, 100 ) ); - - setTimeout( _.bind( section._recalculateTopMargin, section ), 0 ); - }; + }, this ); } if ( ! args.allowMultiple ) { @@ -735,42 +839,27 @@ expand(); } - } else if ( ! expanded && section.container.hasClass( 'open' ) ) { - section.container.removeClass( 'open' ); + } else if ( ! expanded && content.hasClass( 'open' ) ) { + section._animateChangeExpanded( function() { + backBtn.attr( 'tabindex', '-1' ); + sectionTitle.attr( 'tabindex', '0' ); + + sectionTitle.focus(); + content.css( 'top', '' ); + + if ( args.completeCallback ) { + args.completeCallback(); + } + } ); + + content.removeClass( 'open' ); overlay.removeClass( 'section-open' ); - content.css( 'margin-top', '' ); - container.scrollTop( 0 ); - backBtn.attr( 'tabindex', '-1' ); - sectionTitle.attr( 'tabindex', '0' ); - sectionTitle.focus(); - if ( args.completeCallback ) { - args.completeCallback(); - } - $( window ).off( 'resize.customizer-section' ); + } else { if ( args.completeCallback ) { args.completeCallback(); } } - }, - - /** - * Recalculate the top margin. - * - * @since 4.4.0 - * @private - */ - _recalculateTopMargin: function() { - var section = this, content, offset, headerActionsHeight; - content = section.container.find( '.accordion-section-content' ); - if ( 0 === content.length ) { - return; - } - headerActionsHeight = $( '#customize-header-actions' ).height(); - offset = ( content.offset().top - headerActionsHeight ); - if ( 0 < offset ) { - content.css( 'margin-top', ( parseInt( content.css( 'margin-top' ), 10 ) - offset ) ); - } } }); @@ -948,18 +1037,14 @@ } // Note: there is a second argument 'args' passed - var position, scroll, - panel = this, - section = panel.container.closest( '.accordion-section' ), + var panel = this, + section = panel.contentContainer, overlay = section.closest( '.wp-full-overlay' ), container = section.closest( '.wp-full-overlay-sidebar-content' ), - siblings = container.find( '.open' ), customizeBtn = section.find( '.customize-theme' ), - changeBtn = section.find( '.change-theme' ), - content = section.find( '.control-panel-content' ); - - if ( expanded ) { + changeBtn = panel.headContainer.find( '.change-theme' ); + if ( expanded && ! section.hasClass( 'current-panel' ) ) { // Collapse any sibling sections/panels api.section.each( function ( otherSection ) { if ( otherSection !== panel ) { @@ -970,45 +1055,38 @@ otherPanel.collapse( { duration: 0 } ); }); - content.show( 0, function() { - position = content.offset().top; - scroll = container.scrollTop(); - content.css( 'margin-top', ( $( '#customize-header-actions' ).height() - position - scroll ) ); - section.addClass( 'current-panel' ); - overlay.addClass( 'in-themes-panel' ); - container.scrollTop( 0 ); - _.delay( panel.renderScreenshots, 10 ); // Wait for the controls - panel.$customizeSidebar.on( 'scroll.customize-themes-section', _.throttle( panel.renderScreenshots, 300 ) ); - if ( args.completeCallback ) { - args.completeCallback(); - } - } ); - customizeBtn.focus(); - } else { - siblings.removeClass( 'open' ); - section.removeClass( 'current-panel' ); - overlay.removeClass( 'in-themes-panel' ); - panel.$customizeSidebar.off( 'scroll.customize-themes-section' ); - content.delay( 180 ).hide( 0, function() { - content.css( 'margin-top', 'inherit' ); // Reset - if ( args.completeCallback ) { - args.completeCallback(); - } - } ); - customizeBtn.attr( 'tabindex', '0' ); - changeBtn.focus(); - container.scrollTop( 0 ); - } - }, + panel._animateChangeExpanded( function() { + changeBtn.attr( 'tabindex', '-1' ); + customizeBtn.attr( 'tabindex', '0' ); - /** - * Recalculate the top margin. - * - * @since 4.4.0 - * @private - */ - _recalculateTopMargin: function() { - api.Panel.prototype._recalculateTopMargin.call( this ); + customizeBtn.focus(); + section.css( 'top', '' ); + container.scrollTop( 0 ); + + if ( args.completeCallback ) { + args.completeCallback(); + } + } ); + + overlay.addClass( 'in-themes-panel' ); + section.addClass( 'current-panel' ); + + } else if ( ! expanded && section.hasClass( 'current-panel' ) ) { + panel._animateChangeExpanded( function() { + changeBtn.attr( 'tabindex', '0' ); + customizeBtn.attr( 'tabindex', '-1' ); + + changeBtn.focus(); + section.css( 'top', '' ); + + if ( args.completeCallback ) { + args.completeCallback(); + } + } ); + + overlay.removeClass( 'in-themes-panel' ); + section.removeClass( 'current-panel' ); + } }, /** @@ -1237,17 +1315,17 @@ */ embed: function () { var panel = this, - parentContainer = $( '#customize-theme-controls > ul' ); // @todo This should be defined elsewhere, and to be configurable + container = $( '#customize-theme-controls' ), + parentContainer = $( '.customize-pane-parent' ); // @todo This should be defined elsewhere, and to be configurable - if ( ! panel.container.parent().is( parentContainer ) ) { - parentContainer.append( panel.container ); + if ( ! panel.headContainer.parent().is( parentContainer ) ) { + parentContainer.append( panel.headContainer ); + } + if ( ! panel.contentContainer.parent().is( panel.headContainer ) ) { + container.append( panel.contentContainer ); panel.renderContent(); } - api.bind( 'pane-contents-reflowed', _.debounce( function() { - panel._recalculateTopMargin(); - }, 100 ) ); - panel.deferred.embedded.resolve(); }, @@ -1258,7 +1336,7 @@ var meta, panel = this; // Expand/Collapse accordion sections on click. - panel.container.find( '.accordion-section-title' ).on( 'click keydown', function( event ) { + panel.headContainer.find( '.accordion-section-title' ).on( 'click keydown', function( event ) { if ( api.utils.isKeydownButNotEnterEvent( event ) ) { return; } @@ -1289,7 +1367,6 @@ } event.preventDefault(); // Keep this AFTER the key filter above - meta = panel.container.find( '.panel-meta' ); if ( meta.hasClass( 'cannot-expand' ) ) { return; } @@ -1359,20 +1436,14 @@ } // Note: there is a second argument 'args' passed - var position, scroll, - panel = this, - accordionSection = panel.container.closest( '.accordion-section' ), + var panel = this, + accordionSection = panel.contentContainer, overlay = accordionSection.closest( '.wp-full-overlay' ), container = accordionSection.closest( '.wp-full-overlay-sidebar-content' ), - siblings = container.find( '.open' ), - topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ), - backBtn = accordionSection.find( '.customize-panel-back' ), - panelTitle = accordionSection.find( '.accordion-section-title' ).first(), - content = accordionSection.find( '.control-panel-content' ), - headerActionsHeight = $( '#customize-header-actions' ).height(); - - if ( expanded ) { + topPanel = panel.headContainer.find( '.accordion-section-title' ), + backBtn = accordionSection.find( '.customize-panel-back' ); + if ( expanded && ! accordionSection.hasClass( 'current-panel' ) ) { // Collapse any sibling sections/panels api.section.each( function ( section ) { if ( panel.id !== section.panel() ) { @@ -1385,51 +1456,38 @@ } }); - content.show( 0, function() { - content.parent().show(); - position = content.offset().top; - scroll = container.scrollTop(); - content.css( 'margin-top', ( headerActionsHeight - position - scroll ) ); - accordionSection.addClass( 'current-panel' ); - overlay.addClass( 'in-sub-panel' ); - container.scrollTop( 0 ); - if ( args.completeCallback ) { - args.completeCallback(); - } - } ); - topPanel.attr( 'tabindex', '-1' ); - backBtn.attr( 'tabindex', '0' ); - backBtn.focus(); - panel._recalculateTopMargin(); - } else { - siblings.removeClass( 'open' ); - accordionSection.removeClass( 'current-panel' ); - overlay.removeClass( 'in-sub-panel' ); - content.delay( 180 ).hide( 0, function() { - content.css( 'margin-top', 'inherit' ); // Reset - if ( args.completeCallback ) { - args.completeCallback(); - } - } ); - topPanel.attr( 'tabindex', '0' ); - backBtn.attr( 'tabindex', '-1' ); - panelTitle.focus(); - container.scrollTop( 0 ); - } - }, + panel._animateChangeExpanded( function() { + topPanel.attr( 'tabindex', '-1' ); + backBtn.attr( 'tabindex', '0' ); - /** - * Recalculate the top margin. - * - * @since 4.4.0 - * @private - */ - _recalculateTopMargin: function() { - var panel = this, headerActionsHeight, content, accordionSection; - headerActionsHeight = $( '#customize-header-actions' ).height(); - accordionSection = panel.container.closest( '.accordion-section' ); - content = accordionSection.find( '.control-panel-content' ); - content.css( 'margin-top', ( parseInt( content.css( 'margin-top' ), 10 ) - ( content.offset().top - headerActionsHeight ) ) ); + backBtn.focus(); + accordionSection.css( 'top', '' ); + container.scrollTop( 0 ); + + if ( args.completeCallback ) { + args.completeCallback(); + } + } ); + + overlay.addClass( 'in-sub-panel' ); + accordionSection.addClass( 'current-panel' ); + + } else if ( ! expanded && accordionSection.hasClass( 'current-panel' ) ) { + panel._animateChangeExpanded( function() { + topPanel.attr( 'tabindex', '0' ); + backBtn.attr( 'tabindex', '-1' ); + + topPanel.focus(); + accordionSection.css( 'top', '' ); + + if ( args.completeCallback ) { + args.completeCallback(); + } + } ); + + overlay.removeClass( 'in-sub-panel' ); + accordionSection.removeClass( 'current-panel' ); + } }, /** @@ -1449,8 +1507,8 @@ } else { template = wp.template( 'customize-panel-default-content' ); } - if ( template && panel.container ) { - panel.container.find( '.accordion-sub-container' ).html( template( panel.params ) ); + if ( template && panel.headContainer ) { + panel.contentContainer.html( template( panel.params ) ); } } }); @@ -1626,7 +1684,7 @@ api.section( sectionId, function ( section ) { // Wait for the section to be ready/initialized section.deferred.embedded.done( function () { - parentContainer = section.container.find( 'ul:first' ); + parentContainer = ( section.contentContainer.is( 'ul' ) ) ? section.contentContainer : section.contentContainer.find( 'ul:first' ); if ( ! control.container.parent().is( parentContainer ) ) { parentContainer.append( control.container ); control.renderContent(); @@ -3542,7 +3600,7 @@ */ api.reflowPaneContents = _.bind( function () { - var appendContainer, activeElement, rootContainers, rootNodes = [], wasReflowed = false; + var appendContainer, activeElement, rootHeadContainers, rootNodes = [], wasReflowed = false; if ( document.activeElement ) { activeElement = $( document.activeElement ); @@ -3551,12 +3609,12 @@ // Sort the sections within each panel api.panel.each( function ( panel ) { var sections = panel.sections(), - sectionContainers = _.pluck( sections, 'container' ); + sectionHeadContainers = _.pluck( sections, 'headContainer' ); rootNodes.push( panel ); - appendContainer = panel.container.find( 'ul:first' ); - if ( ! api.utils.areElementListsEqual( sectionContainers, appendContainer.children( '[id]' ) ) ) { + appendContainer = ( panel.contentContainer.is( 'ul' ) ) ? panel.contentContainer : panel.contentContainer.find( 'ul:first' ); + if ( ! api.utils.areElementListsEqual( sectionHeadContainers, appendContainer.children( '[id]' ) ) ) { _( sections ).each( function ( section ) { - appendContainer.append( section.container ); + appendContainer.append( section.headContainer ); } ); wasReflowed = true; } @@ -3569,7 +3627,7 @@ if ( ! section.panel() ) { rootNodes.push( section ); } - appendContainer = section.container.find( 'ul:first' ); + appendContainer = ( section.contentContainer.is( 'ul' ) ) ? section.contentContainer : section.contentContainer.find( 'ul:first' ); if ( ! api.utils.areElementListsEqual( controlContainers, appendContainer.children( '[id]' ) ) ) { _( controls ).each( function ( control ) { appendContainer.append( control.container ); @@ -3580,11 +3638,11 @@ // Sort the root panels and sections rootNodes.sort( api.utils.prioritySort ); - rootContainers = _.pluck( rootNodes, 'container' ); - appendContainer = $( '#customize-theme-controls' ).children( 'ul' ); // @todo This should be defined elsewhere, and to be configurable - if ( ! api.utils.areElementListsEqual( rootContainers, appendContainer.children() ) ) { + rootHeadContainers = _.pluck( rootNodes, 'headContainer' ); + appendContainer = $( '#customize-theme-controls .customize-pane-parent' ); // @todo This should be defined elsewhere, and to be configurable + if ( ! api.utils.areElementListsEqual( rootHeadContainers, appendContainer.children() ) ) { _( rootNodes ).each( function ( rootNode ) { - appendContainer.append( rootNode.container ); + appendContainer.append( rootNode.headContainer ); } ); wasReflowed = true; } diff --git a/src/wp-admin/js/customize-nav-menus.js b/src/wp-admin/js/customize-nav-menus.js index 6731c34b67..9a3e2ffd6b 100644 --- a/src/wp-admin/js/customize-nav-menus.js +++ b/src/wp-admin/js/customize-nav-menus.js @@ -851,7 +851,7 @@ api.bind( 'pane-contents-reflowed', function() { // Skip menus that have been removed. - if ( ! section.container.parent().length ) { + if ( ! section.contentContainer.parent().length ) { return; } section.container.find( '.menu-item .menu-item-reorder-nav button' ).attr({ 'tabindex': '0', 'aria-hidden': 'false' }); @@ -969,7 +969,7 @@ var section = this; if ( expanded ) { - wpNavMenu.menuList = section.container.find( '.accordion-section-content:first' ); + wpNavMenu.menuList = section.contentContainer; wpNavMenu.targetList = wpNavMenu.menuList; // Add attributes needed by wpNavMenu @@ -1031,8 +1031,8 @@ onChangeExpanded: function( expanded ) { var section = this, button = section.container.find( '.add-menu-toggle' ), - content = section.container.find( '.new-menu-section-content' ), - customizer = section.container.closest( '.wp-full-overlay-sidebar-content' ); + content = section.contentContainer, + customizer = section.headContainer.closest( '.wp-full-overlay-sidebar-content' ); if ( expanded ) { button.addClass( 'open' ); button.attr( 'aria-expanded', 'true' ); @@ -1045,6 +1045,17 @@ content.slideUp( 'fast' ); content.find( '.menu-name-field' ).removeClass( 'invalid' ); } + }, + + /** + * Find the content element. + * + * @since 4.7.0 + * + * @returns {jQuery} Content UL element. + */ + getContent: function() { + return this.container.find( 'ul:first' ); } }); @@ -2001,6 +2012,7 @@ */ ready: function() { var control = this, + section = api.section( control.section() ), menuId = control.params.menu_id, menu = control.setting(), name, @@ -2017,7 +2029,7 @@ * being deactivated. */ control.active.validate = function() { - var value, section = api.section( control.section() ); + var value; if ( section ) { value = section.active(); } else { @@ -2026,7 +2038,7 @@ return value; }; - control.$controlSection = control.container.closest( '.control-section' ); + control.$controlSection = section.headContainer; control.$sectionContent = control.container.closest( '.accordion-section-content' ); this._setupModel(); @@ -2300,11 +2312,11 @@ return; } - var section = control.container.closest( '.accordion-section' ), + var section = api.section( control.section() ), menuId = control.params.menu_id, - controlTitle = section.find( '.accordion-section-title' ), - sectionTitle = section.find( '.customize-section-title h3' ), - location = section.find( '.menu-in-location' ), + controlTitle = section.headContainer.find( '.accordion-section-title' ), + sectionTitle = section.contentContainer.find( '.customize-section-title h3' ), + location = section.headContainer.find( '.menu-in-location' ), action = sectionTitle.find( '.customize-action' ), name = displayNavMenuName( menu.name ); @@ -2328,7 +2340,7 @@ } ); // Update the nav menu name in all location checkboxes. - section.find( '.customize-control-checkbox input' ).each( function() { + section.contentContainer.find( '.customize-control-checkbox input' ).each( function() { if ( $( this ).prop( 'checked' ) ) { $( '.current-menu-location-name-' + $( this ).data( 'location-id' ) ).text( name ); } @@ -2642,9 +2654,6 @@ // Focus on the new menu section. api.section( customizeId ).focus(); // @todo should we focus on the new menu's control and open the add-items panel? Thinking user flow... - - // Fix an issue with extra space at top immediately after creating new menu. - $( '#menu-to-edit' ).css( 'margin-top', 0 ); } }); diff --git a/tests/qunit/wp-admin/js/customize-controls.js b/tests/qunit/wp-admin/js/customize-controls.js index d806e4680e..e39b57150c 100644 --- a/tests/qunit/wp-admin/js/customize-controls.js +++ b/tests/qunit/wp-admin/js/customize-controls.js @@ -211,9 +211,14 @@ jQuery( window ).load( function (){ section = wp.customize.section( id ); ok( ! section.params.content ); ok( !! section.container ); - ok( section.container.is( '.control-section.control-section-default' ) ); - ok( 1 === section.container.find( '> .accordion-section-title' ).length ); - ok( 1 === section.container.find( '> .accordion-section-content' ).length ); + ok( !! section.headContainer ); + ok( !! section.contentContainer ); + ok( section.container.has( section.headContainer ) ); + ok( section.container.has( section.contentContainer ) ); + ok( section.headContainer.is( '.control-section.control-section-default' ) ); + ok( 1 === section.headContainer.find( '> .accordion-section-title' ).length ); + ok( section.contentContainer.is( '.accordion-section-content' ) ); + equal( section.headContainer.attr( 'aria-owns' ), section.contentContainer.attr( 'id' ) ); } ); module( 'Customizer Custom Type (titleless) Section with Template in Fixture' ); @@ -225,9 +230,14 @@ jQuery( window ).load( function (){ section = wp.customize.section( id ); ok( ! section.params.content ); ok( !! section.container ); + ok( !! section.headContainer ); + ok( !! section.contentContainer ); + ok( section.container.has( section.headContainer ) ); + ok( section.container.has( section.contentContainer ) ); ok( section.container.is( '.control-section.control-section-titleless' ) ); - ok( 0 === section.container.find( '> .accordion-section-title' ).length ); - ok( 1 === section.container.find( '> .accordion-section-content' ).length ); + ok( 0 === section.headContainer.find( '> .accordion-section-title' ).length ); + ok( section.contentContainer.is( '.accordion-section-content' ) ); + equal( section.headContainer.attr( 'aria-owns' ), section.contentContainer.attr( 'id' ) ); } ); module( 'Customizer Custom Type Section Lacking Specific Template' ); test( 'Fixture section has expected content', function () { @@ -235,9 +245,14 @@ jQuery( window ).load( function (){ section = wp.customize.section( id ); ok( ! section.params.content ); ok( !! section.container ); - ok( section.container.is( '.control-section.control-section-' + section.params.type ) ); - ok( 1 === section.container.find( '> .accordion-section-title' ).length ); - ok( 1 === section.container.find( '> .accordion-section-content' ).length ); + ok( !! section.headContainer ); + ok( !! section.contentContainer ); + ok( section.container.has( section.headContainer ) ); + ok( section.container.has( section.contentContainer ) ); + ok( section.headContainer.is( '.control-section.control-section-' + section.params.type ) ); + ok( 1 === section.headContainer.find( '> .accordion-section-title' ).length ); + ok( section.contentContainer.is( '.accordion-section-content' ) ); + equal( section.headContainer.attr( 'aria-owns' ), section.contentContainer.attr( 'id' ) ); } ); module( 'Customizer Section lacking any params' ); test( 'Fixture section has default params supplied', function () { @@ -270,6 +285,10 @@ jQuery( window ).load( function (){ var panel = wp.customize.panel( 'fixture-panel' ); ok( !! panel.params.content ); ok( !! panel.container ); + ok( !! panel.headContainer ); + ok( !! panel.contentContainer ); + ok( panel.container.has( panel.headContainer ) ); + ok( panel.container.has( panel.contentContainer ) ); } ); test( 'Fixture panel has section among its sections()', function () { var panel = wp.customize.panel( 'fixture-panel' ); @@ -304,9 +323,14 @@ jQuery( window ).load( function (){ panel = wp.customize.panel( id ); ok( ! panel.params.content ); ok( !! panel.container ); - ok( panel.container.is( '.control-panel.control-panel-default' ) ); - ok( 1 === panel.container.find( '> .accordion-section-title' ).length ); - ok( 1 === panel.container.find( '> .control-panel-content' ).length ); + ok( !! panel.headContainer ); + ok( !! panel.contentContainer ); + ok( panel.container.has( panel.headContainer ) ); + ok( panel.container.has( panel.contentContainer ) ); + ok( panel.headContainer.is( '.control-panel.control-panel-default' ) ); + ok( 1 === panel.headContainer.find( '> .accordion-section-title' ).length ); + ok( panel.contentContainer.is( '.control-panel-content' ) ); + equal( panel.headContainer.attr( 'aria-owns' ), panel.contentContainer.attr( 'id' ) ); } ); module( 'Customizer Custom Type Panel (titleless) with Template in Fixture' ); @@ -318,9 +342,14 @@ jQuery( window ).load( function (){ panel = wp.customize.panel( id ); ok( ! panel.params.content ); ok( !! panel.container ); - ok( panel.container.is( '.control-panel.control-panel-titleless' ) ); - ok( 0 === panel.container.find( '> .accordion-section-title' ).length ); - ok( 1 === panel.container.find( '> .control-panel-content' ).length ); + ok( !! panel.headContainer ); + ok( !! panel.contentContainer ); + ok( panel.container.has( panel.headContainer ) ); + ok( panel.container.has( panel.contentContainer ) ); + ok( panel.headContainer.is( '.control-panel.control-panel-titleless' ) ); + ok( 0 === panel.headContainer.find( '> .accordion-section-title' ).length ); + ok( panel.contentContainer.is( '.control-panel-content' ) ); + equal( panel.headContainer.attr( 'aria-owns' ), panel.contentContainer.attr( 'id' ) ); } ); module( 'Customizer Custom Type Panel Lacking Specific Template' ); @@ -329,9 +358,14 @@ jQuery( window ).load( function (){ panel = wp.customize.panel( id ); ok( ! panel.params.content ); ok( !! panel.container ); - ok( panel.container.is( '.control-panel.control-panel-' + panel.params.type ) ); - ok( 1 === panel.container.find( '> .accordion-section-title' ).length ); - ok( 1 === panel.container.find( '> .control-panel-content' ).length ); + ok( !! panel.headContainer ); + ok( !! panel.contentContainer ); + ok( panel.container.has( panel.headContainer ) ); + ok( panel.container.has( panel.contentContainer ) ); + ok( panel.headContainer.is( '.control-panel.control-panel-' + panel.params.type ) ); + ok( 1 === panel.headContainer.find( '> .accordion-section-title' ).length ); + ok( panel.contentContainer.is( '.control-panel-content' ) ); + equal( panel.headContainer.attr( 'aria-owns' ), panel.contentContainer.attr( 'id' ) ); } ); module( 'Customizer Panel lacking any params' ); test( 'Fixture panel has default params supplied', function () { diff --git a/tests/qunit/wp-admin/js/customize-widgets.js b/tests/qunit/wp-admin/js/customize-widgets.js index 225d155ce9..5f754a497a 100644 --- a/tests/qunit/wp-admin/js/customize-widgets.js +++ b/tests/qunit/wp-admin/js/customize-widgets.js @@ -58,12 +58,12 @@ jQuery( window ).load( function() { ok( panel.extended( api.Widgets.WidgetsPanel ) ); panel.deferred.embedded.done( function() { - ok( 1 === panel.container.find( '.no-widget-areas-rendered-notice' ).length ); - ok( panel.container.find( '.no-widget-areas-rendered-notice' ).is( ':visible' ) ); + ok( 1 === panel.contentContainer.find( '.no-widget-areas-rendered-notice' ).length ); + ok( panel.contentContainer.find( '.no-widget-areas-rendered-notice' ).is( ':visible' ) ); api.section( 'sidebar-widgets-sidebar-1' ).active( true ); api.control( 'sidebars_widgets[sidebar-1]' ).active( true ); api.trigger( 'pane-contents-reflowed' ); - ok( ! panel.container.find( '.no-widget-areas-rendered-notice' ).is( ':visible' ) ); + ok( ! panel.contentContainer.find( '.no-widget-areas-rendered-notice' ).is( ':visible' ) ); } ); expect( 4 );