WordPress.org

Make WordPress Core

Changeset 40402


Ignore:
Timestamp:
04/10/17 12:35:38 (4 months ago)
Author:
swissspidy
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.

Merges [40395] to the 4.7 branch.

Location:
branches/4.7
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • branches/4.7

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

    r39301 r40402  
    293293    -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); 
    294294    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 */ 
     295} 
     296 
     297#customize-theme-controls .customize-pane-child.skip-transition { 
     298    -webkit-transition: none; 
     299    transition: none; 
    295300} 
    296301 
  • branches/4.7/src/wp-admin/js/customize-controls.js

    r40383 r40402  
    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' ); 
  • branches/4.7/src/wp-includes/class-wp-customize-panel.php

    r38470 r40402  
    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    } 
  • branches/4.7/src/wp-includes/class-wp-customize-widgets.php

    r40095 r40402  
    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.