Widgets: Introduce Gallery widget for displaying image galleries.

* Galleries are managed in the widget in the same way they are managed in the post editor, both using the media manager.
* Gallery widget is merged from the Core Media Widgets v0.2.0 feature plugin and it extends `WP_Widget_Media` in the same way as is done for image, audio, and video widgets.
* Model syncing logic is updated to support booleans and arrays (of integers).
* Placeholder areas in media widgets are now clickable shortcuts for selecting media.
* Image widget placeholder is updated to match gallery widget where clicking preview is shortcut for editing media.

Props westonruter, joemcgill, timmydcrawford, m1tk00, obenland, melchoyce.
See #32417.
Fixes #41914.

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


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

wp-admin/css/widgets-rtl.css

@@ -87,7 +87,7 @@
 .media-widget-control .placeholder {
 	border: 1px dashed #b4b9be;
 	box-sizing: border-box;
-	cursor: default;
+	cursor: pointer;
 	line-height: 20px;
 	padding: 9px 0;
 	position: relative;
@@ -162,6 +162,71 @@
 	margin: 1em 0;
 }
 
+.media-widget-gallery-preview {
+	display: -webkit-box;
+	display: flex;
+	-webkit-box-pack: start;
+	justify-content: flex-start;
+	flex-wrap: wrap;
+}
+
+.media-widget-preview.media_gallery,
+.media-widget-preview.media_image {
+	cursor: pointer;
+}
+
+.media-widget-gallery-preview .gallery-item {
+	box-sizing: border-box;
+	width: 50%;
+	margin: 0;
+	padding: 1.79104477%;
+}
+
+/*
+ * Use targeted nth-last-child selectors to control the size of each image
+ * based on how many gallery items are present in the grid.
+ * See: https://alistapart.com/article/quantity-queries-for-css
+ */
+.media-widget-gallery-preview .gallery-item:nth-last-child(3):first-child,
+.media-widget-gallery-preview .gallery-item:nth-last-child(3):first-child ~ .gallery-item,
+.media-widget-gallery-preview .gallery-item:nth-last-child(n+5),
+.media-widget-gallery-preview .gallery-item:nth-last-child(n+5) ~ .gallery-item,
+.media-widget-gallery-preview .gallery-item:nth-last-child(n+6),
+.media-widget-gallery-preview .gallery-item:nth-last-child(n+6) ~ .gallery-item {
+	max-width: 33.33%;
+}
+
+.media-widget-gallery-preview .gallery-item img {
+	height: auto;
+	vertical-align: bottom;
+}
+
+.media-widget-gallery-preview .gallery-icon {
+	position: relative;
+}
+
+.media-widget-gallery-preview .gallery-icon-placeholder {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	width: 100%;
+	box-sizing: border-box;
+	display: -webkit-box;
+	display: flex;
+	-webkit-box-align: center;
+	align-items: center;
+	-webkit-box-pack: center;
+	justify-content: center;
+	background-color: rgba( 0, 0, 0, .5 );
+}
+
+.media-widget-gallery-preview .gallery-icon-placeholder-text {
+	font-weight: 600;
+	font-size: 2em;
+	color: white;
+}
+
+
 /* Widget Dragging Helpers */
 .widget.ui-draggable-dragging {
 	min-width: 100%;

wp-admin/css/widgets.css

@@ -87,7 +87,7 @@
 .media-widget-control .placeholder {
 	border: 1px dashed #b4b9be;
 	box-sizing: border-box;
-	cursor: default;
+	cursor: pointer;
 	line-height: 20px;
 	padding: 9px 0;
 	position: relative;
@@ -162,6 +162,71 @@
 	margin: 1em 0;
 }
 
+.media-widget-gallery-preview {
+	display: -webkit-box;
+	display: flex;
+	-webkit-box-pack: start;
+	justify-content: flex-start;
+	flex-wrap: wrap;
+}
+
+.media-widget-preview.media_gallery,
+.media-widget-preview.media_image {
+	cursor: pointer;
+}
+
+.media-widget-gallery-preview .gallery-item {
+	box-sizing: border-box;
+	width: 50%;
+	margin: 0;
+	padding: 1.79104477%;
+}
+
+/*
+ * Use targeted nth-last-child selectors to control the size of each image
+ * based on how many gallery items are present in the grid.
+ * See: https://alistapart.com/article/quantity-queries-for-css
+ */
+.media-widget-gallery-preview .gallery-item:nth-last-child(3):first-child,
+.media-widget-gallery-preview .gallery-item:nth-last-child(3):first-child ~ .gallery-item,
+.media-widget-gallery-preview .gallery-item:nth-last-child(n+5),
+.media-widget-gallery-preview .gallery-item:nth-last-child(n+5) ~ .gallery-item,
+.media-widget-gallery-preview .gallery-item:nth-last-child(n+6),
+.media-widget-gallery-preview .gallery-item:nth-last-child(n+6) ~ .gallery-item {
+	max-width: 33.33%;
+}
+
+.media-widget-gallery-preview .gallery-item img {
+	height: auto;
+	vertical-align: bottom;
+}
+
+.media-widget-gallery-preview .gallery-icon {
+	position: relative;
+}
+
+.media-widget-gallery-preview .gallery-icon-placeholder {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	width: 100%;
+	box-sizing: border-box;
+	display: -webkit-box;
+	display: flex;
+	-webkit-box-align: center;
+	align-items: center;
+	-webkit-box-pack: center;
+	justify-content: center;
+	background-color: rgba( 0, 0, 0, .5 );
+}
+
+.media-widget-gallery-preview .gallery-icon-placeholder-text {
+	font-weight: 600;
+	font-size: 2em;
+	color: white;
+}
+
+
 /* Widget Dragging Helpers */
 .widget.ui-draggable-dragging {
 	min-width: 100%;

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

@@ -0,0 +1,325 @@
+/* eslint consistent-this: [ "error", "control" ] */
+(function( component ) {
+	'use strict';
+
+	var GalleryWidgetModel, GalleryWidgetControl, GalleryDetailsMediaFrame;
+
+	/**
+	 * Custom gallery details frame.
+	 *
+	 * @since 4.9.0
+	 * @class GalleryDetailsMediaFrame
+	 * @constructor
+	 */
+	GalleryDetailsMediaFrame = wp.media.view.MediaFrame.Post.extend( {
+
+		/**
+		 * Create the default states.
+		 *
+		 * @since 4.9.0
+		 * @returns {void}
+		 */
+		createStates: function createStates() {
+			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:   true,
+
+					library:  wp.media.query( _.defaults({
+						type: 'image'
+					}, this.options.library ) )
+				}),
+
+				// Gallery states.
+				new wp.media.controller.GalleryEdit({
+					library: this.options.selection,
+					editing: this.options.editing,
+					menu:    'gallery'
+				}),
+
+				new wp.media.controller.GalleryAdd()
+			]);
+		}
+	} );
+
+	/**
+	 * Gallery widget model.
+	 *
+	 * See WP_Widget_Gallery::enqueue_admin_scripts() for amending prototype from PHP exports.
+	 *
+	 * @since 4.9.0
+	 * @class GalleryWidgetModel
+	 * @constructor
+	 */
+	GalleryWidgetModel = component.MediaWidgetModel.extend( {} );
+
+	/**
+	 * Gallery widget control.
+	 *
+	 * See WP_Widget_Gallery::enqueue_admin_scripts() for amending prototype from PHP exports.
+	 *
+	 * @since 4.9.0
+	 * @class GalleryWidgetControl
+	 * @constructor
+	 */
+	GalleryWidgetControl = component.MediaWidgetControl.extend( {
+
+		/**
+		 * View events.
+		 *
+		 * @since 4.9.0
+		 * @type {object}
+		 */
+		events: _.extend( {}, component.MediaWidgetControl.prototype.events, {
+			'click .media-widget-gallery-preview': 'editMedia'
+		} ),
+
+		/**
+		 * Initialize.
+		 *
+		 * @since 4.9.0
+		 * @param {Object}         options - Options.
+		 * @param {Backbone.Model} options.model - Model.
+		 * @param {jQuery}         options.el - Control field container element.
+		 * @param {jQuery}         options.syncContainer - Container element where fields are synced for the server.
+		 * @returns {void}
+		 */
+		initialize: function initialize( options ) {
+			var control = this;
+
+			component.MediaWidgetControl.prototype.initialize.call( control, options );
+
+			_.bindAll( control, 'updateSelectedAttachments', 'handleAttachmentDestroy' );
+			control.selectedAttachments = new wp.media.model.Attachments();
+			control.model.on( 'change:ids', control.updateSelectedAttachments );
+			control.selectedAttachments.on( 'change', control.renderPreview );
+			control.selectedAttachments.on( 'reset', control.renderPreview );
+			control.updateSelectedAttachments();
+		},
+
+		/**
+		 * Update the selected attachments if necessary.
+		 *
+		 * @since 4.9.0
+		 * @returns {void}
+		 */
+		updateSelectedAttachments: function updateSelectedAttachments() {
+			var control = this, newIds, oldIds, removedIds, addedIds, addedQuery;
+
+			newIds = control.model.get( 'ids' );
+			oldIds = _.pluck( control.selectedAttachments.models, 'id' );
+
+			removedIds = _.difference( oldIds, newIds );
+			_.each( removedIds, function( removedId ) {
+				control.selectedAttachments.remove( control.selectedAttachments.get( removedId ) );
+			});
+
+			addedIds = _.difference( newIds, oldIds );
+			if ( addedIds.length ) {
+				addedQuery = wp.media.query({
+					order: 'ASC',
+					orderby: 'post__in',
+					perPage: -1,
+					post__in: newIds,
+					query: true,
+					type: 'image'
+				});
+				addedQuery.more().done( function() {
+					control.selectedAttachments.reset( addedQuery.models );
+				});
+			}
+		},
+
+		/**
+		 * Render preview.
+		 *
+		 * @since 4.9.0
+		 * @returns {void}
+		 */
+		renderPreview: function renderPreview() {
+			var control = this, previewContainer, previewTemplate, data;
+
+			previewContainer = control.$el.find( '.media-widget-preview' );
+			previewTemplate = wp.template( 'wp-media-widget-gallery-preview' );
+
+			data = control.previewTemplateProps.toJSON();
+			data.attachments = {};
+			control.selectedAttachments.each( function( attachment ) {
+				data.attachments[ attachment.id ] = attachment.toJSON();
+			} );
+
+			previewContainer.html( previewTemplate( data ) );
+		},
+
+		/**
+		 * Determine whether there are selected attachments.
+		 *
+		 * @since 4.9.0
+		 * @returns {boolean} Selected.
+		 */
+		isSelected: function isSelected() {
+			var control = this;
+
+			if ( control.model.get( 'error' ) ) {
+				return false;
+			}
+
+			return control.model.get( 'ids' ).length > 0;
+		},
+
+		/**
+		 * Open the media select frame to edit images.
+		 *
+		 * @since 4.9.0
+		 * @returns {void}
+		 */
+		editMedia: function editMedia() {
+			var control = this, selection, mediaFrame, mediaFrameProps;
+
+			selection = new wp.media.model.Selection( control.selectedAttachments.models, {
+				multiple: true
+			});
+
+			mediaFrameProps = control.mapModelToMediaFrameProps( control.model.toJSON() );
+			selection.gallery = new Backbone.Model( _.pick( mediaFrameProps, 'columns', 'link', 'size', '_orderbyRandom' ) );
+			if ( mediaFrameProps.size ) {
+				control.displaySettings.set( 'size', mediaFrameProps.size );
+			}
+			mediaFrame = new GalleryDetailsMediaFrame({
+				frame: 'manage',
+				text: control.l10n.add_to_widget,
+				selection: selection,
+				mimeType: control.mime_type,
+				selectedDisplaySettings: control.displaySettings,
+				showDisplaySettings: control.showDisplaySettings,
+				metadata: mediaFrameProps,
+				editing:   true,
+				multiple:  true,
+				state: 'gallery-edit'
+			});
+			wp.media.frame = mediaFrame; // See wp.media().
+
+			// Handle selection of a media item.
+			mediaFrame.on( 'update', function onUpdate( newSelection ) {
+				var state = mediaFrame.state(), resultSelection;
+
+				resultSelection = newSelection || state.get( 'selection' );
+				if ( ! resultSelection ) {
+					return;
+				}
+
+				// Copy orderby_random from gallery state.
+				if ( resultSelection.gallery ) {
+					control.model.set( control.mapMediaToModelProps( resultSelection.gallery.toJSON() ) );
+				}
+
+				// Directly update selectedAttachments to prevent needing to do additional request.
+				control.selectedAttachments.reset( resultSelection.models );
+
+				// Update models in the widget instance.
+				control.model.set( {
+					ids: _.pluck( resultSelection.models, 'id' )
+				} );
+			} );
+
+			mediaFrame.$el.addClass( 'media-widget' );
+			mediaFrame.open();
+
+			if ( selection ) {
+				selection.on( 'destroy', control.handleAttachmentDestroy );
+			}
+		},
+
+		/**
+		 * Open the media select frame to chose an item.
+		 *
+		 * @since 4.9.0
+		 * @returns {void}
+		 */
+		selectMedia: function selectMedia() {
+			var control = this, selection, mediaFrame, mediaFrameProps;
+			selection = new wp.media.model.Selection( control.selectedAttachments.models, {
+				multiple: true
+			});
+
+			mediaFrameProps = control.mapModelToMediaFrameProps( control.model.toJSON() );
+			if ( mediaFrameProps.size ) {
+				control.displaySettings.set( 'size', mediaFrameProps.size );
+			}
+			mediaFrame = new GalleryDetailsMediaFrame({
+				frame: 'select',
+				text: control.l10n.add_to_widget,
+				selection: selection,
+				mimeType: control.mime_type,
+				selectedDisplaySettings: control.displaySettings,
+				showDisplaySettings: control.showDisplaySettings,
+				metadata: mediaFrameProps,
+				state: 'gallery'
+			});
+			wp.media.frame = mediaFrame; // See wp.media().
+
+			// Handle selection of a media item.
+			mediaFrame.on( 'update', function onUpdate( newSelection ) {
+				var state = mediaFrame.state(), resultSelection;
+
+				resultSelection = newSelection || state.get( 'selection' );
+				if ( ! resultSelection ) {
+					return;
+				}
+
+				// Copy orderby_random from gallery state.
+				if ( resultSelection.gallery ) {
+					control.model.set( control.mapMediaToModelProps( resultSelection.gallery.toJSON() ) );
+				}
+
+				// Directly update selectedAttachments to prevent needing to do additional request.
+				control.selectedAttachments.reset( resultSelection.models );
+
+				// Update widget instance.
+				control.model.set( {
+					ids: _.pluck( resultSelection.models, 'id' )
+				} );
+			} );
+
+			mediaFrame.$el.addClass( 'media-widget' );
+			mediaFrame.open();
+
+			if ( selection ) {
+				selection.on( 'destroy', control.handleAttachmentDestroy );
+			}
+
+			/*
+			 * Make sure focus is set inside of modal so that hitting Esc will close
+			 * the modal and not inadvertently cause the widget to collapse in the customizer.
+			 */
+			mediaFrame.$el.find( ':focusable:first' ).focus();
+		},
+
+		/**
+		 * Clear the selected attachment when it is deleted in the media select frame.
+		 *
+		 * @since 4.9.0
+		 * @param {wp.media.models.Attachment} attachment - Attachment.
+		 * @returns {void}
+		 */
+		handleAttachmentDestroy: function handleAttachmentDestroy( attachment ) {
+			var control = this;
+			control.model.set( {
+				ids: _.difference(
+					control.model.get( 'ids' ),
+					[ attachment.id ]
+				)
+			} );
+		}
+	} );
+
+	// Exports.
+	component.controlConstructors.media_gallery = GalleryWidgetControl;
+	component.modelConstructors.media_gallery = GalleryWidgetModel;
+
+})( wp.mediaWidgets );

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

@@ -0,0 +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);

wp-admin/js/widgets/media-image-widget.js

@@ -24,6 +24,15 @@
 	 */
 	ImageWidgetControl = component.MediaWidgetControl.extend({
 
+		/**
+		 * View events.
+		 *
+		 * @type {object}
+		 */
+		events: _.extend( {}, component.MediaWidgetControl.prototype.events, {
+			'click .media-widget-preview.populated': 'editMedia'
+		} ),
+
 		/**
 		 * Render preview.
 		 *
@@ -38,6 +47,7 @@
 			previewContainer = control.$el.find( '.media-widget-preview' );
 			previewTemplate = wp.template( 'wp-media-widget-image-preview' );
 			previewContainer.html( previewTemplate( control.previewTemplateProps.toJSON() ) );
+			previewContainer.addClass( 'populated' );
 
 			linkInput = control.$el.find( '.link' );
 			if ( ! linkInput.is( document.activeElement ) ) {

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

@@ -1 +1 @@
-!function(a,b){"use strict";var c,d;c=a.MediaWidgetModel.extend({}),d=a.MediaWidgetControl.extend({renderPreview:function(){var a,b,c,d,e,f=this;(f.model.get("attachment_id")||f.model.get("url"))&&(a=f.$el.find(".media-widget-preview"),b=wp.template("wp-media-widget-image-preview"),a.html(b(f.previewTemplateProps.toJSON())),e=f.$el.find(".link"),e.is(document.activeElement)||(c=f.$el.find(".media-widget-fields"),d=wp.template("wp-media-widget-image-fields"),c.html(d(f.previewTemplateProps.toJSON()))))},editMedia:function(){var a,c,d,e,f=this;e=f.mapModelToMediaFrameProps(f.model.toJSON()),"none"===e.link&&(e.linkUrl=""),a=wp.media({frame:"image",state:"image-details",metadata:e}),a.$el.addClass("media-widget"),c=function(){var b,c;b=a.state().attributes.image.toJSON(),c=b.link,b.link=b.linkUrl,f.selectedAttachment.set(b),f.displaySettings.set("link",c),f.model.set(_.extend(f.mapMediaToModelProps(b),{error:!1}))},a.state("image-details").on("update",c),a.state("replace-image").on("replace",c),d=wp.media.model.Attachment.prototype.sync,wp.media.model.Attachment.prototype.sync=function(){return b.Deferred().rejectWith(this).promise()},a.on("close",function(){a.detach(),wp.media.model.Attachment.prototype.sync=d}),a.open()},getEmbedResetProps:function(){return _.extend(a.MediaWidgetControl.prototype.getEmbedResetProps.call(this),{size:"full",width:0,height:0})},getModelPropsFromMediaFrame:function(b){var c=this;return _.omit(a.MediaWidgetControl.prototype.getModelPropsFromMediaFrame.call(c,b),"image_title")},mapModelToPreviewTemplateProps:function(){var b,c,d=this;return c=d.model.get("url"),b=a.MediaWidgetControl.prototype.mapModelToPreviewTemplateProps.call(d),b.currentFilename=c?c.replace(/\?.*$/,"").replace(/^.+\//,""):"",b.link_url=d.model.get("link_url"),b}}),a.controlConstructors.media_image=d,a.modelConstructors.media_image=c}(wp.mediaWidgets,jQuery);
+!function(a,b){"use strict";var c,d;c=a.MediaWidgetModel.extend({}),d=a.MediaWidgetControl.extend({events:_.extend({},a.MediaWidgetControl.prototype.events,{"click .media-widget-preview.populated":"editMedia"}),renderPreview:function(){var a,b,c,d,e,f=this;(f.model.get("attachment_id")||f.model.get("url"))&&(a=f.$el.find(".media-widget-preview"),b=wp.template("wp-media-widget-image-preview"),a.html(b(f.previewTemplateProps.toJSON())),a.addClass("populated"),e=f.$el.find(".link"),e.is(document.activeElement)||(c=f.$el.find(".media-widget-fields"),d=wp.template("wp-media-widget-image-fields"),c.html(d(f.previewTemplateProps.toJSON()))))},editMedia:function(){var a,c,d,e,f=this;e=f.mapModelToMediaFrameProps(f.model.toJSON()),"none"===e.link&&(e.linkUrl=""),a=wp.media({frame:"image",state:"image-details",metadata:e}),a.$el.addClass("media-widget"),c=function(){var b,c;b=a.state().attributes.image.toJSON(),c=b.link,b.link=b.linkUrl,f.selectedAttachment.set(b),f.displaySettings.set("link",c),f.model.set(_.extend(f.mapMediaToModelProps(b),{error:!1}))},a.state("image-details").on("update",c),a.state("replace-image").on("replace",c),d=wp.media.model.Attachment.prototype.sync,wp.media.model.Attachment.prototype.sync=function(){return b.Deferred().rejectWith(this).promise()},a.on("close",function(){a.detach(),wp.media.model.Attachment.prototype.sync=d}),a.open()},getEmbedResetProps:function(){return _.extend(a.MediaWidgetControl.prototype.getEmbedResetProps.call(this),{size:"full",width:0,height:0})},getModelPropsFromMediaFrame:function(b){var c=this;return _.omit(a.MediaWidgetControl.prototype.getModelPropsFromMediaFrame.call(c,b),"image_title")},mapModelToPreviewTemplateProps:function(){var b,c,d=this;return c=d.model.get("url"),b=a.MediaWidgetControl.prototype.mapModelToPreviewTemplateProps.call(d),b.currentFilename=c?c.replace(/\?.*$/,"").replace(/^.+\//,""):"",b.link_url=d.model.get("link_url"),b}}),a.controlConstructors.media_image=d,a.modelConstructors.media_image=c}(wp.mediaWidgets,jQuery);

wp-admin/js/widgets/media-widgets.js

@@ -429,6 +429,7 @@ wp.mediaWidgets = ( function( $ ) {
 		events: {
 			'click .notice-missing-attachment a': 'handleMediaLibraryLinkClick',
 			'click .select-media': 'selectMedia',
+			'click .placeholder': 'selectMedia',
 			'click .edit-media': 'editMedia'
 		},
 
@@ -591,17 +592,25 @@ wp.mediaWidgets = ( function( $ ) {
 		syncModelToInputs: function syncModelToInputs() {
 			var control = this;
 			control.syncContainer.find( '.media-widget-instance-property' ).each( function() {
-				var input = $( this ), value;
+				var input = $( this ), value, propertyName;
-				value = control.model.get( input.data( 'property' ) );
+				propertyName = input.data( 'property' );
+				value = control.model.get( propertyName );
 				if ( _.isUndefined( value ) ) {
 					return;
 				}
-				value = String( value );
+
-				if ( input.val() === value ) {
+				if ( 'array' === control.model.schema[ propertyName ].type && _.isArray( value ) ) {
-					return;
+					value = value.join( ',' );
+				} else if ( 'boolean' === control.model.schema[ propertyName ].type ) {
+					value = value ? '1' : ''; // Because in PHP, strval( true ) === '1' && strval( false ) === ''.
+				} else {
+					value = String( value );
+				}
+
+				if ( input.val() !== value ) {
+					input.val( value );
+					input.trigger( 'change' );
 				}
-				input.val( value );
-				input.trigger( 'change' );
 			});
 		},
 
@@ -1002,7 +1011,22 @@ wp.mediaWidgets = ( function( $ ) {
 					return;
 				}
 				type = model.schema[ name ].type;
-				if ( 'integer' === type ) {
+				if ( 'array' === type ) {
+					castedAttrs[ name ] = value;
+					if ( ! _.isArray( castedAttrs[ name ] ) ) {
+						castedAttrs[ name ] = castedAttrs[ name ].split( /,/ ); // Good enough for parsing an ID list.
+					}
+					if ( model.schema[ name ].items && 'integer' === model.schema[ name ].items.type ) {
+						castedAttrs[ name ] = _.filter(
+							_.map( castedAttrs[ name ], function( id ) {
+								return parseInt( id, 10 );
+							},
+							function( id ) {
+								return 'number' === typeof id;
+							}
+						) );
+					}
+				} else if ( 'integer' === type ) {
 					castedAttrs[ name ] = parseInt( value, 10 );
 				} else if ( 'boolean' === type ) {
 					castedAttrs[ name ] = ! ( ! value || '0' === value || 'false' === value );

wp-includes/default-widgets.php

@@ -31,6 +31,9 @@ require_once( ABSPATH . WPINC . '/widgets/class-wp-widget-media-image.php' );
 /** WP_Widget_Media_Video class */
 require_once( ABSPATH . WPINC . '/widgets/class-wp-widget-media-video.php' );
 
+/** WP_Widget_Media_Gallery class */
+require_once( ABSPATH . WPINC . '/widgets/class-wp-widget-media-gallery.php' );
+
 /** WP_Widget_Meta class */
 require_once( ABSPATH . WPINC . '/widgets/class-wp-widget-meta.php' );
 

wp-includes/script-loader.php

@@ -699,6 +699,7 @@ function wp_default_scripts( &$scripts ) {
 
 		$scripts->add( 'media-audio-widget', "/wp-admin/js/widgets/media-audio-widget$suffix.js", array( 'media-widgets', 'media-audiovideo' ) );
 		$scripts->add( 'media-image-widget', "/wp-admin/js/widgets/media-image-widget$suffix.js", array( 'media-widgets' ) );
+		$scripts->add( 'media-gallery-widget', "/wp-admin/js/widgets/media-gallery-widget$suffix.js", array( 'media-widgets' ) );
 		$scripts->add( 'media-video-widget', "/wp-admin/js/widgets/media-video-widget$suffix.js", array( 'media-widgets', 'media-audiovideo', 'wp-api-request' ) );
 		$scripts->add( 'text-widgets', "/wp-admin/js/widgets/text-widgets$suffix.js", array( 'jquery', 'backbone', 'editor', 'wp-util', 'wp-a11y' ) );
 		$scripts->add( 'custom-html-widgets', "/wp-admin/js/widgets/custom-html-widgets$suffix.js", array( 'code-editor', 'jquery', 'backbone', 'wp-util', 'jquery-ui-core', 'wp-a11y' ) );

wp-includes/version.php

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

wp-includes/widgets.php

@@ -1609,6 +1609,8 @@ function wp_widgets_init() {
 
 	register_widget( 'WP_Widget_Media_Image' );
 
+	register_widget( 'WP_Widget_Media_Gallery' );
+
 	register_widget( 'WP_Widget_Media_Video' );
 
 	register_widget( 'WP_Widget_Meta' );

wp-includes/widgets/class-wp-widget-media-gallery.php

@@ -0,0 +1,224 @@
+<?php
+/**
+ * Widget API: WP_Widget_Media_Gallery class
+ *
+ * @package WordPress
+ * @subpackage Widgets
+ * @since 4.9.0
+ */
+
+/**
+ * Core class that implements a gallery widget.
+ *
+ * @since 4.9.0
+ *
+ * @see WP_Widget
+ */
+class WP_Widget_Media_Gallery extends WP_Widget_Media {
+
+	/**
+	 * Constructor.
+	 *
+	 * @since 4.9.0
+	 */
+	public function __construct() {
+		parent::__construct( 'media_gallery', __( 'Gallery' ), array(
+			'description' => __( 'Displays an image gallery.' ),
+			'mime_type'   => 'image',
+		) );
+
+		$this->l10n = array_merge( $this->l10n, array(
+			'no_media_selected' => __( 'No images selected' ),
+			'add_media' => _x( 'Select Images', 'label for button in the gallery widget; should not be longer than ~13 characters long' ),
+			'replace_media' => _x( 'Replace Gallery', 'label for button in the gallery widget; should not be longer than ~13 characters long' ),
+			'edit_media' => _x( 'Edit Gallery', 'label for button in the gallery widget; should not be longer than ~13 characters long' ),
+		) );
+	}
+
+	/**
+	 * Get schema for properties of a widget instance (item).
+	 *
+	 * @since 4.9.0
+	 *
+	 * @see WP_REST_Controller::get_item_schema()
+	 * @see WP_REST_Controller::get_additional_fields()
+	 * @link https://core.trac.wordpress.org/ticket/35574
+	 * @return array Schema for properties.
+	 */
+	public function get_instance_schema() {
+		return array(
+			'title' => array(
+				'type' => 'string',
+				'default' => '',
+				'sanitize_callback' => 'sanitize_text_field',
+				'description' => __( 'Title for the widget' ),
+				'should_preview_update' => false,
+			),
+			'ids' => array(
+				'type' => 'array',
+				'items' => array(
+					'type' => 'integer',
+				),
+				'default' => array(),
+				'sanitize_callback' => 'wp_parse_id_list',
+			),
+			'columns' => array(
+				'type' => 'integer',
+				'default' => 3,
+				'minimum' => 1,
+				'maximum' => 9,
+			),
+			'size' => array(
+				'type' => 'string',
+				'enum' => array_merge( get_intermediate_image_sizes(), array( 'full', 'custom' ) ),
+				'default' => 'thumbnail',
+			),
+			'link_type' => array(
+				'type' => 'string',
+				'enum' => array( 'none', 'file', 'post' ),
+				'default' => 'none',
+				'media_prop' => 'link',
+				'should_preview_update' => false,
+			),
+			'orderby_random' => array(
+				'type'                  => 'boolean',
+				'default'               => false,
+				'media_prop'            => '_orderbyRandom',
+				'should_preview_update' => false,
+			),
+		);
+	}
+
+	/**
+	 * Render the media on the frontend.
+	 *
+	 * @since 4.9.0
+	 *
+	 * @param array $instance Widget instance props.
+	 * @return void
+	 */
+	public function render_media( $instance ) {
+		$instance = array_merge( wp_list_pluck( $this->get_instance_schema(), 'default' ), $instance );
+
+		$shortcode_atts = array(
+			'ids'     => $instance['ids'],
+			'columns' => $instance['columns'],
+			'link'    => $instance['link_type'],
+			'size'    => $instance['size'],
+		);
+
+		// @codeCoverageIgnoreStart
+		if ( $instance['orderby_random'] ) {
+			$shortcode_atts['orderby'] = 'rand';
+		}
+
+		// @codeCoverageIgnoreEnd
+		echo gallery_shortcode( $shortcode_atts );
+	}
+
+	/**
+	 * Loads the required media files for the media manager and scripts for media widgets.
+	 *
+	 * @since 4.9.0
+	 */
+	public function enqueue_admin_scripts() {
+		parent::enqueue_admin_scripts();
+
+		$handle = 'media-gallery-widget';
+		wp_enqueue_script( $handle );
+
+		$exported_schema = array();
+		foreach ( $this->get_instance_schema() as $field => $field_schema ) {
+			$exported_schema[ $field ] = wp_array_slice_assoc( $field_schema, array( 'type', 'default', 'enum', 'minimum', 'format', 'media_prop', 'should_preview_update', 'items' ) );
+		}
+		wp_add_inline_script(
+			$handle,
+			sprintf(
+				'wp.mediaWidgets.modelConstructors[ %s ].prototype.schema = %s;',
+				wp_json_encode( $this->id_base ),
+				wp_json_encode( $exported_schema )
+			)
+		);
+
+		wp_add_inline_script(
+			$handle,
+			sprintf(
+				'
+					wp.mediaWidgets.controlConstructors[ %1$s ].prototype.mime_type = %2$s;
+					_.extend( wp.mediaWidgets.controlConstructors[ %1$s ].prototype.l10n, %3$s );
+				',
+				wp_json_encode( $this->id_base ),
+				wp_json_encode( $this->widget_options['mime_type'] ),
+				wp_json_encode( $this->l10n )
+			)
+		);
+	}
+
+	/**
+	 * Render form template scripts.
+	 *
+	 * @since 4.9.0
+	 */
+	public function render_control_template_scripts() {
+		parent::render_control_template_scripts();
+		?>
+		<script type="text/html" id="tmpl-wp-media-widget-gallery-preview">
+			<# var describedById = 'describedBy-' + String( Math.random() ); #>
+			<# if ( data.ids.length ) { #>
+				<div class="gallery media-widget-gallery-preview">
+					<# _.each( data.ids, function( id, index ) { #>
+						<#
+						var attachment = data.attachments[ id ];
+						if ( ! attachment ) {
+							return;
+						}
+						#>
+						<# if ( index < 6 ) { #>
+							<dl class="gallery-item">
+								<dt class="gallery-icon">
+								<# if ( attachment.sizes.thumbnail ) { #>
+									<img src="{{ attachment.sizes.thumbnail.url }}" width="{{ attachment.sizes.thumbnail.width }}" height="{{ attachment.sizes.thumbnail.height }}" alt="" />
+								<# } else { #>
+									<img src="{{ attachment.url }}" alt="" />
+								<# } #>
+								<# if ( index === 5 && data.ids.length > 6 ) { #>
+									<div class="gallery-icon-placeholder">
+										<p class="gallery-icon-placeholder-text">+{{ data.ids.length - 5 }}</p>
+									</div>
+								<# } #>
+								</dt>
+							</dl>
+						<# } #>
+					<# } ); #>
+				</div>
+			<# } else { #>
+				<div class="attachment-media-view">
+					<p class="placeholder"><?php echo esc_html( $this->l10n['no_media_selected'] ); ?></p>
+				</div>
+			<# } #>
+		</script>
+		<?php
+	}
+
+	/**
+	 * Whether the widget has content to show.
+	 *
+	 * @since 4.9.0
+	 * @access protected
+	 *
+	 * @param array $instance Widget instance props.
+	 * @return bool Whether widget has content.
+	 */
+	protected function has_content( $instance ) {
+		if ( ! empty( $instance['ids'] ) ) {
+			$attachments = wp_parse_id_list( $instance['ids'] );
+			foreach ( $attachments as $attachment ) {
+				if ( 'attachment' !== get_post_type( $attachment ) ) {
+					return false;
+				}
+			}
+			return true;
+		}
+		return false;
+	}
+}

wp-includes/widgets/class-wp-widget-media.php

@@ -257,6 +257,12 @@ abstract class WP_Widget_Media extends WP_Widget {
 				continue;
 			}
 			$value = $new_instance[ $field ];
+
+			// Workaround for rest_validate_value_from_schema() due to the fact that rest_is_boolean( '' ) === false, while rest_is_boolean( '1' ) is true.
+			if ( 'boolean' === $field_schema['type'] && '' === $value ) {
+				$value = false;
+			}
+
 			if ( true !== rest_validate_value_from_schema( $value, $field_schema, $field ) ) {
 				continue;
 			}
@@ -316,7 +322,7 @@ abstract class WP_Widget_Media extends WP_Widget {
 				class="media-widget-instance-property"
 				name="<?php echo esc_attr( $this->get_field_name( $name ) ); ?>"
 				id="<?php echo esc_attr( $this->get_field_id( $name ) ); // Needed specifically by wpWidgets.appendTitle(). ?>"
-				value="<?php echo esc_attr( strval( $value ) ); ?>"
+				value="<?php echo esc_attr( is_array( $value ) ? join( ',', $value ) : strval( $value ) ); ?>"
 			/>
 		<?php
 		endforeach;
@@ -388,7 +394,7 @@ abstract class WP_Widget_Media extends WP_Widget {
 				<label for="{{ elementIdPrefix }}title"><?php esc_html_e( 'Title:' ); ?></label>
 				<input id="{{ elementIdPrefix }}title" type="text" class="widefat title">
 			</p>
-			<div class="media-widget-preview">
+			<div class="media-widget-preview <?php echo esc_attr( $this->id_base ); ?>">
 				<div class="attachment-media-view">
 					<div class="placeholder"><?php echo esc_html( $this->l10n['no_media_selected'] ); ?></div>
 				</div>