Add JS templates for Customizer Panels and Sections.

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

Props celloexpressions, westonruter, ocean90.
See #30737.

Built from https://develop.svn.wordpress.org/trunk@32658


git-svn-id: http://core.svn.wordpress.org/trunk@32628 1a063a9b-81f0-0310-95a4-ce76da25c4cd

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 ) );
+				}
+			}
 		}
 	});