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.

Built from https://develop.svn.wordpress.org/trunk@40395


git-svn-id: http://core.svn.wordpress.org/trunk@40302 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Weston Ruter 2017-04-07 19:27:40 +00:00
parent 8473f9ef66
commit ad293eade7
9 changed files with 83 additions and 31 deletions

View File

@ -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;

File diff suppressed because one or more lines are too long

View File

@ -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;

File diff suppressed because one or more lines are too long

View File

@ -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,6 +1753,14 @@
}
});
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' );
@ -1750,11 +1774,15 @@
}
} );
overlay.addClass( 'in-sub-panel' );
accordionSection.addClass( 'current-panel' );
overlay.addClass( 'in-sub-panel' );
}
api.state( 'expandedPanel' ).set( panel );
} else if ( ! expanded && accordionSection.hasClass( 'current-panel' ) ) {
skipTransition = accordionSection.hasClass( 'skip-transition' );
if ( ! skipTransition ) {
panel._animateChangeExpanded( function() {
topPanel.attr( 'tabindex', '0' );
backBtn.attr( 'tabindex', '-1' );
@ -1766,6 +1794,9 @@
args.completeCallback();
}
} );
} else {
accordionSection.removeClass( 'skip-transition' );
}
overlay.removeClass( 'in-sub-panel' );
accordionSection.removeClass( 'current-panel' );

File diff suppressed because one or more lines are too long

View File

@ -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;
}

View File

@ -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 ) {

View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.8-alpha-40394';
$wp_version = '4.8-alpha-40395';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.