Index: src/wp-admin/customize.php
===================================================================
--- src/wp-admin/customize.php (revision 31255)
+++ src/wp-admin/customize.php (working copy)
@@ -184,7 +184,9 @@
render_panel_templates();
+ $wp_customize->render_section_templates();
$wp_customize->render_control_templates();
/**
Index: src/wp-admin/js/customize-controls.js
===================================================================
--- src/wp-admin/js/customize-controls.js (revision 31255)
+++ src/wp-admin/js/customize-controls.js (working copy)
@@ -149,6 +149,7 @@
Container = api.Class.extend({
defaultActiveArguments: { duration: 'fast', completeCallback: $.noop },
defaultExpandedArguments: { duration: 'fast', completeCallback: $.noop },
+ containerType: 'container',
/**
* @since 4.1.0
@@ -161,7 +162,11 @@
container.id = id;
container.params = {};
$.extend( container, options || {} );
+ container.templateSelector = 'customize-' + container.containerType + '-' + container.params.type;
container.container = $( container.params.content );
+ if ( 0 === container.container.length ) {
+ container.container = $( container.getContainer() );
+ }
container.deferred = {
embedded: new $.Deferred()
@@ -348,7 +353,26 @@
* Bring the container into view and then expand this and bring it into view
* @param {Object} [params]
*/
- focus: focus
+ focus: focus,
+
+ /**
+ * Return the container html, generated from its JS template, if it exists.
+ *
+ * @since 4.2.0
+ */
+ getContainer: function () {
+ var template,
+ container = this;
+
+ if ( 0 !== $( '#tmpl-' + container.templateSelector ).length ) {
+ template = wp.template( container.templateSelector );
+ if ( template && container.container ) {
+ return template( container.params );
+ }
+ }
+
+ return '';
+ }
});
/**
@@ -358,6 +382,7 @@
* @augments wp.customize.Class
*/
api.Section = Container.extend({
+ containerType: 'section',
/**
* @since 4.1.0
@@ -527,6 +552,8 @@
* @augments wp.customize.Class
*/
api.Panel = Container.extend({
+ containerType: 'panel',
+
/**
* @since 4.1.0
*
@@ -553,6 +580,7 @@
if ( ! panel.container.parent().is( parentContainer ) ) {
parentContainer.append( panel.container );
+ panel.renderContent();
}
panel.deferred.embedded.resolve();
},
@@ -575,14 +603,13 @@
}
});
- meta = panel.container.find( '.panel-meta:first' );
-
- meta.find( '> .accordion-section-title' ).on( 'click keydown', function( event ) {
+ panel.container.on( 'click keydown', '.panel-meta > .accordion-section-title', function( event ) {
if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
return;
}
event.preventDefault(); // Keep this AFTER the key filter above
+ meta = panel.container.find( '.panel-meta' );
if ( meta.hasClass( 'cannot-expand' ) ) {
return;
}
@@ -704,6 +731,26 @@
panelTitle.focus();
container.scrollTop( 0 );
}
+ },
+
+ /**
+ * Render the panel from its JS template, if it exists.
+ *
+ * The panel's container must already exist in the DOM.
+ *
+ * @since 4.2.0
+ */
+ renderContent: function () {
+ var template,
+ panel = this;
+
+ // Add the content to the container.
+ if ( 0 !== $( '#tmpl-' + panel.templateSelector + '-content' ).length ) {
+ template = wp.template( panel.templateSelector + '-content' );
+ if ( template && panel.container ) {
+ panel.container.find( '.accordion-sub-container' ).html( template( panel.params ) );
+ }
+ }
}
});
Index: src/wp-includes/class-wp-customize-control.php
===================================================================
--- src/wp-includes/class-wp-customize-control.php (revision 31255)
+++ src/wp-includes/class-wp-customize-control.php (working copy)
@@ -259,6 +259,10 @@
* @return array Array of parameters passed to the JavaScript.
*/
public function json() {
+ if ( ! $this->check_capabilities() ) {
+ return;
+ }
+
$this->to_json();
return $this->json;
}
@@ -515,11 +519,11 @@
* @since 4.1.0
*/
final public function print_template() {
- ?>
-
-
+
+ registered_panel_types[] = $panel;
+ }
+
+ /**
+ * Render JS templates for all registered panel types.
+ *
+ * @since 4.2.0
+ * @access public
+ */
+ public function render_panel_templates() {
+ foreach ( $this->registered_panel_types as $panel_type ) {
+ $panel = new $panel_type( $this, 'temp', array() );
+ $panel->print_template();
+ }
+ }
+
+ /**
* Add a customize section.
*
* @since 3.4.0
@@ -815,6 +861,34 @@
}
/**
+ * Register a customize section type.
+ *
+ * Registered types are eligible to be rendered via JS and created dynamically.
+ *
+ * @since 4.2.0
+ * @access public
+ *
+ * @param string $section Name of a custom section which is a subclass of
+ * {@see WP_Customize_Section}.
+ */
+ public function register_section_type( $section ) {
+ $this->registered_section_types[] = $section;
+ }
+
+ /**
+ * Render JS templates for all registered section types.
+ *
+ * @since 4.2.0
+ * @access public
+ */
+ public function render_section_templates() {
+ foreach ( $this->registered_section_types as $section_type ) {
+ $section = new $section_type( $this, 'temp', array() );
+ $section->print_template();
+ }
+ }
+
+ /**
* Add a customize control.
*
* @since 3.4.0
@@ -985,7 +1059,10 @@
*/
public function register_controls() {
- /* Control Types (custom control classes) */
+ /* Panel, Section, and Control Types */
+ $this->register_panel_type( 'WP_Customize_Panel' );
+ $this->register_section_type( 'WP_Customize_Section' );
+ $this->register_section_type( 'WP_Customize_Sidebar_Section' );
$this->register_control_type( 'WP_Customize_Color_Control' );
$this->register_control_type( 'WP_Customize_Upload_Control' );
$this->register_control_type( 'WP_Customize_Image_Control' );
Index: src/wp-includes/class-wp-customize-panel.php
===================================================================
--- src/wp-includes/class-wp-customize-panel.php (revision 31255)
+++ src/wp-includes/class-wp-customize-panel.php (working copy)
@@ -204,7 +204,11 @@
* @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', 'type' ) );
+ if ( ! $this->check_capabilities() ) {
+ return;
+ }
+
+ $array = wp_array_slice_assoc( (array) $this, array( 'id', 'title', 'description', 'priority', 'type' ) );
$array['content'] = $this->get_content();
$array['active'] = $this->active();
$array['instanceNumber'] = $this->instance_number;
@@ -279,46 +283,90 @@
}
/**
- * Render the panel container, and then its contents.
+ * Render the panel container, and then its contents (via `this->render_content()`) in a subclass.
*
+ * Panel containers are now rendered in JS by default, see {@see WP_Customize_Panel::print_template()}.
+ *
* @since 4.0.0
* @access protected
*/
- protected function render() {
- $classes = 'accordion-section control-section control-panel control-panel-' . $this->type;
+ protected function render() {}
+
+ /**
+ * Render the panel UI in a subclass.
+ *
+ * Panel contents are now rendered in JS by default, see {@see WP_Customize_Panel::print_template()}.
+ *
+ * @since 4.1.0
+ * @access protected
+ */
+ protected function render_content() {}
+
+ /**
+ * Render the panel's JS templates.
+ *
+ * This function is only run for panel types that have been registered with
+ * {@see WP_Customize_Manager::register_panel_type()}.
+ *
+ * @since 4.2.0
+ */
+ public function print_template() {
?>
-
+
+
+
+
- title ); ?>
+ {{ data.title }}
-
+
-
+
' . esc_html( $this->title ) . '' );
+ echo sprintf( __( 'You are customizing %s' ), '{{ data.title }}' );
?>
- description ) ) : ?>
+ <# if ( data.description ) { #>
- description; ?>
+ {{{ data.description }}}
-
+ <# } #>
check_capabilities() ) {
+ return;
+ }
+
+ $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;
@@ -241,7 +245,7 @@
}
/**
- * 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
*
@@ -287,24 +291,53 @@
}
/**
- * 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.2.0
+ */
+ public function print_template() {
+ ?>
+
+
-
+
- title ); ?>
+ {{ data.title }}
- description ) ) : ?>
+ <# if ( data.description ) { #>
-
-
description; ?>
+ {{{ data.description }}}
-
+ <# } #>