Add postmeta setting and framework

js/customize-dynamic-control.js

@@ -31,7 +31,50 @@
 			control.propertyElements = [];
 		},
 
-		_setUpSettingProperty: function() {
+		/**
+		 * Add bidirectional data binding links between inputs and the setting(s).
+		 *
+		 * This is copied from wp.customize.Control.prototype.initialize(). It
+		 * should be changed in Core to be applied once the control is embedded.
+		 *
+		 * @private
+		 */
+		_setUpSettingRootLinks: function() {
+			var control, nodes, radios;
+			control = this;
+			nodes = control.container.find( '[data-customize-setting-link]' );
+			radios = {};
+
+			nodes.each( function() {
+				var node = $( this ),
+					name;
+
+				if ( node.is( ':radio' ) ) {
+					name = node.prop( 'name' );
+					if ( radios[ name ] ) {
+						return;
+					}
+
+					radios[ name ] = true;
+					node = nodes.filter( '[name="' + name + '"]' );
+				}
+
+				api( node.data( 'customizeSettingLink' ), function( setting ) {
+					var element = new api.Element( node );
+					control.elements.push( element );
+					element.sync( setting );
+					element.set( setting() );
+				});
+			});
+
+		},
+
+		/**
+		 * Add bidirectional data binding links between inputs and the setting properties.
+		 *
+		 * @private
+		 */
+		_setUpSettingPropertyLinks: function() {
 			var control = this, nodes, radios;
 			if ( ! control.params.setting_property || ! control.setting ) {
 				return;
@@ -82,7 +125,8 @@
 		ready: function() {
 			var control = this;
 
-			control._setUpSettingProperty();
+			control._setUpSettingRootLinks();
+			control._setUpSettingPropertyLinks();
 
 			api.Control.prototype.ready.call( control );
 

js/customize-page-template.js

@@ -0,0 +1,115 @@
+/* global module, EditPostPreviewCustomize, wp, _, _wpCustomizePageTemplateExports */
+/* exported CustomizePageTemplate */
+
+var CustomizePageTemplate = (function( api ) {
+	'use strict';
+
+	var component = {
+		data: {
+			l10n: {
+				controlLabel: ''
+			},
+			defaultPageTemplateChoices: {}
+		}
+	};
+
+	/**
+	 * Init component.
+	 */
+	component.init = function() {
+		if ( 'undefined' !== typeof _wpCustomizePageTemplateExports ) {
+			_.extend( component.data, _wpCustomizePageTemplateExports );
+		}
+		component.extendSections();
+	};
+
+	/**
+	 * Extend existing sections and future sections added with the page template control.
+	 */
+	component.extendSections = function() {
+		api.section.each( function( section ) {
+			component.addControl( section );
+		} );
+		api.section.bind( 'add', function( section ) {
+			component.addControl( section );
+		} );
+	};
+
+	/**
+	 * Add the page template control to the given section.
+	 *
+	 * @param {wp.customize.Section} section
+	 * @returns {wp.customize.Control|null} The control.
+	 */
+	component.addControl = function( section ) {
+		var supports, control, controlId, settingId, isActiveCallback;
+		if ( ! section.extended( api.Posts.PostSection ) ) {
+			return null;
+		}
+		supports = api.Posts.data.postTypes[ section.params.post_type ].supports;
+		if ( ! supports['page-attributes'] ) {
+			return null;
+		}
+
+		settingId = 'postmeta[' + section.params.post_type + '][' + String( section.params.post_id ) + '][_wp_page_template]';
+		controlId = settingId;
+
+		// If in page preview, send the updated page template to the post edit screen when it is changed.
+		if ( 'undefined' !== typeof EditPostPreviewCustomize ) {
+			api( settingId, function( setting ) {
+				setting.bind( function( pageTemplate ) {
+					var settings = {};
+					settings[ settingId ] = pageTemplate;
+					EditPostPreviewCustomize.sendSettingsToEditPostScreen( settings );
+				} );
+			} );
+		}
+
+		if ( api.control.has( controlId ) ) {
+			return api.control( controlId );
+		}
+
+		control = new api.controlConstructor.dynamic( controlId, {
+			params: {
+				section: section.id,
+				priority: 1,
+				label: component.data.l10n.controlLabel,
+				active: true,
+				settings: {
+					'default': settingId
+				},
+				field_type: 'select',
+				choices: component.data.defaultPageTemplateChoices,
+				input_attrs: {
+					'data-customize-setting-link': settingId
+				}
+			}
+		} );
+
+		/**
+		 * Make sure that control only appears if there are page templates (other than 'default').
+		 *
+		 * @returns {boolean}
+		 */
+		isActiveCallback = function() {
+			var defaultSize = 1;
+			return _.size( control.params.choices ) > defaultSize;
+		};
+		control.active.set( isActiveCallback() );
+		control.active.validate = isActiveCallback;
+
+		// Register.
+		api.control.add( control.id, control );
+
+		// @todo Fetch the page templates related to control.params.post_id to override the default choices
+
+		return control;
+	};
+
+	if ( 'undefined' !== typeof module ) {
+		module.exports = component;
+	}
+
+	return component;
+
+})( wp.customize );

js/customize-post-field-partial.js

@@ -21,7 +21,7 @@
 		 * @inheritdoc
 		 */
 		initialize: function( id, options ) {
-			var partial = this, args, matches, baseSelector, idPattern = /^post\[(.+?)]\[(-?\d+)]\[(.+?)]$/;
+			var partial = this, args, matches, baseSelector, idPattern = /^post\[(.+?)]\[(-?\d+)]\[(.+?)](?:\[(.+?)])?$/;
 
 			args = options || {};
 			args.params = args.params || {};
@@ -32,6 +32,7 @@
 			args.params.post_type = matches[1];
 			args.params.post_id = parseInt( matches[2], 10 );
 			args.params.field_id = matches[3];
+			args.params.placement = matches[4] || '';
 
 			if ( ! args.params.selector ) {
 				baseSelector = '.hentry.post-' + String( args.params.post_id ) + '.type-' + args.params.post_type;
@@ -41,6 +42,12 @@
 					args.params.selector = baseSelector + ' .entry-content';
 				} else if ( 'post_excerpt' === args.params.field_id ) {
 					args.params.selector = baseSelector + ' .entry-summary';
+				} else if ( 'post_author' === args.params.field_id ) {
+					if ( 'author-bio' === args.params.placement ) {
+						args.params.selector = baseSelector + ' .author-info';
+					} else if ( 'byline' === args.params.placement ) {
+						args.params.selector = baseSelector + ' .byline a.fn';
+					}
 				}
 			}
 			api.selectiveRefresh.Partial.prototype.initialize.call( partial, id, args );

js/customize-post-section.js

@@ -106,6 +106,9 @@
 			if ( postTypeObj.supports.excerpt ) {
 				section.addExcerptControl();
 			}
+			if ( postTypeObj.supports.author ) {
+				section.addAuthorControl();
+			}
 		},
 
 		/**
@@ -336,6 +339,45 @@
 			return control;
 		},
 
+		/**
+		 * Add post author control.
+		 *
+		 * @returns {wp.customize.Control}
+		 */
+		addAuthorControl: function() {
+			var section = this, control, setting = api( section.id );
+			control = new api.controlConstructor.dynamic( section.id + '[post_author]', {
+				params: {
+					section: section.id,
+					priority: 1,
+					label: api.Posts.data.l10n.fieldAuthorLabel,
+					active: true,
+					settings: {
+						'default': setting.id
+					},
+					field_type: 'select',
+					setting_property: 'post_author',
+					choices: api.Posts.data.authorChoices
+				}
+			} );
+
+			// Override preview trying to de-activate control not present in preview context.
+			control.active.validate = function() {
+				return true;
+			};
+
+			// Register.
+			section.postFieldControls.post_author = control;
+			api.control.add( control.id, control );
+
+			// Remove the setting from the settingValidationMessages since it is not specific to this field.
+			if ( control.settingValidationMessages ) {
+				control.settingValidationMessages.remove( setting.id );
+				control.settingValidationMessages.add( control.id, new api.Value( '' ) );
+			}
+			return control;
+		},
+
 		/**
 		 * Set up setting validation.
 		 */

js/customize-posts.js

@@ -53,56 +53,68 @@
 	 *
 	 * @param {object} data
 	 */
-	component.receiveCustomizedPosts = function( data ) {
-		_.each( data.postSettings, function( settingValue, settingId ) {
-			var section, sectionId, panelId, sectionType, postId, postType, idParts, Constructor, htmlParser;
-			idParts = settingId.replace( /]/g, '' ).split( '[' );
-			postType = idParts[1];
-			if ( ! component.data.postTypes[ postType ] ) {
-				if ( 'undefined' !== typeof console && console.error ) {
-					console.error( 'Unrecognized post type: ' + postType );
-				}
-				return;
-			}
-			postId = parseInt( idParts[2], 10 );
-			if ( ! postId ) {
-				if ( 'undefined' !== typeof console && console.error ) {
-					console.error( 'Bad post id: ' + idParts[2] );
-				}
-				return;
-			}
+	component.receivePreviewData = function( data ) {
+		_.each( data.settings, function( setting, id ) {
 
-			if ( ! api.has( settingId ) ) {
-				api.create( settingId, settingId, settingValue, {
-					transport: 'postMessage', // @todo Let this be postMessage
+			if ( ! api.has( id ) ) {
+				api.create( id, id, setting.value, {
+					transport: setting.transport,
 					previewer: api.previewer,
-					dirty: false
+					dirty: setting.dirty
 				} );
 			}
 
-			sectionType = 'post[' + postType + ']';
-			panelId = 'posts[' + postType + ']';
-			sectionId = settingId;
+			if ( 'post' === setting.type ) {
+				component.addPostSection( id );
+			}
+		} );
+	};
 
-			if ( api.section.has( sectionId ) ) {
-				return;
+	/**
+	 * Handle adding post setting.
+	 *
+	 * @param {string} id
+	 */
+	component.addPostSection = function( id ) {
+		var section, sectionId, panelId, sectionType, postId, postType, idParts, Constructor, htmlParser;
+		idParts = id.replace( /]/g, '' ).split( '[' );
+		postType = idParts[1];
+		if ( ! component.data.postTypes[ postType ] ) {
+			if ( 'undefined' !== typeof console && console.error ) {
+				console.error( 'Unrecognized post type: ' + postType );
 			}
+			return;
+		}
+		postId = parseInt( idParts[2], 10 );
+		if ( ! postId ) {
+			if ( 'undefined' !== typeof console && console.error ) {
+				console.error( 'Bad post id: ' + idParts[2] );
+			}
+			return;
+		}
 
-			Constructor = api.sectionConstructor[ sectionType ] || api.sectionConstructor.post;
-
-			htmlParser = $( '<div>' ).html( component.data.l10n.sectionCustomizeActionTpl.replace( '%s', api.panel( panelId ).params.title ) );
-			section = new Constructor( sectionId, {
-				params: {
-					id: sectionId,
-					panel: panelId,
-					post_type: postType,
-					post_id: postId,
-					active: true,
-					customizeAction: htmlParser.text()
-				}
-			});
-			api.section.add( sectionId, section );
-		} );
+		sectionType = 'post[' + postType + ']';
+		panelId = 'posts[' + postType + ']';
+		sectionId = id;
+
+		if ( api.section.has( sectionId ) ) {
+			return;
+		}
+
+		Constructor = api.sectionConstructor[ sectionType ] || api.sectionConstructor.post;
+
+		htmlParser = $( '<div>' ).html( component.data.l10n.sectionCustomizeActionTpl.replace( '%s', api.panel( panelId ).params.title ) );
+		section = new Constructor( sectionId, {
+			params: {
+				id: sectionId,
+				panel: panelId,
+				post_type: postType,
+				post_id: postId,
+				active: true,
+				customizeAction: htmlParser.text()
+			}
+		});
+		api.section.add( sectionId, section );
 	};
 
 	api.bind( 'ready', function() {
@@ -111,7 +123,7 @@
 		component.postIdInput = $( '<input type="hidden" id="post_ID" name="post_ID">' );
 		$( 'body' ).append( component.postIdInput );
 
-		api.previewer.bind( 'customized-posts', component.receiveCustomizedPosts );
+		api.previewer.bind( 'customized-posts', component.receivePreviewData );
 
 		/**
 		 * Focus on the section requested from the preview.