Changeset 40395

Timestamp:

04/07/2017 07:26:31 PM (9 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,
                 ) );