Add JS templates for Customizer Panels and Sections.

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

src/wp-admin/customize.php

@@ -175,7 +175,9 @@ do_action( 'customize_controls_print_scripts' );
 	<div id="customize-preview" class="wp-full-overlay-main"></div>
 	<?php
 
-	// Render control templates.
+	// Render Panel, Section, and Control templates.
+	$wp_customize->render_panel_templates();
+	$wp_customize->render_section_templates();
 	$wp_customize->render_control_templates();
 
 	/**
@@ -259,28 +261,38 @@ do_action( 'customize_controls_print_scripts' );
 
 	// Prepare Customize Setting objects to pass to JavaScript.
 	foreach ( $wp_customize->settings() as $id => $setting ) {
-		$settings['settings'][ $id ] = array(
-			'value'     => $setting->js_value(),
-			'transport' => $setting->transport,
-			'dirty'     => $setting->dirty,
-		);
+		if ( $setting->check_capabilities() ) {
+			$settings['settings'][ $id ] = array(
+				'value'     => $setting->js_value(),
+				'transport' => $setting->transport,
+				'dirty'     => $setting->dirty,
+			);
+		}
 	}
 
 	// Prepare Customize Control objects to pass to JavaScript.
 	foreach ( $wp_customize->controls() as $id => $control ) {
-		$settings['controls'][ $id ] = $control->json();
+		if ( $control->check_capabilities() ) {
+			$settings['controls'][ $id ] = $control->json();
+		}
 	}
 
 	// Prepare Customize Section objects to pass to JavaScript.
 	foreach ( $wp_customize->sections() as $id => $section ) {
-		$settings['sections'][ $id ] = $section->json();
+		if ( $section->check_capabilities() ) {
+			$settings['sections'][ $id ] = $section->json();
+		}
 	}
 
 	// Prepare Customize Panel objects to pass to JavaScript.
-	foreach ( $wp_customize->panels() as $id => $panel ) {
-		$settings['panels'][ $id ] = $panel->json();
-		foreach ( $panel->sections as $section_id => $section ) {
-			$settings['sections'][ $section_id ] = $section->json();
+	foreach ( $wp_customize->panels() as $panel_id => $panel ) {
+		if ( $panel->check_capabilities() ) {
+			$settings['panels'][ $panel_id ] = $panel->json();
+			foreach ( $panel->sections as $section_id => $section ) {
+				if ( $section->check_capabilities() ) {
+					$settings['sections'][ $section_id ] = $section->json();
+				}
+			}
 		}
 	}
 

src/wp-admin/js/customize-controls.js

@@ -156,6 +156,7 @@
 	Container = api.Class.extend({
 		defaultActiveArguments: { duration: 'fast', completeCallback: $.noop },
 		defaultExpandedArguments: { duration: 'fast', completeCallback: $.noop },
+		containerType: 'container',
 
 		/**
 		 * @since 4.1.0
@@ -168,7 +169,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()
@@ -191,7 +196,9 @@
 				container.onChangeExpanded( expanded, args );
 			});
 
-			container.attachEvents();
+			container.deferred.embedded.done( function () {
+				container.attachEvents();
+			});
 
 			api.utils.bubbleChildValueChanges( container, [ 'priority', 'active' ] );
 
@@ -366,7 +373,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.3.0
+		 */
+		getContainer: function () {
+			var template,
+				container = this;
+
+			if ( 0 !== $( '#tmpl-' + container.templateSelector ).length ) {
+				template = wp.template( container.templateSelector );
+				if ( template && container.container ) {
+					return $.trim( template( container.params ) );
+				}
+			}
+
+			return '<li></li>';
+		}
 	});
 
 	/**
@@ -376,6 +402,7 @@
 	 * @augments wp.customize.Class
 	 */
 	api.Section = Container.extend({
+		containerType: 'section',
 
 		/**
 		 * @since 4.1.0
@@ -977,6 +1004,8 @@
 	 * @augments wp.customize.Class
 	 */
 	api.Panel = Container.extend({
+		containerType: 'panel',
+
 		/**
 		 * @since 4.1.0
 		 *
@@ -1003,6 +1032,7 @@
 
 			if ( ! panel.container.parent().is( parentContainer ) ) {
 				parentContainer.append( panel.container );
+				panel.renderContent();
 			}
 			panel.deferred.embedded.resolve();
 		},
@@ -1045,6 +1075,7 @@
 				}
 				event.preventDefault(); // Keep this AFTER the key filter above
 
+				meta = panel.container.find( '.panel-meta' );
 				if ( meta.hasClass( 'cannot-expand' ) ) {
 					return;
 				}
@@ -1169,6 +1200,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.3.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 ) );
+				}
+			}
 		}
 	});