Make WordPress Core

Ticket #37471: 37471.1.diff

File 37471.1.diff, 6.7 KB (added by westonruter, 7 years ago)

https://github.com/xwp/wordpress-develop/pull/194/commits/a1ae2a6e9cfe40d17f11d2d2ffc9aa492518be3f

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

    diff --git src/wp-admin/css/customize-controls.css src/wp-admin/css/customize-controls.css
    index 039477a37c..fbcfe64101 100644
    body { 
    303303        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 */
    304304}
    305305
     306#customize-theme-controls .customize-pane-child.skip-transition {
     307        -webkit-transition: none;
     308        transition: none;
     309}
     310
    306311#customize-info,
    307312#customize-theme-controls .customize-pane-parent {
    308313        position: relative;
  • src/wp-admin/js/customize-controls.js

    diff --git src/wp-admin/js/customize-controls.js src/wp-admin/js/customize-controls.js
    index e8f19dd7c7..a8d5cf1661 100644
     
    711711                        var construct = this,
    712712                                content = construct.contentContainer,
    713713                                overlay = content.closest( '.wp-full-overlay' ),
    714                                 elements, transitionEndCallback;
     714                                elements, transitionEndCallback, transitionParentPane;
    715715
    716716                        // Determine set of elements that are affected by the animation.
    717717                        elements = overlay.add( content );
    718                         if ( _.isUndefined( construct.panel ) || '' === construct.panel() ) {
     718
     719                        if ( ! construct.panel || '' === construct.panel() ) {
     720                                transitionParentPane = true;
     721                        } else if ( api.panel( construct.panel() ).contentContainer.hasClass( 'skip-transition' ) ) {
     722                                transitionParentPane = true;
     723                        } else {
     724                                transitionParentPane = false;
     725                        }
     726                        if ( transitionParentPane ) {
    719727                                elements = elements.add( '#customize-info, .customize-pane-parent' );
    720728                        }
    721729
     
    9961004                                overlay = section.headContainer.closest( '.wp-full-overlay' ),
    9971005                                backBtn = content.find( '.customize-section-back' ),
    9981006                                sectionTitle = section.headContainer.find( '.accordion-section-title' ).first(),
    999                                 expand;
     1007                                expand, panel;
    10001008
    10011009                        if ( expanded && ! content.hasClass( 'open' ) ) {
    10021010
     
    10441052                                }
    10451053
    10461054                        } else if ( ! expanded && content.hasClass( 'open' ) ) {
     1055                                if ( section.panel() ) {
     1056                                        panel = api.panel( section.panel() );
     1057                                        if ( panel.contentContainer.hasClass( 'skip-transition' ) ) {
     1058                                                panel.collapse();
     1059                                        }
     1060                                }
    10471061                                section._animateChangeExpanded( function() {
    10481062                                        backBtn.attr( 'tabindex', '-1' );
    10491063                                        sectionTitle.attr( 'tabindex', '0' );
     
    16731687                 *
    16741688                 * @returns {Array}
    16751689                 */
    1676                 sections: function () {
     1690                sections: function ( args ) {
    16771691                        return this._children( 'panel', 'section' );
    16781692                },
    16791693
     
    17221736                                overlay = accordionSection.closest( '.wp-full-overlay' ),
    17231737                                container = accordionSection.closest( '.wp-full-overlay-sidebar-content' ),
    17241738                                topPanel = panel.headContainer.find( '.accordion-section-title' ),
    1725                                 backBtn = accordionSection.find( '.customize-panel-back' );
     1739                                backBtn = accordionSection.find( '.customize-panel-back' ),
     1740                                childSections = panel.sections(),
     1741                                changeExpandedCallback, skipTransition;
    17261742
    17271743                        if ( expanded && ! accordionSection.hasClass( 'current-panel' ) ) {
    17281744                                // Collapse any sibling sections/panels
     
    17371753                                        }
    17381754                                });
    17391755
    1740                                 panel._animateChangeExpanded( function() {
    1741                                         topPanel.attr( 'tabindex', '-1' );
    1742                                         backBtn.attr( 'tabindex', '0' );
    1743 
    1744                                         backBtn.focus();
    1745                                         accordionSection.css( 'top', '' );
    1746                                         container.scrollTop( 0 );
    1747 
     1756                                changeExpandedCallback = function() {
     1757                                        overlay.addClass( 'in-sub-panel' );
     1758                                        accordionSection.addClass( 'current-panel' );
    17481759                                        if ( args.completeCallback ) {
    17491760                                                args.completeCallback();
    17501761                                        }
    1751                                 } );
     1762                                };
     1763
     1764                                if ( panel.params.autoExpandSoleSection && 1 === childSections.length && childSections[0].active.get() ) {
     1765                                        accordionSection.addClass( 'skip-transition' );
     1766                                        childSections[0].expand( {
     1767                                                completeCallback: changeExpandedCallback
     1768                                        } );
     1769                                } else {
     1770                                        panel._animateChangeExpanded( function() {
     1771                                                topPanel.attr( 'tabindex', '-1' );
     1772                                                backBtn.attr( 'tabindex', '0' );
     1773
     1774                                                backBtn.focus();
     1775                                                accordionSection.css( 'top', '' );
     1776                                                container.scrollTop( 0 );
     1777
     1778                                                if ( args.completeCallback ) {
     1779                                                        args.completeCallback();
     1780                                                }
     1781                                        } );
     1782                                        changeExpandedCallback();
     1783                                }
    17521784
    1753                                 overlay.addClass( 'in-sub-panel' );
    1754                                 accordionSection.addClass( 'current-panel' );
    17551785                                api.state( 'expandedPanel' ).set( panel );
    17561786
    17571787                        } else if ( ! expanded && accordionSection.hasClass( 'current-panel' ) ) {
    1758                                 panel._animateChangeExpanded( function() {
    1759                                         topPanel.attr( 'tabindex', '0' );
    1760                                         backBtn.attr( 'tabindex', '-1' );
     1788                                skipTransition = accordionSection.hasClass( 'skip-transition' );
     1789                                if ( ! skipTransition ) {
     1790                                        panel._animateChangeExpanded( function() {
     1791                                                topPanel.attr( 'tabindex', '0' );
     1792                                                backBtn.attr( 'tabindex', '-1' );
    17611793
    1762                                         topPanel.focus();
    1763                                         accordionSection.css( 'top', '' );
     1794                                                topPanel.focus();
     1795                                                accordionSection.css( 'top', '' );
    17641796
    1765                                         if ( args.completeCallback ) {
    1766                                                 args.completeCallback();
    1767                                         }
    1768                                 } );
     1797                                                if ( args.completeCallback ) {
     1798                                                        args.completeCallback();
     1799                                                }
     1800                                        } );
     1801                                } else {
     1802                                        accordionSection.removeClass( 'skip-transition' );
     1803                                }
    17691804
    17701805                                overlay.removeClass( 'in-sub-panel' );
    17711806                                accordionSection.removeClass( 'current-panel' );
  • src/wp-includes/class-wp-customize-panel.php

    diff --git src/wp-includes/class-wp-customize-panel.php src/wp-includes/class-wp-customize-panel.php
    index 46e604a9a6..87ae392e97 100644
    class WP_Customize_Panel { 
    104104        public $description = '';
    105105
    106106        /**
     107         * Auto-expand a section in a panel when the panel is expanded when the panel only has the one section.
     108         *
     109         * @since 4.7.4
     110         * @access public
     111         * @var bool
     112         */
     113        public $auto_expand_sole_section = false;
     114
     115        /**
    107116         * Customizer sections for this panel.
    108117         *
    109118         * @since 4.0.0
    class WP_Customize_Panel { 
    219228                $array['content'] = $this->get_content();
    220229                $array['active'] = $this->active();
    221230                $array['instanceNumber'] = $this->instance_number;
     231                $array['autoExpandSoleSection'] = $this->auto_expand_sole_section;
    222232                return $array;
    223233        }
    224234
  • 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 2522ac8b0b..40590f0818 100644
    final class WP_Customize_Widgets { 
    422422                        'description'     => __( 'Widgets are independent sections of content that can be placed into widgetized areas provided by your theme (commonly called sidebars).' ),
    423423                        'priority'        => 110,
    424424                        'active_callback' => array( $this, 'is_panel_active' ),
     425                        'auto_expand_sole_section' => true,
    425426                ) );
    426427
    427428                foreach ( $sidebars_widgets as $sidebar_id => $sidebar_widget_ids ) {