WordPress.org

Make WordPress Core

Ticket #33052: 33052.4.diff

File 33052.4.diff, 17.0 KB (added by westonruter, 4 years ago)

Additional change: https://github.com/xwp/wordpress-develop/commit/b1fc48b6408cd451cc9ad49e498efb4228ee6594

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

    diff --git src/wp-admin/css/customize-controls.css src/wp-admin/css/customize-controls.css
    index b35bc3b..6b9d910 100644
    body { 
    123123        color: #0073aa;
    124124}
    125125
    126 #customize-controls .customize-info .customize-panel-description {
     126#customize-controls .customize-info .customize-panel-description,
     127#customize-controls .no-widget-areas-rendered-notice {
    127128        color: #555;
    128129        display: none;
    129130        background: #fff;
    130131        padding: 12px 15px;
    131132        border-top: 1px solid #ddd;
    132133}
     134#customize-controls .customize-info .customize-panel-description.open + .no-widget-areas-rendered-notice {
     135        border-top: none;
     136}
    133137
    134138#customize-controls .customize-info .customize-panel-description p:first-child {
    135139        margin-top: 0;
  • src/wp-admin/js/customize-controls.js

    diff --git src/wp-admin/js/customize-controls.js src/wp-admin/js/customize-controls.js
    index e0e4a4d..79672a5 100644
     
    300300                 * @param {Object}  args.completeCallback
    301301                 */
    302302                onChangeActive: function( active, args ) {
    303                         var duration, construct = this;
     303                        var duration, construct = this, expandedOtherPanel;
    304304                        if ( args.unchanged ) {
    305305                                if ( args.completeCallback ) {
    306306                                        args.completeCallback();
     
    309309                        }
    310310
    311311                        duration = ( 'resolved' === api.previewer.deferred.active.state() ? args.duration : 0 );
     312
     313                        // If this is a panel, and it is not currently expanded but another panel is expanded, do not animate.
     314                        if ( construct.extended( api.Panel ) ) {
     315                                api.panel.each(function ( panel ) {
     316                                        if ( panel !== construct && panel.expanded() ) {
     317                                                expandedOtherPanel = panel;
     318                                                duration = 0;
     319                                        }
     320                                });
     321                        }
     322
    312323                        if ( ! $.contains( document, construct.container[0] ) ) {
    313324                                // jQuery.fn.slideUp is not hiding an element if it is not in the DOM
    314325                                construct.container.toggle( active );
     
    329340                                        construct.container.stop( true, true ).slideUp( duration, args.completeCallback );
    330341                                }
    331342                        }
     343
     344                        // Recalculate the margin-top immediately, not waiting for debounced reflow, to prevent momentary (100ms) vertical jiggle.
     345                        if ( expandedOtherPanel ) {
     346                                expandedOtherPanel._recalculateTopMargin();
     347                        }
    332348                },
    333349
    334350                /**
     
    378394                },
    379395
    380396                /**
    381                  * @param {Boolean} expanded
    382                  * @param {Object} [params]
    383                  * @returns {Boolean} false if state already applied
     397                 * Handle the toggle logic for expand/collapse.
     398                 *
     399                 * @param {Boolean}  expanded - The new state to apply.
     400                 * @param {Object}   [params] - Object containing options for expand/collapse.
     401                 * @param {Function} [params.completeCallback] - Function to call when expansion/collapse is complete.
     402                 * @returns {Boolean} false if state already applied or active state is false
    384403                 */
    385                 _toggleExpanded: function ( expanded, params ) {
    386                         var self = this;
     404                _toggleExpanded: function( expanded, params ) {
     405                        var instance = this, previousCompleteCallback;
    387406                        params = params || {};
    388                         var section = this, previousCompleteCallback = params.completeCallback;
    389                         params.completeCallback = function () {
     407                        previousCompleteCallback = params.completeCallback;
     408
     409                        // Short-circuit expand() if the instance is not active.
     410                        if ( expanded && ! instance.active() ) {
     411                                return false;
     412                        }
     413
     414                        params.completeCallback = function() {
    390415                                if ( previousCompleteCallback ) {
    391                                         previousCompleteCallback.apply( section, arguments );
     416                                        previousCompleteCallback.apply( instance, arguments );
    392417                                }
    393418                                if ( expanded ) {
    394                                         section.container.trigger( 'expanded' );
     419                                        instance.container.trigger( 'expanded' );
    395420                                } else {
    396                                         section.container.trigger( 'collapsed' );
     421                                        instance.container.trigger( 'collapsed' );
    397422                                }
    398423                        };
    399                         if ( ( expanded && this.expanded.get() ) || ( ! expanded && ! this.expanded.get() ) ) {
     424                        if ( ( expanded && instance.expanded.get() ) || ( ! expanded && ! instance.expanded.get() ) ) {
    400425                                params.unchanged = true;
    401                                 self.onChangeExpanded( self.expanded.get(), params );
     426                                instance.onChangeExpanded( instance.expanded.get(), params );
    402427                                return false;
    403428                        } else {
    404429                                params.unchanged = false;
    405                                 this.expandedArgumentsQueue.push( params );
    406                                 this.expanded.set( expanded );
     430                                instance.expandedArgumentsQueue.push( params );
     431                                instance.expanded.set( expanded );
    407432                                return true;
    408433                        }
    409434                },
    410435
    411436                /**
    412437                 * @param {Object} [params]
    413                  * @returns {Boolean} false if already expanded
     438                 * @returns {Boolean} false if already expanded or if inactive.
    414439                 */
    415440                expand: function ( params ) {
    416441                        return this._toggleExpanded( true, params );
     
    418443
    419444                /**
    420445                 * @param {Object} [params]
    421                  * @returns {Boolean} false if already collapsed
     446                 * @returns {Boolean} false if already collapsed.
    422447                 */
    423448                collapse: function ( params ) {
    424449                        return this._toggleExpanded( false, params );
     
    539564                        };
    540565                        section.panel.bind( inject );
    541566                        inject( section.panel.get() ); // Since a section may never get a panel, assume that it won't ever get one
     567
     568                        section.deferred.embedded.done(function() {
     569                                // Fix the top margin after reflow.
     570                                api.bind( 'pane-contents-reflowed', _.debounce( function() {
     571                                        section._recalculateTopMargin();
     572                                }, 100 ) );
     573                        });
    542574                },
    543575
    544576                /**
     
    646678                                                // Fix the height after browser resize.
    647679                                                $( window ).on( 'resize.customizer-section', _.debounce( resizeContentHeight, 100 ) );
    648680
    649                                                 // Fix the top margin after reflow.
    650                                                 api.bind( 'pane-contents-reflowed', _.debounce( function() {
    651                                                         var offset = ( content.offset().top - headerActionsHeight );
    652                                                         if ( 0 < offset ) {
    653                                                                 content.css( 'margin-top', ( parseInt( content.css( 'margin-top' ), 10 ) - offset ) );
    654                                                         }
    655                                                 }, 100 ) );
     681                                                section._recalculateTopMargin();
    656682                                        };
    657683                                }
    658684
     
    693719                                        args.completeCallback();
    694720                                }
    695721                        }
     722                },
     723
     724                /**
     725                 * Recalculate the top margin.
     726                 *
     727                 * @since 4.4.0
     728                 * @private
     729                 */
     730                _recalculateTopMargin: function() {
     731                        var section = this, content, offset, headerActionsHeight;
     732                        content = section.container.find( '.accordion-section-content' );
     733                        if ( 0 === content.length ) {
     734                                return;
     735                        }
     736                        headerActionsHeight = $( '#customize-header-actions' ).height();
     737                        offset = ( content.offset().top - headerActionsHeight );
     738                        if ( 0 < offset ) {
     739                                content.css( 'margin-top', ( parseInt( content.css( 'margin-top' ), 10 ) - offset ) );
     740                        }
    696741                }
    697742        });
    698743
     
    11551200                                parentContainer.append( panel.container );
    11561201                                panel.renderContent();
    11571202                        }
     1203
     1204                        api.bind( 'pane-contents-reflowed', _.debounce( function() {
     1205                                panel._recalculateTopMargin();
     1206                        }, 100 ) );
     1207
    11581208                        panel.deferred.embedded.resolve();
    11591209                },
    11601210
     
    12531303                 * @param {Boolean}  expanded
    12541304                 * @param {Object}   args
    12551305                 * @param {Boolean}  args.unchanged
    1256                  * @param {Callback} args.completeCallback
     1306                 * @param {Function} args.completeCallback
    12571307                 */
    12581308                onChangeExpanded: function ( expanded, args ) {
    12591309
     
    12681318                        // Note: there is a second argument 'args' passed
    12691319                        var position, scroll,
    12701320                                panel = this,
    1271                                 section = panel.container.closest( '.accordion-section' ), // This is actually the panel.
    1272                                 overlay = section.closest( '.wp-full-overlay' ),
    1273                                 container = section.closest( '.wp-full-overlay-sidebar-content' ),
     1321                                accordionSection = panel.container.closest( '.accordion-section' ),
     1322                                overlay = accordionSection.closest( '.wp-full-overlay' ),
     1323                                container = accordionSection.closest( '.wp-full-overlay-sidebar-content' ),
    12741324                                siblings = container.find( '.open' ),
    12751325                                topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ),
    1276                                 backBtn = section.find( '.customize-panel-back' ),
    1277                                 panelTitle = section.find( '.accordion-section-title' ).first(),
    1278                                 content = section.find( '.control-panel-content' ),
     1326                                backBtn = accordionSection.find( '.customize-panel-back' ),
     1327                                panelTitle = accordionSection.find( '.accordion-section-title' ).first(),
     1328                                content = accordionSection.find( '.control-panel-content' ),
    12791329                                headerActionsHeight = $( '#customize-header-actions' ).height();
    12801330
    12811331                        if ( expanded ) {
     
    12971347                                        position = content.offset().top;
    12981348                                        scroll = container.scrollTop();
    12991349                                        content.css( 'margin-top', ( headerActionsHeight - position - scroll ) );
    1300                                         section.addClass( 'current-panel' );
     1350                                        accordionSection.addClass( 'current-panel' );
    13011351                                        overlay.addClass( 'in-sub-panel' );
    13021352                                        container.scrollTop( 0 );
    13031353                                        if ( args.completeCallback ) {
     
    13071357                                topPanel.attr( 'tabindex', '-1' );
    13081358                                backBtn.attr( 'tabindex', '0' );
    13091359                                backBtn.focus();
    1310 
    1311                                 // Fix the top margin after reflow.
    1312                                 api.bind( 'pane-contents-reflowed', _.debounce( function() {
    1313                                         content.css( 'margin-top', ( parseInt( content.css( 'margin-top' ), 10 ) - ( content.offset().top - headerActionsHeight ) ) );
    1314                                 }, 100 ) );
     1360                                panel._recalculateTopMargin();
    13151361                        } else {
    13161362                                siblings.removeClass( 'open' );
    1317                                 section.removeClass( 'current-panel' );
     1363                                accordionSection.removeClass( 'current-panel' );
    13181364                                overlay.removeClass( 'in-sub-panel' );
    13191365                                content.delay( 180 ).hide( 0, function() {
    13201366                                        content.css( 'margin-top', 'inherit' ); // Reset
     
    13301376                },
    13311377
    13321378                /**
     1379                 * Recalculate the top margin.
     1380                 *
     1381                 * @since 4.4.0
     1382                 * @private
     1383                 */
     1384                _recalculateTopMargin: function() {
     1385                        var panel = this, headerActionsHeight, content, accordionSection;
     1386                        headerActionsHeight = $( '#customize-header-actions' ).height();
     1387                        accordionSection = panel.container.closest( '.accordion-section' );
     1388                        content = accordionSection.find( '.control-panel-content' );
     1389                        content.css( 'margin-top', ( parseInt( content.css( 'margin-top' ), 10 ) - ( content.offset().top - headerActionsHeight ) ) );
     1390                },
     1391
     1392                /**
    13331393                 * Render the panel from its JS template, if it exists.
    13341394                 *
    13351395                 * The panel's container must already exist in the DOM.
  • src/wp-admin/js/customize-widgets.js

    diff --git src/wp-admin/js/customize-widgets.js src/wp-admin/js/customize-widgets.js
    index bd25757..144365e 100644
     
    15061506        } );
    15071507
    15081508        /**
     1509         * wp.customize.Widgets.WidgetsPanel
     1510         *
     1511         * Customizer panel containing the widget area sections.
     1512         *
     1513         * @since 4.4.0
     1514         */
     1515        api.Widgets.WidgetsPanel = api.Panel.extend({
     1516
     1517                /**
     1518                 * Add and manage the display of the no-rendered-areas notice.
     1519                 *
     1520                 * @since 4.4.0
     1521                 */
     1522                ready: function () {
     1523                        var panel = this;
     1524
     1525                        api.Panel.prototype.ready.call( panel );
     1526
     1527                        panel.deferred.embedded.done(function() {
     1528                                var panelMetaContainer, noRenderedAreasNotice, shouldShowNotice;
     1529                                panelMetaContainer = panel.container.find( '.panel-meta' );
     1530                                noRenderedAreasNotice = $( '<div></div>', {
     1531                                        'class': 'no-widget-areas-rendered-notice'
     1532                                });
     1533                                noRenderedAreasNotice.append( $( '<em></em>', {
     1534                                        text: l10n.noAreasRendered
     1535                                } ) );
     1536                                panelMetaContainer.append( noRenderedAreasNotice );
     1537
     1538                                shouldShowNotice = function() {
     1539                                        return ( 0 === _.filter( panel.sections(), function( section ) {
     1540                                                return section.active();
     1541                                        } ).length );
     1542                                };
     1543
     1544                                /*
     1545                                 * Defer setting visibility of no-rendered-areas-notice until
     1546                                 * preview finishes loading since this is when the active
     1547                                 * sections become available.
     1548                                 */
     1549                                api.previewer.deferred.active.done( function () {
     1550                                        noRenderedAreasNotice.toggle( shouldShowNotice() );
     1551
     1552                                        // Update the visibility of the notice whenever a reflow happens.
     1553                                        api.bind( 'pane-contents-reflowed', function() {
     1554                                                api.previewer.deferred.active.done( function () {
     1555                                                        if ( shouldShowNotice() ) {
     1556                                                                noRenderedAreasNotice.slideDown( 'fast' );
     1557                                                        } else {
     1558                                                                noRenderedAreasNotice.slideUp( 'fast' );
     1559                                                        }
     1560                                                });
     1561                                        });
     1562                                });
     1563                        });
     1564                },
     1565
     1566                /**
     1567                 * Allow an active widgets panel to be contextually active even when it has no active sections (widget areas).
     1568                 *
     1569                 * This ensures that the widgets panel appears even when there are no
     1570                 * sidebars displayed on the URL currently being previewed.
     1571                 *
     1572                 * @since 4.4.0
     1573                 *
     1574                 * @returns {boolean}
     1575                 */
     1576                isContextuallyActive: function() {
     1577                        var panel = this;
     1578                        return panel.active();
     1579                }
     1580        });
     1581
     1582        /**
    15091583         * wp.customize.Widgets.SidebarSection
    15101584         *
    15111585         * Customizer section representing a widget area widget
     
    19682042                }
    19692043        } );
    19702044
    1971         // Register models for custom section and control types
     2045        // Register models for custom panel, section, and control types
     2046        $.extend( api.panelConstructor, {
     2047                widgets: api.Widgets.WidgetsPanel
     2048        });
    19722049        $.extend( api.sectionConstructor, {
    19732050                sidebar: api.Widgets.SidebarSection
    19742051        });
  • src/wp-includes/class-wp-customize-widgets.php

    diff --git src/wp-includes/class-wp-customize-widgets.php src/wp-includes/class-wp-customize-widgets.php
    index 7b73dc2..c1a8e5e 100644
    final class WP_Customize_Widgets { 
    355355                }
    356356
    357357                $this->manager->add_panel( 'widgets', array(
    358                         'title'       => __( 'Widgets' ),
    359                         'description' => __( 'Widgets are independent sections of content that can be placed into widgetized areas provided by your theme (commonly called sidebars).' ),
    360                         'priority'    => 110,
     358                        'type'            => 'widgets',
     359                        'title'           => __( 'Widgets' ),
     360                        'description'     => __( 'Widgets are independent sections of content that can be placed into widgetized areas provided by your theme (commonly called sidebars).' ),
     361                        'priority'        => 110,
     362                        'active_callback' => array( $this, 'is_panel_active' ),
    361363                ) );
    362364
    363365                foreach ( $sidebars_widgets as $sidebar_id => $sidebar_widget_ids ) {
    final class WP_Customize_Widgets { 
    455457        }
    456458
    457459        /**
     460         * Return whether the widgets panel is active, based on whether there are sidebars registered.
     461         *
     462         * @since 4.4.0
     463         * @access public
     464         *
     465         * @see WP_Customize_Panel::$active_callback
     466         *
     467         * @global array $wp_registered_sidebars
     468         * @return bool Active.
     469         */
     470        public function is_panel_active() {
     471                global $wp_registered_sidebars;
     472                return ! empty( $wp_registered_sidebars );
     473        }
     474
     475        /**
    458476         * Covert a widget_id into its corresponding Customizer setting ID (option name).
    459477         *
    460478         * @since 3.9.0
    final class WP_Customize_Widgets { 
    655673                                'error'            => __( 'An error has occurred. Please reload the page and try again.' ),
    656674                                'widgetMovedUp'    => __( 'Widget moved up' ),
    657675                                'widgetMovedDown'  => __( 'Widget moved down' ),
     676                                'noAreasRendered'  => __( 'There are no widget areas currently rendered in the preview. Navigate in the preview to a template that makes use of a widget area in order to access its widgets here.' ),
    658677                        ),
    659678                        'tpl' => array(
    660679                                'widgetReorderNav' => $widget_reorder_nav_tpl,
  • tests/qunit/wp-admin/js/customize-controls.js

    diff --git tests/qunit/wp-admin/js/customize-controls.js tests/qunit/wp-admin/js/customize-controls.js
    index 6ca4908..91a7d36 100644
    jQuery( window ).load( function (){ 
    393393        panelId = 'mockPanelId';
    394394        panelTitle = 'Mock Panel Title';
    395395        panelDescription = 'Mock panel description';
    396         panelContent = '<li id="accordion-panel-widgets" class="control-section control-panel accordion-section">';
     396        panelContent = '<li id="accordion-panel-mockPanelId" class="accordion-section control-section control-panel control-panel-default"> <h3 class="accordion-section-title" tabindex="0"> Fixture Panel <span class="screen-reader-text">Press return or enter to open this panel</span> </h3> <ul class="accordion-sub-container control-panel-content"> <li class="panel-meta customize-info accordion-section cannot-expand"> <button class="customize-panel-back" tabindex="-1"><span class="screen-reader-text">Back</span></button> <div class="accordion-section-title"> <span class="preview-notice">You are customizing <strong class="panel-title">Fixture Panel</strong></span> <button class="customize-help-toggle dashicons dashicons-editor-help" tabindex="0" aria-expanded="false"><span class="screen-reader-text">Help</span></button> </div> </li> </ul> </li>';
    397397        panelData = {
    398398                content: panelContent,
    399399                title: panelTitle,
  • tests/qunit/wp-admin/js/customize-widgets.js

    diff --git tests/qunit/wp-admin/js/customize-widgets.js tests/qunit/wp-admin/js/customize-widgets.js
    index 3a8a3e3..f5c99e3 100644
    jQuery( window ).load( function() { 
    3434                ok( ! section.expanded() );
    3535                ok( 0 === control.container.find( '> .widget' ).length );
    3636
     37                // Preview sets the active state.
     38                section.active.set( true );
     39                control.active.set( true );
     40                api.control( 'sidebars_widgets[sidebar-1]' ).active.set( true );
     41
    3742                section.expand();
    38                 ok( ! widgetAddedEvent );
    39                 ok( 1 === control.container.find( '> .widget' ).length );
     43                ok( ! widgetAddedEvent, 'expected widget added event not fired' );
     44                ok( 1 === control.container.find( '> .widget' ).length, 'expected there to be one .widget element in the container' );
    4045                ok( 0 === control.container.find( '.widget-content' ).children().length );
    4146
    4247                control.expand();