Ticket #37471: 37471.3.diff

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

@@ -303 +303 @@
         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 +711 @@
                         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 +1004 @@
                                 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 +1052 @@
                                 }
 
                         } 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 +1736 @@
                                 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 +1753 @@
                                         }
                                 });
 
-                                panel._animateChangeExpanded( function() {
-                                        topPanel.attr( 'tabindex', '-1' );
-                                        backBtn.attr( 'tabindex', '0' );
+                                if ( panel.params.autoExpandSoleSection && 1 === childSections.length && childSections[0].active.get() ) {
+                                        accordionSection.addClass( 'current-panel skip-transition' );
+                                        overlay.addClass( 'in-sub-panel' );
 
-                                        backBtn.focus();
-                                        accordionSection.css( 'top', '' );
-                                        container.scrollTop( 0 );
+                                        childSections[0].expand( {
+                                                completeCallback: args.completeCallback
+                                        } );
+                                } else {
+                                        panel._animateChangeExpanded( function() {
+                                                topPanel.attr( 'tabindex', '-1' );
+                                                backBtn.attr( 'tabindex', '0' );
 
-                                        if ( args.completeCallback ) {
-                                                args.completeCallback();
-                                        }
-                                } );
+                                                backBtn.focus();
+                                                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() {
-                                        topPanel.attr( 'tabindex', '0' );
-                                        backBtn.attr( 'tabindex', '-1' );
+                                skipTransition = accordionSection.hasClass( 'skip-transition' );
+                                if ( ! skipTransition ) {
+                                        panel._animateChangeExpanded( function() {
+                                                topPanel.attr( 'tabindex', '0' );
+                                                backBtn.attr( 'tabindex', '-1' );
 
-                                        topPanel.focus();
-                                        accordionSection.css( 'top', '' );
+                                                topPanel.focus();
+                                                accordionSection.css( 'top', '' );
 
-                                        if ( args.completeCallback ) {
-                                                args.completeCallback();
-                                        }
-                                } );
+                                                if ( 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

@@ -104 +104 @@
         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.
          *
          * @since 4.0.0
@@ -219 +228 @@
                 $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

@@ -416 +416 @@
                         $this->manager->add_setting( $setting_id, $setting_args );
                 }
 
+                $panel_help_text = __( 'Widgets are independent sections of content that can be placed into widgetized areas provided by your theme (commonly called sidebars).' );
                 $this->manager->add_panel( 'widgets', array(
                         'type'            => 'widgets',
                         'title'           => __( 'Widgets' ),
-                        'description'     => __( 'Widgets are independent sections of content that can be placed into widgetized areas provided by your theme (commonly called sidebars).' ),
+                        'description'     => $panel_help_text,
                         'priority'        => 110,
                         'active_callback' => array( $this, 'is_panel_active' ),
+                        'auto_expand_sole_section' => true,
                 ) );
 
                 foreach ( $sidebars_widgets as $sidebar_id => $sidebar_widget_ids ) {
@@ -451 +453 @@
 
                                         $section_args = array(
                                                 'title' => $wp_registered_sidebars[ $sidebar_id ]['name'],
-                                                'description' => $wp_registered_sidebars[ $sidebar_id ]['description'],
+                                                'description' => sprintf( '<p>%s</p><p>%s</p>', $panel_help_text, $wp_registered_sidebars[ $sidebar_id ]['description'] ),
+                                                'description_hidden' => true,
                                                 'priority' => array_search( $sidebar_id, array_keys( $wp_registered_sidebars ) ),
                                                 'panel' => 'widgets',
                                                 'sidebar_id' => $sidebar_id,