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.


git-svn-id: https://develop.svn.wordpress.org/trunk@40395 602fd350-edb4-49c9-b593-d223f7449a82

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

@@ -303,6 +303,11 @@ body {
 	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-theme-controls .customize-pane-child.skip-transition {
+	-webkit-transition: none;
+	transition: none;
+}
+
 #customize-info,
 #customize-theme-controls .customize-pane-parent {
 	position: relative;

src/wp-admin/js/customize-controls.js

@@ -711,11 +711,19 @@
 			var construct = this,
 				content = construct.contentContainer,
 				overlay = content.closest( '.wp-full-overlay' ),
-				elements, transitionEndCallback;
+				elements, transitionEndCallback, transitionParentPane;
 
 			// Determine set of elements that are affected by the animation.
 			elements = overlay.add( content );
-			if ( _.isUndefined( construct.panel ) || '' === construct.panel() ) {
+
+			if ( ! construct.panel || '' === construct.panel() ) {
+				transitionParentPane = true;
+			} else if ( api.panel( construct.panel() ).contentContainer.hasClass( 'skip-transition' ) ) {
+				transitionParentPane = true;
+			} else {
+				transitionParentPane = false;
+			}
+			if ( transitionParentPane ) {
 				elements = elements.add( '#customize-info, .customize-pane-parent' );
 			}
 
@@ -996,7 +1004,7 @@
 				overlay = section.headContainer.closest( '.wp-full-overlay' ),
 				backBtn = content.find( '.customize-section-back' ),
 				sectionTitle = section.headContainer.find( '.accordion-section-title' ).first(),
-				expand;
+				expand, panel;
 
 			if ( expanded && ! content.hasClass( 'open' ) ) {
 
@@ -1044,6 +1052,12 @@
 				}
 
 			} else if ( ! expanded && content.hasClass( 'open' ) ) {
+				if ( section.panel() ) {
+					panel = api.panel( section.panel() );
+					if ( panel.contentContainer.hasClass( 'skip-transition' ) ) {
+						panel.collapse();
+					}
+				}
 				section._animateChangeExpanded( function() {
 					backBtn.attr( 'tabindex', '-1' );
 					sectionTitle.attr( 'tabindex', '0' );
@@ -1722,7 +1736,9 @@
 				overlay = accordionSection.closest( '.wp-full-overlay' ),
 				container = accordionSection.closest( '.wp-full-overlay-sidebar-content' ),
 				topPanel = panel.headContainer.find( '.accordion-section-title' ),
-				backBtn = accordionSection.find( '.customize-panel-back' );
+				backBtn = accordionSection.find( '.customize-panel-back' ),
+				childSections = panel.sections(),
+				skipTransition;
 
 			if ( expanded && ! accordionSection.hasClass( 'current-panel' ) ) {
 				// Collapse any sibling sections/panels
@@ -1737,35 +1753,50 @@
 					}
 				});
 
-				panel._animateChangeExpanded( function() {
+				if ( panel.params.autoExpandSoleSection && 1 === childSections.length && childSections[0].active.get() ) {
-					topPanel.attr( 'tabindex', '-1' );
+					accordionSection.addClass( 'current-panel skip-transition' );
-					backBtn.attr( 'tabindex', '0' );
+					overlay.addClass( 'in-sub-panel' );
 
-					backBtn.focus();
+					childSections[0].expand( {
-					accordionSection.css( 'top', '' );
+						completeCallback: args.completeCallback
-					container.scrollTop( 0 );
+					} );
+				} else {
+					panel._animateChangeExpanded( function() {
+						topPanel.attr( 'tabindex', '-1' );
+						backBtn.attr( 'tabindex', '0' );
 
-					if ( args.completeCallback ) {
+						backBtn.focus();
-						args.completeCallback();
+						accordionSection.css( 'top', '' );
-					}
+						container.scrollTop( 0 );
-				} );
+
+						if ( args.completeCallback ) {
+							args.completeCallback();
+						}
+					} );
+
+					accordionSection.addClass( 'current-panel' );
+					overlay.addClass( 'in-sub-panel' );
+				}
 
-				overlay.addClass( 'in-sub-panel' );
-				accordionSection.addClass( 'current-panel' );
 				api.state( 'expandedPanel' ).set( panel );
 
 			} else if ( ! expanded && accordionSection.hasClass( 'current-panel' ) ) {
-				panel._animateChangeExpanded( function() {
+				skipTransition = accordionSection.hasClass( 'skip-transition' );
-					topPanel.attr( 'tabindex', '0' );
+				if ( ! skipTransition ) {
-					backBtn.attr( 'tabindex', '-1' );
+					panel._animateChangeExpanded( function() {
+						topPanel.attr( 'tabindex', '0' );
+						backBtn.attr( 'tabindex', '-1' );
 
-					topPanel.focus();
+						topPanel.focus();
-					accordionSection.css( 'top', '' );
+						accordionSection.css( 'top', '' );
 
-					if ( args.completeCallback ) {
+						if ( args.completeCallback ) {
-						args.completeCallback();
+							args.completeCallback();
-					}
+						}
-				} );
+					} );
+				} else {
+					accordionSection.removeClass( 'skip-transition' );
+				}
 
 				overlay.removeClass( 'in-sub-panel' );
 				accordionSection.removeClass( 'current-panel' );

src/wp-includes/class-wp-customize-panel.php

@@ -103,6 +103,15 @@ class WP_Customize_Panel {
 	 */
 	public $description = '';
 
+	/**
+	 * Auto-expand a section in a panel when the panel is expanded when the panel only has the one section.
+	 *
+	 * @since 4.7.4
+	 * @access public
+	 * @var bool
+	 */
+	public $auto_expand_sole_section = false;
+
 	/**
 	 * Customizer sections for this panel.
 	 *
@@ -219,6 +228,7 @@ class WP_Customize_Panel {
 		$array['content'] = $this->get_content();
 		$array['active'] = $this->active();
 		$array['instanceNumber'] = $this->instance_number;
+		$array['autoExpandSoleSection'] = $this->auto_expand_sole_section;
 		return $array;
 	}
 

src/wp-includes/class-wp-customize-widgets.php

@@ -422,6 +422,7 @@ final class WP_Customize_Widgets {
 			'description'     => __( 'Widgets are independent sections of content that can be placed into widgetized areas provided by your theme (commonly called sidebars).' ),
 			'priority'        => 110,
 			'active_callback' => array( $this, 'is_panel_active' ),
+			'auto_expand_sole_section' => true,
 		) );
 
 		foreach ( $sidebars_widgets as $sidebar_id => $sidebar_widget_ids ) {