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.

git-svn-id: https://develop.svn.wordpress.org/trunk@28861 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Dominik Schilling (ocean90)
2014-06-26 20:16:21 +00:00
parent bc83ca24d4
commit 7edd9edde4
7 changed files with 379 additions and 20 deletions
+88 -1
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
}
}