WordPress.org

Make WordPress Core

Changeset 40395


Ignore:
Timestamp:
04/07/2017 07:26:31 PM (14 months ago)
Author:
westonruter
Message:

Customize: Auto-expand a widget area section when expanding the Widgets panel if there is only one registered sidebar and it is active.

Introduces WP_Customize_Panel::$auto_expand_sole_section property which allows panels to opt-in to the behavior, which the Widgets panel is made to do by default.

Props delawski, westonruter, melchoyce.
Fixes #37471.

Location:
trunk/src
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/customize-controls.css

    r40312 r40395  
    302302    -webkit-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);
    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 */
     304}
     305
     306#customize-theme-controls .customize-pane-child.skip-transition {
     307    -webkit-transition: none;
     308    transition: none;
    304309}
    305310
  • trunk/src/wp-admin/js/customize-controls.js

    r40380 r40395  
    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            }
     
    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' ) ) {
     
    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' );
     
    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                skipTransition;
    17261742
    17271743            if ( expanded && ! accordionSection.hasClass( 'current-panel' ) ) {
     
    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 
    1748                     if ( args.completeCallback ) {
    1749                         args.completeCallback();
    1750                     }
    1751                 } );
    1752 
    1753                 overlay.addClass( 'in-sub-panel' );
    1754                 accordionSection.addClass( 'current-panel' );
     1756                if ( panel.params.autoExpandSoleSection && 1 === childSections.length && childSections[0].active.get() ) {
     1757                    accordionSection.addClass( 'current-panel skip-transition' );
     1758                    overlay.addClass( 'in-sub-panel' );
     1759
     1760                    childSections[0].expand( {
     1761                        completeCallback: args.completeCallback
     1762                    } );
     1763                } else {
     1764                    panel._animateChangeExpanded( function() {
     1765                        topPanel.attr( 'tabindex', '-1' );
     1766                        backBtn.attr( 'tabindex', '0' );
     1767
     1768                        backBtn.focus();
     1769                        accordionSection.css( 'top', '' );
     1770                        container.scrollTop( 0 );
     1771
     1772                        if ( args.completeCallback ) {
     1773                            args.completeCallback();
     1774                        }
     1775                    } );
     1776
     1777                    accordionSection.addClass( 'current-panel' );
     1778                    overlay.addClass( 'in-sub-panel' );
     1779                }
     1780
    17551781                api.state( 'expandedPanel' ).set( panel );
    17561782
    17571783            } else if ( ! expanded && accordionSection.hasClass( 'current-panel' ) ) {
    1758                 panel._animateChangeExpanded( function() {
    1759                     topPanel.attr( 'tabindex', '0' );
    1760                     backBtn.attr( 'tabindex', '-1' );
    1761 
    1762                     topPanel.focus();
    1763                     accordionSection.css( 'top', '' );
    1764 
    1765                     if ( args.completeCallback ) {
    1766                         args.completeCallback();
    1767                     }
    1768                 } );
     1784                skipTransition = accordionSection.hasClass( 'skip-transition' );
     1785                if ( ! skipTransition ) {
     1786                    panel._animateChangeExpanded( function() {
     1787                        topPanel.attr( 'tabindex', '0' );
     1788                        backBtn.attr( 'tabindex', '-1' );
     1789
     1790                        topPanel.focus();
     1791                        accordionSection.css( 'top', '' );
     1792
     1793                        if ( args.completeCallback ) {
     1794                            args.completeCallback();
     1795                        }
     1796                    } );
     1797                } else {
     1798                    accordionSection.removeClass( 'skip-transition' );
     1799                }
    17691800
    17701801                overlay.removeClass( 'in-sub-panel' );
  • trunk/src/wp-includes/class-wp-customize-panel.php

    r38470 r40395  
    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     *
     
    220229        $array['active'] = $this->active();
    221230        $array['instanceNumber'] = $this->instance_number;
     231        $array['autoExpandSoleSection'] = $this->auto_expand_sole_section;
    222232        return $array;
    223233    }
  • trunk/src/wp-includes/class-wp-customize-widgets.php

    r40330 r40395  
    423423            'priority'        => 110,
    424424            'active_callback' => array( $this, 'is_panel_active' ),
     425            'auto_expand_sole_section' => true,
    425426        ) );
    426427
Note: See TracChangeset for help on using the changeset viewer.