From e896940a4ead501650a2c3991a5132ba4cdafd46 Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Fri, 7 Apr 2017 19:26:31 +0000 Subject: [PATCH] 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 | 5 ++ src/wp-admin/js/customize-controls.js | 81 +++++++++++++------ src/wp-includes/class-wp-customize-panel.php | 10 +++ .../class-wp-customize-widgets.php | 1 + 4 files changed, 72 insertions(+), 25 deletions(-) diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css index 039477a37c..fbcfe64101 100644 --- a/src/wp-admin/css/customize-controls.css +++ b/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; diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js index f30af33140..e038dcc8fa 100644 --- a/src/wp-admin/js/customize-controls.js +++ b/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() { - 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' ); diff --git a/src/wp-includes/class-wp-customize-panel.php b/src/wp-includes/class-wp-customize-panel.php index 46e604a9a6..87ae392e97 100644 --- a/src/wp-includes/class-wp-customize-panel.php +++ b/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; } diff --git a/src/wp-includes/class-wp-customize-widgets.php b/src/wp-includes/class-wp-customize-widgets.php index 2522ac8b0b..40590f0818 100644 --- a/src/wp-includes/class-wp-customize-widgets.php +++ b/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 ) {