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.

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


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

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' ) );
+				} );
+			}
 		},
 
 		/**

wp-admin/js/widgets/media-gallery-widget.min.js

@@ -1 +1 @@
-!function(a){"use strict";var b,c,d;d=wp.media.view.MediaFrame.Post.extend({createStates:function(){this.states.add([new wp.media.controller.Library({id:"gallery",title:wp.media.view.l10n.createGalleryTitle,priority:40,toolbar:"main-gallery",filterable:"uploaded",multiple:"add",editable:!0,library:wp.media.query(_.defaults({type:"image"},this.options.library))}),new wp.media.controller.GalleryEdit({library:this.options.selection,editing:this.options.editing,menu:"gallery"}),new wp.media.controller.GalleryAdd])}}),b=a.MediaWidgetModel.extend({}),c=a.MediaWidgetControl.extend({events:_.extend({},a.MediaWidgetControl.prototype.events,{"click .media-widget-gallery-preview":"editMedia"}),initialize:function(b){var c=this;a.MediaWidgetControl.prototype.initialize.call(c,b),_.bindAll(c,"updateSelectedAttachments","handleAttachmentDestroy"),c.selectedAttachments=new wp.media.model.Attachments,c.model.on("change:ids",c.updateSelectedAttachments),c.selectedAttachments.on("change",c.renderPreview),c.selectedAttachments.on("reset",c.renderPreview),c.updateSelectedAttachments()},updateSelectedAttachments:function(){var a,b,c,d,e,f=this;a=f.model.get("ids"),b=_.pluck(f.selectedAttachments.models,"id"),c=_.difference(b,a),_.each(c,function(a){f.selectedAttachments.remove(f.selectedAttachments.get(a))}),d=_.difference(a,b),d.length&&(e=wp.media.query({order:"ASC",orderby:"post__in",perPage:-1,post__in:a,query:!0,type:"image"}),e.more().done(function(){f.selectedAttachments.reset(e.models)}))},renderPreview:function(){var a,b,c,d=this;a=d.$el.find(".media-widget-preview"),b=wp.template("wp-media-widget-gallery-preview"),c=d.previewTemplateProps.toJSON(),c.attachments={},d.selectedAttachments.each(function(a){c.attachments[a.id]=a.toJSON()}),a.html(b(c))},isSelected:function(){var a=this;return!a.model.get("error")&&a.model.get("ids").length>0},editMedia:function(){var a,b,c,e=this;a=new wp.media.model.Selection(e.selectedAttachments.models,{multiple:!0}),c=e.mapModelToMediaFrameProps(e.model.toJSON()),a.gallery=new Backbone.Model(_.pick(c,"columns","link","size","_orderbyRandom")),c.size&&e.displaySettings.set("size",c.size),b=new d({frame:"manage",text:e.l10n.add_to_widget,selection:a,mimeType:e.mime_type,selectedDisplaySettings:e.displaySettings,showDisplaySettings:e.showDisplaySettings,metadata:c,editing:!0,multiple:!0,state:"gallery-edit"}),wp.media.frame=b,b.on("update",function(a){var c,d=b.state();c=a||d.get("selection"),c&&(c.gallery&&e.model.set(e.mapMediaToModelProps(c.gallery.toJSON())),e.selectedAttachments.reset(c.models),e.model.set({ids:_.pluck(c.models,"id")}))}),b.$el.addClass("media-widget"),b.open(),a&&a.on("destroy",e.handleAttachmentDestroy)},selectMedia:function(){var a,b,c,e=this;a=new wp.media.model.Selection(e.selectedAttachments.models,{multiple:!0}),c=e.mapModelToMediaFrameProps(e.model.toJSON()),c.size&&e.displaySettings.set("size",c.size),b=new d({frame:"select",text:e.l10n.add_to_widget,selection:a,mimeType:e.mime_type,selectedDisplaySettings:e.displaySettings,showDisplaySettings:e.showDisplaySettings,metadata:c,state:"gallery"}),wp.media.frame=b,b.on("update",function(a){var c,d=b.state();c=a||d.get("selection"),c&&(c.gallery&&e.model.set(e.mapMediaToModelProps(c.gallery.toJSON())),e.selectedAttachments.reset(c.models),e.model.set({ids:_.pluck(c.models,"id")}))}),b.$el.addClass("media-widget"),b.open(),a&&a.on("destroy",e.handleAttachmentDestroy),b.$el.find(":focusable:first").focus()},handleAttachmentDestroy:function(a){var b=this;b.model.set({ids:_.difference(b.model.get("ids"),[a.id])})}}),a.controlConstructors.media_gallery=c,a.modelConstructors.media_gallery=b}(wp.mediaWidgets);
+!function(a){"use strict";var b,c,d;d=wp.media.view.MediaFrame.Post.extend({createStates:function(){this.states.add([new wp.media.controller.Library({id:"gallery",title:wp.media.view.l10n.createGalleryTitle,priority:40,toolbar:"main-gallery",filterable:"uploaded",multiple:"add",editable:!0,library:wp.media.query(_.defaults({type:"image"},this.options.library))}),new wp.media.controller.GalleryEdit({library:this.options.selection,editing:this.options.editing,menu:"gallery"}),new wp.media.controller.GalleryAdd])}}),b=a.MediaWidgetModel.extend({}),c=a.MediaWidgetControl.extend({events:_.extend({},a.MediaWidgetControl.prototype.events,{"click .media-widget-gallery-preview":"editMedia"}),initialize:function(b){var c=this;a.MediaWidgetControl.prototype.initialize.call(c,b),_.bindAll(c,"updateSelectedAttachments","handleAttachmentDestroy"),c.selectedAttachments=new wp.media.model.Attachments,c.model.on("change:ids",c.updateSelectedAttachments),c.selectedAttachments.on("change",c.renderPreview),c.selectedAttachments.on("reset",c.renderPreview),c.updateSelectedAttachments(),wp.customize&&wp.customize.previewer&&c.selectedAttachments.on("change",function(){wp.customize.previewer.send("refresh-widget-partial",c.model.get("widget_id"))})},updateSelectedAttachments:function(){var a,b,c,d,e,f=this;a=f.model.get("ids"),b=_.pluck(f.selectedAttachments.models,"id"),c=_.difference(b,a),_.each(c,function(a){f.selectedAttachments.remove(f.selectedAttachments.get(a))}),d=_.difference(a,b),d.length&&(e=wp.media.query({order:"ASC",orderby:"post__in",perPage:-1,post__in:a,query:!0,type:"image"}),e.more().done(function(){f.selectedAttachments.reset(e.models)}))},renderPreview:function(){var a,b,c,d=this;a=d.$el.find(".media-widget-preview"),b=wp.template("wp-media-widget-gallery-preview"),c=d.previewTemplateProps.toJSON(),c.attachments={},d.selectedAttachments.each(function(a){c.attachments[a.id]=a.toJSON()}),a.html(b(c))},isSelected:function(){var a=this;return!a.model.get("error")&&a.model.get("ids").length>0},editMedia:function(){var a,b,c,e=this;a=new wp.media.model.Selection(e.selectedAttachments.models,{multiple:!0}),c=e.mapModelToMediaFrameProps(e.model.toJSON()),a.gallery=new Backbone.Model(_.pick(c,"columns","link","size","_orderbyRandom")),c.size&&e.displaySettings.set("size",c.size),b=new d({frame:"manage",text:e.l10n.add_to_widget,selection:a,mimeType:e.mime_type,selectedDisplaySettings:e.displaySettings,showDisplaySettings:e.showDisplaySettings,metadata:c,editing:!0,multiple:!0,state:"gallery-edit"}),wp.media.frame=b,b.on("update",function(a){var c,d=b.state();c=a||d.get("selection"),c&&(c.gallery&&e.model.set(e.mapMediaToModelProps(c.gallery.toJSON())),e.selectedAttachments.reset(c.models),e.model.set({ids:_.pluck(c.models,"id")}))}),b.$el.addClass("media-widget"),b.open(),a&&a.on("destroy",e.handleAttachmentDestroy)},selectMedia:function(){var a,b,c,e=this;a=new wp.media.model.Selection(e.selectedAttachments.models,{multiple:!0}),c=e.mapModelToMediaFrameProps(e.model.toJSON()),c.size&&e.displaySettings.set("size",c.size),b=new d({frame:"select",text:e.l10n.add_to_widget,selection:a,mimeType:e.mime_type,selectedDisplaySettings:e.displaySettings,showDisplaySettings:e.showDisplaySettings,metadata:c,state:"gallery"}),wp.media.frame=b,b.on("update",function(a){var c,d=b.state();c=a||d.get("selection"),c&&(c.gallery&&e.model.set(e.mapMediaToModelProps(c.gallery.toJSON())),e.selectedAttachments.reset(c.models),e.model.set({ids:_.pluck(c.models,"id")}))}),b.$el.addClass("media-widget"),b.open(),a&&a.on("destroy",e.handleAttachmentDestroy),b.$el.find(":focusable:first").focus()},handleAttachmentDestroy:function(a){var b=this;b.model.set({ids:_.difference(b.model.get("ids"),[a.id])})}}),a.controlConstructors.media_gallery=c,a.modelConstructors.media_gallery=b}(wp.mediaWidgets);

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 ) {

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.9-beta2-41871';
+$wp_version = '4.9-beta2-41872';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.