Customizer: Introduce a "panel" API to organize multiple sections into a one section.

Create a panel via `$GLOBALS['wp_customize']->add_panel( $panel_id, $args )` and use `$panel_id` for the `panel` argument in `$GLOBALS['wp_customize']->add_section( $section_id, $args )`. That's it.
As an example all widget area sections are now summarized into one panel. Feedback appreciated.

props celloexpressions.
see #27406.
Built from https://develop.svn.wordpress.org/trunk@28861


git-svn-id: http://core.svn.wordpress.org/trunk@28662 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Dominik Schilling
2014-06-26 20:17:15 +00:00
parent a21d9cdacf
commit b7c93eb3d0
39 changed files with 591 additions and 44 deletions

View File

@@ -45,6 +45,7 @@ final class WP_Customize_Manager {
public $widgets;
protected $settings = array();
protected $panels = array();
protected $sections = array();
protected $controls = array();
@@ -314,6 +315,17 @@ final class WP_Customize_Manager {
return $this->sections;
}
/**
* Get the registered panels.
*
* @since 4.0.0
*
* @return array
*/
public function panels() {
return $this->panels;
}
/**
* Checks if the current theme is active.
*
@@ -647,6 +659,50 @@ final class WP_Customize_Manager {
unset( $this->settings[ $id ] );
}
/**
* Add a customize panel.
*
* @since 4.0.0
*
* @param WP_Customize_Panel|string $id Customize Panel object, or Panel ID.
* @param array $args Panel arguments.
*/
public function add_panel( $id, $args = array() ) {
if ( is_a( $id, 'WP_Customize_Panel' ) ) {
$panel = $id;
}
else {
$panel = new WP_Customize_Panel( $this, $id, $args );
}
$this->panels[ $panel->id ] = $panel;
}
/**
* Retrieve a customize panel.
*
* @since 4.0.0
*
* @param string $id Panel ID.
* @return WP_Customize_Panel
*/
public function get_panel( $id ) {
if ( isset( $this->panels[ $id ] ) ) {
return $this->panels[ $id ];
}
}
/**
* Remove a customize panel.
*
* @since 4.0.0
*
* @param string $id Panel ID.
*/
public function remove_panel( $id ) {
unset( $this->panels[ $id ] );
}
/**
* Add a customize section.
*
@@ -749,7 +805,7 @@ final class WP_Customize_Manager {
}
/**
* Prepare settings and sections.
* Prepare panels, sections, and controls.
*
* For each, check if required related components exist,
* whether the user has the necessary capabilities,
@@ -763,8 +819,9 @@ final class WP_Customize_Manager {
$controls = array();
foreach ( $this->controls as $id => $control ) {
if ( ! isset( $this->sections[ $control->section ] ) || ! $control->check_capabilities() )
if ( ! isset( $this->sections[ $control->section ] ) || ! $control->check_capabilities() ) {
continue;
}
$this->sections[ $control->section ]->controls[] = $control;
$controls[ $id ] = $control;
@@ -778,13 +835,39 @@ final class WP_Customize_Manager {
$sections = array();
foreach ( $this->sections as $section ) {
if ( ! $section->check_capabilities() || ! $section->controls )
if ( ! $section->check_capabilities() || ! $section->controls ) {
continue;
}
usort( $section->controls, array( $this, '_cmp_priority' ) );
$sections[] = $section;
if ( ! $section->panel ) {
// Top-level section.
$sections[] = $section;
} else {
// This section belongs to a panel.
if ( isset( $this->panels [ $section->panel ] ) ) {
$this->panels[ $section->panel ]->sections[] = $section;
}
}
}
$this->sections = $sections;
// Prepare panels.
// Reversing makes uasort sort by time added when conflicts occur.
$this->panels = array_reverse( $this->panels );
uasort( $this->panels, array( $this, '_cmp_priority' ) );
$panels = array();
foreach ( $this->panels as $panel ) {
if ( ! $panel->check_capabilities() || ! $panel->sections ) {
continue;
}
usort( $panel->sections, array( $this, '_cmp_priority' ) );
$panels[] = $panel;
}
$this->panels = $panels;
}
/**

View File

@@ -37,6 +37,15 @@ class WP_Customize_Section {
*/
public $priority = 10;
/**
* Panel in which to show the section, making it a sub-section.
*
* @since 4.0.0
* @access public
* @var string
*/
public $panel = '';
/**
* Capability required for the section.
*
@@ -162,8 +171,12 @@ class WP_Customize_Section {
* @since 3.4.0
*/
protected function render() {
$classes = 'control-section accordion-section';
if ( $this->panel ) {
$classes .= ' control-subsection';
}
?>
<li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="control-section accordion-section">
<li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="<?php echo esc_attr( $classes ); ?>">
<h3 class="accordion-section-title" tabindex="0"><?php echo esc_html( $this->title ); ?></h3>
<ul class="accordion-section-content">
<?php if ( ! empty( $this->description ) ) : ?>
@@ -178,3 +191,77 @@ class WP_Customize_Section {
<?php
}
}
/**
* Customize Panel Class.
*
* A UI container for sections, managed by the WP_Customize_Manager.
*
* @package WordPress
* @subpackage Customize
* @since 4.0.0
*/
class WP_Customize_Panel extends WP_Customize_Section {
/**
* Customizer sections for this panel.
*
* @since 4.0.0
* @access public
* @var array
*/
public $sections;
/**
* Constructor.
*
* Any supplied $args override class property defaults.
*
* @since 4.0.0
*
* @param WP_Customize_Manager $manager Customizer bootstrap instance.
* @param string $id An specific ID of the section.
* @param array $args Section arguments.
*/
public function __construct( $manager, $id, $args = array() ) {
parent::__construct( $manager, $id, $args );
$this->sections = array(); // Users cannot customize the $sections array.
return $this;
}
/**
* Render the panel, and the sections that have been added to it.
*
* @since 4.0.0
*/
protected function render() {
?>
<li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="control-section control-panel accordion-section">
<h3 class="accordion-section-title" tabindex="0"><?php echo esc_html( $this->title ); ?></h3>
<span class="control-panel-back" tabindex="0"><span class="screen-reader-text">Back to Customize</span></span>
<ul class="accordion-sub-container control-panel-content">
<li class="accordion-section control-section<?php if ( empty( $this->description ) ) echo ' cannot-expand'; ?>">
<div class="accordion-section-title" tabindex="0">
<span class="preview-notice"><?php
/* translators: %s is the panel title in the Customize/Live Preview pane */
echo sprintf( 'You are customizing %s', '<strong class="panel-title">' . esc_html( $this->title ) . '</strong>' );
?></span>
</div>
<?php if ( ! empty( $this->description ) ) : ?>
<div class="accordion-section-content description">
<?php echo $this->description; ?>
</div>
<?php endif; ?>
</li>
<?php
foreach ( $this->sections as $section ) {
$section->maybe_render();
}
?>
</ul>
</li>
<?php
}
}

View File

@@ -433,6 +433,11 @@ final class WP_Customize_Widgets {
$this->manager->add_setting( $setting_id, $setting_args );
}
$this->manager->add_panel( 'widgets', array(
'title' => __( 'Widgets' ),
'description' => __( 'Widgets are independent sections of content that can be placed into widgetized areas provided by your theme (commonly called sidebars).' ),
) );
foreach ( $sidebars_widgets as $sidebar_id => $sidebar_widget_ids ) {
if ( empty( $sidebar_widget_ids ) ) {
$sidebar_widget_ids = array();
@@ -458,10 +463,10 @@ final class WP_Customize_Widgets {
if ( $is_active_sidebar ) {
$section_args = array(
/* translators: %s: sidebar name */
'title' => sprintf( __( 'Widgets: %s' ), $GLOBALS['wp_registered_sidebars'][$sidebar_id]['name'] ),
'description' => $GLOBALS['wp_registered_sidebars'][$sidebar_id]['description'],
'priority' => 1000 + array_search( $sidebar_id, array_keys( $wp_registered_sidebars ) ),
'title' => $GLOBALS['wp_registered_sidebars'][ $sidebar_id ]['name'],
'description' => $GLOBALS['wp_registered_sidebars'][ $sidebar_id ]['description'],
'priority' => array_search( $sidebar_id, array_keys( $wp_registered_sidebars ) ),
'panel' => 'widgets',
);
/**