vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-06-28 14:20:15 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add JS templates for Customizer Panels and Sections.

Browse Source 
This extends the approach taken for Customizer Controls in #29572.

Props celloexpressions, westonruter, ocean90.
See #30737.


git-svn-id: https://develop.svn.wordpress.org/trunk@32658 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Weston Ruter
2015-05-30 00:02:13 +00:00
parent ef6315a7a2
commit cc19680774
10 changed files with 937 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/wp-includes/class-wp-customize-section.php
View File

@@ -223,10 +223,18 @@ class WP_Customize_Section {
* @return array The array to be exported to the client as JSON.
*/
public function json() {
$array = wp_array_slice_assoc( (array) $this, array( 'title', 'description', 'priority', 'panel', 'type' ) );
$array = wp_array_slice_assoc( (array) $this, array( 'id', 'title', 'description', 'priority', 'panel', 'type' ) );
$array['content'] = $this->get_content();
$array['active'] = $this->active();
$array['instanceNumber'] = $this->instance_number;
if ( $this->panel ) {
/* translators: ▸ is the unicode right-pointing triangle, and %s is the section title in the Customizer */
$array['customizeAction'] = sprintf( __( 'Customizing ▸ %s' ), esc_html( $this->manager->get_panel( $this->panel )->title ) );
} else {
$array['customizeAction'] = __( 'Customizing' );
}
return $array;
}
@@ -251,7 +259,7 @@ class WP_Customize_Section {
}
/**
* Get the section's content template for insertion into the Customizer pane.
* Get the section's content for insertion into the Customizer pane.
*
* @since 4.1.0
*
@@ -297,16 +305,45 @@ class WP_Customize_Section {
}
/**
* Render the section, and the controls that have been added to it.
* Render the section UI in a subclass.
*
* Sections are now rendered in JS by default, see {@see WP_Customize_Section::print_template()}.
*
* @since 3.4.0
*/
protected function render() {
$classes = 'accordion-section control-section control-section-' . $this->type;
protected function render() {}
/**
* Render the section's JS template.
*
* This function is only run for section types that have been registered with
* {@see WP_Customize_Manager::register_section_type()}.
*
* @since 4.3.0
*/
public function print_template() {
?>
<script type="text/html" id="tmpl-customize-section-<?php echo $this->type; ?>">
<?php $this->render_template(); ?>
</script>
<?php
}
/**
* An Underscore (JS) template for rendering this section.
*
* Class variables for this section class are available in the `data` JS object;
* export custom variables by overriding {@see WP_Customize_Section::json()}.
*
* @see WP_Customize_Section::print_template()
*
* @since 4.3.0
*/
protected function render_template() {
?>
<li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="<?php echo esc_attr( $classes ); ?>">
<li id="accordion-section-{{ data.id }}" class="accordion-section control-section control-section-{{ data.type }}">
<h3 class="accordion-section-title" tabindex="0">
<?php echo esc_html( $this->title ); ?>
{{ data.title }}
<span class="screen-reader-text"><?php _e( 'Press return or enter to open' ); ?></span>
</h3>
<ul class="accordion-section-content">
@@ -316,20 +353,15 @@ class WP_Customize_Section {
<span class="screen-reader-text"><?php _e( 'Back' ); ?></span>
</button>
<h3>
<span class="customize-action"><?php
if ( $this->panel ) {
/* translators: &#9656; is the unicode right-pointing triangle, and %s is the section title in the Customizer */
echo sprintf( __( 'Customizing &#9656; %s' ), esc_html( $this->manager->get_panel( $this->panel )->title ) );
} else {
_e( 'Customizing' );
}
?></span>
<?php echo esc_html( $this->title ); ?>
<span class="customize-action">
{{{ data.customizeAction }}}
</span>
{{ data.title }}
</h3>
</div>
<?php if ( ! empty( $this->description ) ) : ?>
<p class="description customize-section-description"><?php echo $this->description; ?></p>
<?php endif; ?>
<# if ( data.description ) { #>
<p class="description customize-section-description">{{{ data.description }}}</p>
<# } #>
</li>
</ul>
</li>