From 850db3c6a05af31efdd4ec982536cae4c496ae61 Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@git.wordpress.org>
Date: Mon, 16 Oct 2017 06:45:09 +0000
Subject: [PATCH] Widgets: Update preview for Gallery widget when one of its
 attachments is modified in the media modal, outside the customized state.

* Ensure that changes to captions are shown in preview when modified in media modal.
* Also keep `wp.customize.widgetsPreview.renderedWidgets` updated when widgets are added or removed.

See #41914, #37887, #40403.
Fixes #41979.


git-svn-id: https://develop.svn.wordpress.org/trunk@41872 602fd350-edb4-49c9-b593-d223f7449a82
---
 .../js/widgets/media-gallery-widget.js        | 15 ++++++++++++++
 .../js/customize-preview-widgets.js           | 20 +++++++++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/src/wp-admin/js/widgets/media-gallery-widget.js b/src/wp-admin/js/widgets/media-gallery-widget.js
index f569968e89..7d0d191c20 100644
--- a/src/wp-admin/js/widgets/media-gallery-widget.js
+++ b/src/wp-admin/js/widgets/media-gallery-widget.js
@@ -100,6 +100,21 @@
 			control.selectedAttachments.on( 'change', control.renderPreview );
 			control.selectedAttachments.on( 'reset', control.renderPreview );
 			control.updateSelectedAttachments();
+
+			/*
+			 * Refresh a Gallery widget partial when the user modifies one of the selected attachments.
+			 * This ensures that when an attachment's caption is updated in the media modal the Gallery
+			 * widget in the preview will then be refreshed to show the change. Normally doing this
+			 * would not be necessary because all of the state should be contained inside the changeset,
+			 * as everything done in the Customizer should not make a change to the site unless the
+			 * changeset itself is published. Attachments are a current exception to this rule.
+			 * For a proposal to include attachments in the customized state, see #37887.
+			 */
+			if ( wp.customize && wp.customize.previewer ) {
+				control.selectedAttachments.on( 'change', function() {
+					wp.customize.previewer.send( 'refresh-widget-partial', control.model.get( 'widget_id' ) );
+				} );
+			}
 		},
 
 		/**
diff --git a/src/wp-includes/js/customize-preview-widgets.js b/src/wp-includes/js/customize-preview-widgets.js
index b2a60d892c..31f5aface7 100644
--- a/src/wp-includes/js/customize-preview-widgets.js
+++ b/src/wp-includes/js/customize-preview-widgets.js
@@ -39,6 +39,24 @@ wp.customize.widgetsPreview = wp.customize.WidgetCustomizerPreview = (function(
 		api.preview.bind( 'active', function() {
 			self.highlightControls();
 		} );
+
+		/*
+		 * Refresh a partial when the controls pane requests it. This is used currently just by the
+		 * Gallery widget so that when an attachment's caption is updated in the media modal,
+		 * the widget in the preview will then be refreshed to show the change. Normally doing this
+		 * would not be necessary because all of the state should be contained inside the changeset,
+		 * as everything done in the Customizer should not make a change to the site unless the
+		 * changeset itself is published. Attachments are a current exception to this rule.
+		 * For a proposal to include attachments in the customized state, see #37887.
+		 */
+		api.preview.bind( 'refresh-widget-partial', function( widgetId ) {
+			var partialId = 'widget[' + widgetId + ']';
+			if ( api.selectiveRefresh.partial.has( partialId ) ) {
+				api.selectiveRefresh.partial( partialId ).refresh();
+			} else if ( self.renderedWidgets[ widgetId ] ) {
+				api.preview.send( 'refresh' ); // Fallback in case theme does not support 'customize-selective-refresh-widgets'.
+			}
+		} );
 	};
 
 	/**
@@ -451,6 +469,7 @@ wp.customize.widgetsPreview = wp.customize.WidgetCustomizerPreview = (function(
 						}
 					} );
 				}
+				delete self.renderedWidgets[ removedWidgetId ];
 			} );
 
 			// Handle insertion of widgets.
@@ -458,6 +477,7 @@ wp.customize.widgetsPreview = wp.customize.WidgetCustomizerPreview = (function(
 			_.each( widgetsAdded, function( addedWidgetId ) {
 				var widgetPartial = sidebarPartial.ensureWidgetPlacementContainers( addedWidgetId );
 				addedWidgetPartials.push( widgetPartial );
+				self.renderedWidgets[ addedWidgetId ] = true;
 			} );
 
 			_.each( addedWidgetPartials, function( widgetPartial ) {