xwp · westonruter · Jan 3, 2017 · Dec 3, 2016 · Dec 13, 2016 · Dec 14, 2016
diff --git a/composer.json b/composer.json
@@ -1,7 +1,7 @@
 {
 	"name": "xwp/wp-customize-posts",
 	"description": "Manage posts and postmeta via the Customizer.",
-	"version": "0.8.4",
+	"version": "0.8.5",
 	"type": "wordpress-plugin",
 	"keywords": [ "customizer", "customize", "posts", "postmeta", "preview", "featured-image", "page-template" ],
 	"homepage": "https://github.com/xwp/wp-customize-posts/",

diff --git a/customize-posts.php b/customize-posts.php
@@ -3,7 +3,7 @@
  * Plugin Name: Customize Posts
  * Description: Manage posts and postmeta via the Customizer. Works best in conjunction with the <a href="https://wordpress.org/plugins/customize-setting-validation/">Customize Setting Validation</a> plugin.
  * Plugin URI: https://github.com/xwp/wp-customize-posts/
- * Version: 0.8.4
+ * Version: 0.8.5
  * Author: XWP
  * Author URI: https://make.xwp.co/
  * License: GPLv2+

diff --git a/js/customize-post-field-partial.js b/js/customize-post-field-partial.js
@@ -35,8 +35,6 @@
 			api.selectiveRefresh.partialConstructor.deferred.prototype.initialize.call( partial, id, args );
 
 			partial.addInstantPreviews();
-
-			// @todo If singular_only, and this is not the post singular post for this partial, then no refresh!
 		},
 
 		/**
@@ -123,6 +121,41 @@
 			return refreshPromise;
 		},
 
+		/**
+		 * Handle fail to render partial.
+		 *
+		 * {@inheritdoc}
+		 *
+		 * @this {wp.customize.selectiveRefresh.partialConstructor.deferred}
+		 * @returns {void}
+		 */
+		fallback: function postFieldPartialFallback() {
+			var partial = this, dependentSelector;
+
+			/*
+			 * Skip invoking fallback behavior for partials on documents that lack matches for
+			 * the fallback dependent selector. The default fallback dependent selector is
+			 * essentially checking to see if a body_class or post_class exists in the document
+			 * which references the given post. If the dependent selector fails to match any
+			 * elements, then the selector dependency fails and the partial should not be added.
+			 * Note that the dependent selector could have been used as a determiner for whether
+			 * the partial was added in the first place. However, this would have meant that no
+			 * selective refresh requests would have been spawned by the change, and this would
+			 * have meant that any Backbone models for the WP-API would not have had the chance
+			 * to get the rendered updates from the server.
+			 */
+			dependentSelector = partial.params.fallbackDependentSelector;
+			if ( ! dependentSelector ) {
+				dependentSelector = '.hentry.post-%d, body.page-id-%d, body.postid-%d';
+			}
+			dependentSelector = dependentSelector.replace( /%d/g, String( partial.params.post_id ) );
+			if ( 0 === $( dependentSelector ).length ) {
+				return;
+			}
+
+			api.selectiveRefresh.partialConstructor.deferred.prototype.fallback.call( partial );
+		},
+
 		/**
 		 * @inheritdoc
 		 */

diff --git a/js/customize-preview-featured-image.js b/js/customize-preview-featured-image.js
@@ -7,8 +7,11 @@ var CustomizePreviewFeaturedImage = (function( api, $ ) {
 
 	var component = {
 		data: {
-			partialSelector: '',
-			partialContainerInclusive: true
+			partialArgs: {
+				selector: '',
+				containerInclusive: true,
+				fallbackDependentSelector: ''
+			}
 		}
 	};
 
@@ -23,6 +26,27 @@ var CustomizePreviewFeaturedImage = (function( api, $ ) {
 			_.extend( component.data, configData );
 		}
 		component.registerPartials();
+
+		api.previewPosts.wpApiModelInstances.bind( 'add', component.handleWpApiBackboneModelAdd );
+	};
+
+	/**
+	 * Sync changes to featured image into Backbone models
+	 *
+	 * @param {wp.api.WPApiBaseModel|wp.api.models.Post} postModel Post model.
+	 * @returns {void}
+	 */
+	component.handleWpApiBackboneModelAdd = function handleWpApiBackboneModelAdd( postModel ) {
+		var settingId;
+		if ( _.isUndefined( postModel.get( 'featured_media' ) ) ) {
+			return;
+		}
+		settingId = 'postmeta[' + postModel.get( 'type' ) + '][' + String( postModel.get( 'id' ) ) + '][_thumbnail_id]';
+		api( settingId, function( postmetaSetting ) {
+			postmetaSetting.bind( function( featuredImageId ) {
+				postModel.set( 'featured_media', featuredImageId );
+			} );
+		} );
 	};
 
 	/**
@@ -35,6 +59,37 @@ var CustomizePreviewFeaturedImage = (function( api, $ ) {
 	 */
 	component.FeaturedImagePartial = api.selectiveRefresh.partialConstructor.deferred.extend({
 
+		idPattern: /^postmeta\[(.+?)]\[(\d+)]\[_thumbnail_id]$/,
+
+		/**
+		 * Initialize.
+		 *
+		 * @param {string} id          Partial ID.
+		 * @param {object} args        Args.
+		 * @param {object} args.params Params.
+		 * @returns {void}
+		 */
+		initialize: function( id, args ) {
+			var partial = this, matches, postId, postType, params;
+			matches = id.match( partial.idPattern );
+			postType = matches[1];
+			postId = parseInt( matches[2], 10 );
+			params = _.extend(
+				{
+					post_id: postId,
+					post_type: postType,
+					selector: component.data.partialArgs.selector.replace( /%d/g, String( postId ) ),
+					settings: [ id ],
+					primarySetting: id,
+					containerInclusive: component.data.partialArgs.containerInclusive,
+					fallbackDependentSelector: component.data.partialArgs.fallbackDependentSelector
+				},
+				args ? args.params || {} : {}
+			);
+
+			api.selectiveRefresh.partialConstructor.deferred.prototype.initialize.call( partial, id, { params: params } );
+		},
+
 		/**
 		 * Force fallback (full page refresh) behavior when the featured image is removed.
 		 *
@@ -72,6 +127,27 @@ var CustomizePreviewFeaturedImage = (function( api, $ ) {
 			} else {
 				return api.selectiveRefresh.Partial.prototype.renderContent.call( partial, placement );
 			}
+		},
+
+		/**
+		 * Handle fail to render partial.
+		 *
+		 * Skip performing fallback behavior if post does not appear on the current template.
+		 *
+		 * {@inheritdoc}
+		 *
+		 * @this {wp.customize.selectiveRefresh.partialConstructor.deferred}
+		 * @returns {void}
+		 */
+		fallback: function postFieldPartialFallback() {
+			var partial = this, dependentSelector;
+
+			dependentSelector = partial.params.fallbackDependentSelector.replace( /%d/g, String( partial.params.post_id ) );
+			if ( 0 === $( dependentSelector ).length ) {
+				return;
+			}
+
+			api.selectiveRefresh.partialConstructor.deferred.prototype.fallback.call( partial );
 		}
 	});
 
@@ -82,8 +158,8 @@ var CustomizePreviewFeaturedImage = (function( api, $ ) {
 	 * @returns {component.FeaturedImagePartial|null} New or existing featured image partial, or null if not relevant setting.
 	 */
 	component.ensurePartialForSetting = function ensurePartialForSetting( setting ) {
-		var ensuredPartial, partialId, matches = setting.id.match( /^postmeta\[.+?]\[(\d+)]\[_thumbnail_id]$/ );
-		if ( ! matches ) {
+		var ensuredPartial, partialId;
+		if ( ! component.FeaturedImagePartial.prototype.idPattern.test( setting.id ) ) {
 			return null;
 		}
 		partialId = setting.id;
@@ -93,10 +169,7 @@ var CustomizePreviewFeaturedImage = (function( api, $ ) {
 		}
 		ensuredPartial = new component.FeaturedImagePartial( partialId, {
 			params: {
-				selector: component.data.partialSelector,
-				settings: [ setting.id ],
-				primarySetting: setting.id,
-				containerInclusive: component.data.partialContainerInclusive
+				settings: [ setting.id ]
 			}
 		} );
 		api.selectiveRefresh.partial.add( partialId, ensuredPartial );