Changeset 40395

Timestamp:

04/07/2017 07:26:31 PM (8 years 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:

• wp-admin/css/customize-controls.css (modified) (1 diff)
• wp-admin/js/customize-controls.js (modified) (5 diffs)
• wp-includes/class-wp-customize-panel.php (modified) (2 diffs)
• wp-includes/class-wp-customize-widgets.php (modified) (1 diff)

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

@@ -302 +302 @@
     -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);
     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;
 }
 

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

@@ -712 +712 @@
                 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' );
             }
@@ -997 +1005 @@
                 backBtn = content.find( '.customize-section-back' ),
                 sectionTitle = section.headContainer.find( '.accordion-section-title' ).first(),
-                expand;
+                expand, panel;
 
             if ( expanded && ! content.hasClass( 'open' ) ) {
@@ -1045 +1053 @@
 
             } 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' );
@@ -1723 +1737 @@
                 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' ) ) {
@@ -1738 +1754 @@
                 });
 
-                panel._animateChangeExpanded( function() {
-                    topPanel.attr( 'tabindex', '-1' );
-                    backBtn.attr( 'tabindex', '0' );
-
-                    backBtn.focus();
-                    accordionSection.css( 'top', '' );
-                    container.scrollTop( 0 );
-
-                    if ( args.completeCallback ) {
-                        args.completeCallback();
-                    }
-                } );
-
-                overlay.addClass( 'in-sub-panel' );
-                accordionSection.addClass( 'current-panel' );
+                if ( panel.params.autoExpandSoleSection && 1 === childSections.length && childSections[0].active.get() ) {
+                    accordionSection.addClass( 'current-panel skip-transition' );
+                    overlay.addClass( 'in-sub-panel' );
+
+                    childSections[0].expand( {
+                        completeCallback: args.completeCallback
+                    } );
+                } else {
+                    panel._animateChangeExpanded( function() {
+                        topPanel.attr( 'tabindex', '-1' );
+                        backBtn.attr( 'tabindex', '0' );
+
+                        backBtn.focus();
+                        accordionSection.css( 'top', '' );
+                        container.scrollTop( 0 );
+
+                        if ( args.completeCallback ) {
+                            args.completeCallback();
+                        }
+                    } );
+
+                    accordionSection.addClass( 'current-panel' );
+                    overlay.addClass( 'in-sub-panel' );
+                }
+
                 api.state( 'expandedPanel' ).set( panel );
 
             } else if ( ! expanded && accordionSection.hasClass( 'current-panel' ) ) {
-                panel._animateChangeExpanded( function() {
-                    topPanel.attr( 'tabindex', '0' );
-                    backBtn.attr( 'tabindex', '-1' );
-
-                    topPanel.focus();
-                    accordionSection.css( 'top', '' );
-
-                    if ( args.completeCallback ) {
-                        args.completeCallback();
-                    }
-                } );
+                skipTransition = accordionSection.hasClass( 'skip-transition' );
+                if ( ! skipTransition ) {
+                    panel._animateChangeExpanded( function() {
+                        topPanel.attr( 'tabindex', '0' );
+                        backBtn.attr( 'tabindex', '-1' );
+
+                        topPanel.focus();
+                        accordionSection.css( 'top', '' );
+
+                        if ( args.completeCallback ) {
+                            args.completeCallback();
+                        }
+                    } );
+                } else {
+                    accordionSection.removeClass( 'skip-transition' );
+                }
 
                 overlay.removeClass( 'in-sub-panel' );

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

@@ -105 +105 @@
 
     /**
+     * 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.
      *
@@ -220 +229 @@
         $array['active'] = $this->active();
         $array['instanceNumber'] = $this->instance_number;
+        $array['autoExpandSoleSection'] = $this->auto_expand_sole_section;
         return $array;
     }

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

@@ -423 +423 @@
             'priority'        => 110,
             'active_callback' => array( $this, 'is_panel_active' ),
+            'auto_expand_sole_section' => true,
         ) );