<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[41590] trunk: Widgets: Introduce Gallery widget for displaying image galleries.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/41590">41590</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/41590","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>westonruter</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2017-09-25 06:27:32 +0000 (Mon, 25 Sep 2017)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>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 <a href="https://core.trac.wordpress.org/ticket/32417">#32417</a>.
Fixes <a href="https://core.trac.wordpress.org/ticket/41914">#41914</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadmincsswidgetscss">trunk/src/wp-admin/css/widgets.css</a></li>
<li><a href="#trunksrcwpadminjswidgetsmediaimagewidgetjs">trunk/src/wp-admin/js/widgets/media-image-widget.js</a></li>
<li><a href="#trunksrcwpadminjswidgetsmediawidgetsjs">trunk/src/wp-admin/js/widgets/media-widgets.js</a></li>
<li><a href="#trunksrcwpincludesdefaultwidgetsphp">trunk/src/wp-includes/default-widgets.php</a></li>
<li><a href="#trunksrcwpincludesscriptloaderphp">trunk/src/wp-includes/script-loader.php</a></li>
<li><a href="#trunksrcwpincludeswidgetsclasswpwidgetmediaphp">trunk/src/wp-includes/widgets/class-wp-widget-media.php</a></li>
<li><a href="#trunksrcwpincludeswidgetsphp">trunk/src/wp-includes/widgets.php</a></li>
<li><a href="#trunktestsqunitindexhtml">trunk/tests/qunit/index.html</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunksrcwpadminjswidgetsmediagallerywidgetjs">trunk/src/wp-admin/js/widgets/media-gallery-widget.js</a></li>
<li><a href="#trunksrcwpincludeswidgetsclasswpwidgetmediagalleryphp">trunk/src/wp-includes/widgets/class-wp-widget-media-gallery.php</a></li>
<li><a href="#trunktestsphpunittestswidgetsmediagallerywidgetphp">trunk/tests/phpunit/tests/widgets/media-gallery-widget.php</a></li>
<li><a href="#trunktestsqunitwpadminjswidgetstestmediagallerywidgetjs">trunk/tests/qunit/wp-admin/js/widgets/test-media-gallery-widget.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpadmincsswidgetscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/widgets.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/widgets.css 2017-09-24 23:00:08 UTC (rev 41589)
+++ trunk/src/wp-admin/css/widgets.css 2017-09-25 06:27:32 UTC (rev 41590)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -87,7 +87,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .media-widget-control .placeholder {
</span><span class="cx" style="display: block; padding: 0 10px"> border: 1px dashed #b4b9be;
</span><span class="cx" style="display: block; padding: 0 10px"> box-sizing: border-box;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- cursor: default;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ cursor: pointer;
</ins><span class="cx" style="display: block; padding: 0 10px"> line-height: 20px;
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 9px 0;
</span><span class="cx" style="display: block; padding: 0 10px"> position: relative;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -162,6 +162,71 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 1em 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.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;
+}
+
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /* Widget Dragging Helpers */
</span><span class="cx" style="display: block; padding: 0 10px"> .widget.ui-draggable-dragging {
</span><span class="cx" style="display: block; padding: 0 10px"> min-width: 100%;
</span></span></pre></div>
<a id="trunksrcwpadminjswidgetsmediagallerywidgetjs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/src/wp-admin/js/widgets/media-gallery-widget.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/js/widgets/media-gallery-widget.js (rev 0)
+++ trunk/src/wp-admin/js/widgets/media-gallery-widget.js 2017-09-25 06:27:32 UTC (rev 41590)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,325 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* 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 );
</ins></span></pre></div>
<a id="trunksrcwpadminjswidgetsmediaimagewidgetjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/js/widgets/media-image-widget.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/js/widgets/media-image-widget.js 2017-09-24 23:00:08 UTC (rev 41589)
+++ trunk/src/wp-admin/js/widgets/media-image-widget.js 2017-09-25 06:27:32 UTC (rev 41590)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -25,6 +25,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> ImageWidgetControl = component.MediaWidgetControl.extend({
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * View events.
+ *
+ * @type {object}
+ */
+ events: _.extend( {}, component.MediaWidgetControl.prototype.events, {
+ 'click .media-widget-preview.populated': 'editMedia'
+ } ),
+
+ /**
</ins><span class="cx" style="display: block; padding: 0 10px"> * Render preview.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @returns {void}
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -38,6 +47,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> previewContainer = control.$el.find( '.media-widget-preview' );
</span><span class="cx" style="display: block; padding: 0 10px"> previewTemplate = wp.template( 'wp-media-widget-image-preview' );
</span><span class="cx" style="display: block; padding: 0 10px"> previewContainer.html( previewTemplate( control.previewTemplateProps.toJSON() ) );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ previewContainer.addClass( 'populated' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> linkInput = control.$el.find( '.link' );
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! linkInput.is( document.activeElement ) ) {
</span></span></pre></div>
<a id="trunksrcwpadminjswidgetsmediawidgetsjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/js/widgets/media-widgets.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/js/widgets/media-widgets.js 2017-09-24 23:00:08 UTC (rev 41589)
+++ trunk/src/wp-admin/js/widgets/media-widgets.js 2017-09-25 06:27:32 UTC (rev 41590)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -429,6 +429,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> events: {
</span><span class="cx" style="display: block; padding: 0 10px"> 'click .notice-missing-attachment a': 'handleMediaLibraryLinkClick',
</span><span class="cx" style="display: block; padding: 0 10px"> 'click .select-media': 'selectMedia',
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'click .placeholder': 'selectMedia',
</ins><span class="cx" style="display: block; padding: 0 10px"> 'click .edit-media': 'editMedia'
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -591,17 +592,25 @@
</span><span class="cx" style="display: block; padding: 0 10px"> syncModelToInputs: function syncModelToInputs() {
</span><span class="cx" style="display: block; padding: 0 10px"> var control = this;
</span><span class="cx" style="display: block; padding: 0 10px"> control.syncContainer.find( '.media-widget-instance-property' ).each( function() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var input = $( this ), value;
- value = control.model.get( input.data( 'property' ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var input = $( this ), value, propertyName;
+ propertyName = input.data( 'property' );
+ value = control.model.get( propertyName );
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( _.isUndefined( value ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> return;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- value = String( value );
- if ( input.val() === value ) {
- return;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ if ( 'array' === control.model.schema[ propertyName ].type && _.isArray( value ) ) {
+ 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 );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- input.val( value );
- input.trigger( 'change' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ if ( input.val() !== value ) {
+ input.val( value );
+ input.trigger( 'change' );
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1002,7 +1011,22 @@
</span><span class="cx" style="display: block; padding: 0 10px"> return;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> type = model.schema[ name ].type;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( 'integer' === type ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 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 ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> castedAttrs[ name ] = parseInt( value, 10 );
</span><span class="cx" style="display: block; padding: 0 10px"> } else if ( 'boolean' === type ) {
</span><span class="cx" style="display: block; padding: 0 10px"> castedAttrs[ name ] = ! ( ! value || '0' === value || 'false' === value );
</span></span></pre></div>
<a id="trunksrcwpincludesdefaultwidgetsphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/default-widgets.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/default-widgets.php 2017-09-24 23:00:08 UTC (rev 41589)
+++ trunk/src/wp-includes/default-widgets.php 2017-09-25 06:27:32 UTC (rev 41590)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -31,6 +31,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /** WP_Widget_Media_Video class */
</span><span class="cx" style="display: block; padding: 0 10px"> require_once( ABSPATH . WPINC . '/widgets/class-wp-widget-media-video.php' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/** WP_Widget_Media_Gallery class */
+require_once( ABSPATH . WPINC . '/widgets/class-wp-widget-media-gallery.php' );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /** WP_Widget_Meta class */
</span><span class="cx" style="display: block; padding: 0 10px"> require_once( ABSPATH . WPINC . '/widgets/class-wp-widget-meta.php' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="trunksrcwpincludesscriptloaderphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/script-loader.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/script-loader.php 2017-09-24 23:00:08 UTC (rev 41589)
+++ trunk/src/wp-includes/script-loader.php 2017-09-25 06:27:32 UTC (rev 41590)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -699,6 +699,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $scripts->add( 'media-audio-widget', "/wp-admin/js/widgets/media-audio-widget$suffix.js", array( 'media-widgets', 'media-audiovideo' ) );
</span><span class="cx" style="display: block; padding: 0 10px"> $scripts->add( 'media-image-widget', "/wp-admin/js/widgets/media-image-widget$suffix.js", array( 'media-widgets' ) );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $scripts->add( 'media-gallery-widget', "/wp-admin/js/widgets/media-gallery-widget$suffix.js", array( 'media-widgets' ) );
</ins><span class="cx" style="display: block; padding: 0 10px"> $scripts->add( 'media-video-widget', "/wp-admin/js/widgets/media-video-widget$suffix.js", array( 'media-widgets', 'media-audiovideo', 'wp-api-request' ) );
</span><span class="cx" style="display: block; padding: 0 10px"> $scripts->add( 'text-widgets', "/wp-admin/js/widgets/text-widgets$suffix.js", array( 'jquery', 'backbone', 'editor', 'wp-util', 'wp-a11y' ) );
</span><span class="cx" style="display: block; padding: 0 10px"> $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' ) );
</span></span></pre></div>
<a id="trunksrcwpincludeswidgetsclasswpwidgetmediagalleryphp"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/src/wp-includes/widgets/class-wp-widget-media-gallery.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/widgets/class-wp-widget-media-gallery.php (rev 0)
+++ trunk/src/wp-includes/widgets/class-wp-widget-media-gallery.php 2017-09-25 06:27:32 UTC (rev 41590)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,224 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<?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;
+ }
+}
</ins></span></pre></div>
<a id="trunksrcwpincludeswidgetsclasswpwidgetmediaphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/widgets/class-wp-widget-media.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/widgets/class-wp-widget-media.php 2017-09-24 23:00:08 UTC (rev 41589)
+++ trunk/src/wp-includes/widgets/class-wp-widget-media.php 2017-09-25 06:27:32 UTC (rev 41590)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -257,6 +257,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> continue;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> $value = $new_instance[ $field ];
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ // 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;
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( true !== rest_validate_value_from_schema( $value, $field_schema, $field ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> continue;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -316,7 +322,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> class="media-widget-instance-property"
</span><span class="cx" style="display: block; padding: 0 10px"> name="<?php echo esc_attr( $this->get_field_name( $name ) ); ?>"
</span><span class="cx" style="display: block; padding: 0 10px"> id="<?php echo esc_attr( $this->get_field_id( $name ) ); // Needed specifically by wpWidgets.appendTitle(). ?>"
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- value="<?php echo esc_attr( strval( $value ) ); ?>"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ value="<?php echo esc_attr( is_array( $value ) ? join( ',', $value ) : strval( $value ) ); ?>"
</ins><span class="cx" style="display: block; padding: 0 10px"> />
</span><span class="cx" style="display: block; padding: 0 10px"> <?php
</span><span class="cx" style="display: block; padding: 0 10px"> endforeach;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -388,7 +394,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <label for="{{ elementIdPrefix }}title"><?php esc_html_e( 'Title:' ); ?></label>
</span><span class="cx" style="display: block; padding: 0 10px"> <input id="{{ elementIdPrefix }}title" type="text" class="widefat title">
</span><span class="cx" style="display: block; padding: 0 10px"> </p>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="media-widget-preview">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div class="media-widget-preview <?php echo esc_attr( $this->id_base ); ?>">
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="attachment-media-view">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="placeholder"><?php echo esc_html( $this->l10n['no_media_selected'] ); ?></div>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span></span></pre></div>
<a id="trunksrcwpincludeswidgetsphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/widgets.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/widgets.php 2017-09-24 23:00:08 UTC (rev 41589)
+++ trunk/src/wp-includes/widgets.php 2017-09-25 06:27:32 UTC (rev 41590)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1609,6 +1609,8 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> register_widget( 'WP_Widget_Media_Image' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ register_widget( 'WP_Widget_Media_Gallery' );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> register_widget( 'WP_Widget_Media_Video' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> register_widget( 'WP_Widget_Meta' );
</span></span></pre></div>
<a id="trunktestsphpunittestswidgetsmediagallerywidgetphp"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/tests/phpunit/tests/widgets/media-gallery-widget.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/tests/widgets/media-gallery-widget.php (rev 0)
+++ trunk/tests/phpunit/tests/widgets/media-gallery-widget.php 2017-09-25 06:27:32 UTC (rev 41590)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,201 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<?php
+/**
+ * Unit tests covering WP_Widget_Media_Gallery functionality.
+ *
+ * @package WordPress
+ * @subpackage widgets
+ */
+
+/**
+ * Test wp-includes/widgets/class-wp-widget-gallery.php
+ *
+ * @group widgets
+ */
+class Test_WP_Widget_Media_Gallery extends WP_UnitTestCase {
+
+ /**
+ * Clean up global scope.
+ *
+ * @global WP_Scripts $wp_scripts
+ * @global WP_Styles $wp_styles
+ */
+ public function clean_up_global_scope() {
+ global $wp_scripts, $wp_styles;
+ parent::clean_up_global_scope();
+ $wp_scripts = null;
+ $wp_styles = null;
+ }
+
+ /**
+ * Test get_instance_schema method.
+ *
+ * @covers WP_Widget_Media_Gallery::get_instance_schema()
+ */
+ public function test_get_instance_schema() {
+ $widget = new WP_Widget_Media_Gallery();
+ $schema = $widget->get_instance_schema();
+
+ $this->assertEqualSets(
+ array(
+ 'title',
+ 'ids',
+ 'columns',
+ 'size',
+ 'link_type',
+ 'orderby_random',
+ ),
+ array_keys( $schema )
+ );
+ }
+
+ /**
+ * Test update() method.
+ *
+ * @covers WP_Widget_Media_Gallery::render_media()
+ */
+ public function test_render_media() {
+ $widget = new WP_Widget_Media_Gallery();
+
+ $attachments = array();
+ foreach ( array( 'canola.jpg', 'waffles.jpg' ) as $filename ) {
+ $test_image = '/tmp/' . $filename;
+ copy( DIR_TESTDATA . '/images/canola.jpg', $test_image );
+ $attachment_id = self::factory()->attachment->create_object( array(
+ 'file' => $test_image,
+ 'post_parent' => 0,
+ 'post_mime_type' => 'image/jpeg',
+ 'post_title' => 'Canola',
+ ) );
+ wp_update_attachment_metadata( $attachment_id, wp_generate_attachment_metadata( $attachment_id, $test_image ) );
+ $attachments[ $filename ] = $attachment_id;
+ }
+
+ $instance = wp_list_pluck( $widget->get_instance_schema(), 'default' );
+ $instance['size'] = 'thumbnail';
+ $instance['columns'] = 3;
+ $instance['ids'] = array_values( $attachments );
+ ob_start();
+ $widget->render_media( $instance );
+ $output = ob_get_clean();
+
+ $this->assertContains( 'gallery-columns-3', $output );
+ $this->assertContains( 'gallery-size-thumbnail', $output );
+ $this->assertContains( 'canola', $output );
+ $this->assertContains( 'waffles', $output );
+ }
+
+ /**
+ * Test enqueue_admin_scripts() method.
+ *
+ * @covers WP_Widget_Media_Gallery::enqueue_admin_scripts()
+ */
+ public function test_enqueue_admin_scripts() {
+ set_current_screen( 'widgets.php' );
+ $widget = new WP_Widget_Media_Gallery();
+
+ $this->assertFalse( wp_script_is( 'media-gallery-widget' ) );
+
+ $widget->enqueue_admin_scripts();
+
+ $this->assertTrue( wp_script_is( 'media-gallery-widget' ) );
+
+ $after = join( '', wp_scripts()->registered['media-gallery-widget']->extra['after'] );
+ $this->assertContains( 'wp.mediaWidgets.modelConstructors[ "media_gallery" ].prototype', $after );
+ }
+
+ /**
+ * Test update() method.
+ *
+ * @covers WP_Widget_Media_Gallery::update()
+ */
+ public function test_update() {
+ $widget = new WP_Widget_Media_Gallery();
+ $schema = $widget->get_instance_schema();
+ $instance = wp_list_pluck( $schema, 'default' );
+
+ // Field: title.
+ $instance['title'] = 'Hello <b>World</b> ';
+ $instance = $widget->update( $instance, array() );
+ $this->assertEquals( 'Hello World', $instance['title'] );
+
+ // Field: ids.
+ $instance['ids'] = '1,2,3';
+ $instance = $widget->update( $instance, array() );
+ $this->assertSame( array( 1, 2, 3 ), $instance['ids'] );
+
+ $instance['ids'] = array( 1, 2, '3' );
+ $instance = $widget->update( $instance, array() );
+ $this->assertSame( array( 1, 2, 3 ), $instance['ids'] );
+
+ $instance['ids'] = array( 'too', 'bad' );
+ $instance = $widget->update( $instance, array( 'ids' => array( 2, 3 ) ) );
+ $this->assertSame( array( 2, 3 ), $instance['ids'] );
+
+ // Field: columns.
+ $instance['columns'] = 4;
+ $instance = $widget->update( $instance, array() );
+ $this->assertSame( 4, $instance['columns'] );
+
+ $instance['columns'] = '2';
+ $instance = $widget->update( $instance, array() );
+ $this->assertSame( 2, $instance['columns'] );
+
+ $instance['columns'] = -1; // Under min of 1.
+ $instance = $widget->update( $instance, array( 'columns' => 3 ) );
+ $this->assertSame( 3, $instance['columns'] );
+
+ $instance['columns'] = 10; // Over max of 9.
+ $instance = $widget->update( $instance, array( 'columns' => 3 ) );
+ $this->assertSame( 3, $instance['columns'] );
+
+ // Field: size.
+ $instance['size'] = 'large';
+ $instance = $widget->update( $instance, array() );
+ $this->assertSame( 'large', $instance['size'] );
+
+ $instance['size'] = 'bad';
+ $instance = $widget->update( $instance, array( 'size' => 'thumbnail' ) );
+ $this->assertSame( 'thumbnail', $instance['size'] );
+
+ // Field: link_type.
+ $instance['link_type'] = 'none';
+ $instance = $widget->update( $instance, array() );
+ $this->assertSame( 'none', $instance['link_type'] );
+
+ $instance['link_type'] = 'unknown';
+ $instance = $widget->update( $instance, array( 'link_type' => 'file' ) );
+ $this->assertSame( 'file', $instance['link_type'] );
+
+ // Field: orderby_random.
+ $instance['orderby_random'] = '1';
+ $instance = $widget->update( $instance, array() );
+ $this->assertTrue( $instance['orderby_random'] );
+
+ $instance['orderby_random'] = true;
+ $instance = $widget->update( $instance, array() );
+ $this->assertTrue( $instance['orderby_random'] );
+
+ $instance['orderby_random'] = '';
+ $instance = $widget->update( $instance, array() );
+ $this->assertFalse( $instance['orderby_random'] );
+
+ $instance['orderby_random'] = false;
+ $instance = $widget->update( $instance, array() );
+ $this->assertFalse( $instance['orderby_random'] );
+ }
+
+ /**
+ * Test render_control_template_scripts() method.
+ *
+ * @covers WP_Widget_Media_Gallery::render_control_template_scripts()
+ */
+ public function test_render_control_template_scripts() {
+ $widget = new WP_Widget_Media_Gallery();
+
+ ob_start();
+ $widget->render_control_template_scripts();
+ $output = ob_get_clean();
+
+ $this->assertContains( '<script type="text/html" id="tmpl-wp-media-widget-gallery-preview">', $output );
+ }
+}
</ins></span></pre></div>
<a id="trunktestsqunitindexhtml"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/qunit/index.html</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/qunit/index.html 2017-09-24 23:00:08 UTC (rev 41589)
+++ trunk/tests/qunit/index.html 2017-09-25 06:27:32 UTC (rev 41590)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -119,7 +119,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> wp.mediaWidgets.controlConstructors[ "media_audio" ].prototype.mime_type = "audio";
</span><span class="cx" style="display: block; padding: 0 10px"> _.extend( wp.mediaWidgets.controlConstructors[ "media_audio" ].prototype.l10n, {"no_media_selected":"No audio selected","select_media":"Select File","change_media":"Change Audio","edit_media":"Edit Audio","add_to_widget":"Add to Widget","missing_attachment":"We can’t find that audio file. Check your <a href=\"http:\/\/src.wordpress-develop.dev\/wp-admin\/upload.php\">media library<\/a> and make sure it wasn’t deleted.","media_library_state_multi":{"0":"Audio Widget (%d)","1":"Audio Widget (%d)","singular":"Audio Widget (%d)","plural":"Audio Widget (%d)","context":null,"domain":null},"media_library_state_single":"Audio Widget&
quot;} );
</span><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <script type='text/javascript' src='../../src/wp-admin/js/widgets/media-gallery-widget.js'></script>
+ <script type='text/javascript'>
+ wp.mediaWidgets.modelConstructors[ "media_gallery" ].prototype.schema = {"title":{"type":"string","default":"","should_preview_update":false},"ids":{"type":"string","default":""},"columns":{"type":"integer","default":3},"size":{"type":"string","default":"thumbnail","enum":["thumbnail","medium","medium_large","large","post-thumbnail","full","custom"]},"link_type":{"type":"string","default":"none","enum":["none","file","post"],"media_prop":"link","should_preview_update":false},"orderby_random":{"type":"boolean","default":false,"media_p
rop":"_orderbyRandom","should_preview_update":false},"attachments":{"type":"string","default":""}};
+ wp.mediaWidgets.controlConstructors[ "media_gallery" ].prototype.mime_type = "image";
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ _.extend( wp.mediaWidgets.controlConstructors[ "media_gallery" ].prototype.l10n, {"no_media_selected":"No images selected","add_media":"Add Media","replace_media":"Replace Media","edit_media":"Edit Gallery","add_to_widget":"Add to Widget","missing_attachment":"We can’t find that gallery. Check your <a href=\"http:\/\/src.wordpress-develop.dev\/wp-admin\/upload.php\">media library<\/a> and make sure it wasn’t deleted.","media_library_state_multi":"","media_library_state_single":"","unsupported_file_type":"Looks like this isn’t the correct kind of file. Please link to an appropriate file instead.","select_media":"Select Images",&
quot;change_media":"Add Image"} );
+ </script>
+
</ins><span class="cx" style="display: block; padding: 0 10px"> <!-- Unit tests -->
</span><span class="cx" style="display: block; padding: 0 10px"> <script src="wp-admin/js/password-strength-meter.js"></script>
</span><span class="cx" style="display: block; padding: 0 10px"> <script src="wp-admin/js/customize-base.js"></script>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -136,6 +143,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <script src="wp-admin/js/nav-menu.js"></script>
</span><span class="cx" style="display: block; padding: 0 10px"> <script src="wp-admin/js/widgets/test-media-widgets.js"></script>
</span><span class="cx" style="display: block; padding: 0 10px"> <script src="wp-admin/js/widgets/test-media-image-widget.js"></script>
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <script src="wp-admin/js/widgets/test-media-gallery-widget.js"></script>
</ins><span class="cx" style="display: block; padding: 0 10px"> <script src="wp-admin/js/widgets/test-media-video-widget.js"></script>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <!-- Customizer templates for sections -->
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -569,7 +577,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> </div><!-- #available-widgets-list -->
</span><span class="cx" style="display: block; padding: 0 10px"> </div><!-- #available-widgets -->
</span><span class="cx" style="display: block; padding: 0 10px"> </div><!-- #widgets-left -->
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-widget-media-media_image-control">
</span><span class="cx" style="display: block; padding: 0 10px"> <# var elementIdPrefix = 'el' + String( Math.random() ) + '_' #>
</span><span class="cx" style="display: block; padding: 0 10px"> <p>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -811,6 +819,60 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="media-frame-uploader"></div>
</span><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <script type="text/html" id="tmpl-widget-media-media_gallery-control">
+ <# var elementIdPrefix = 'el' + String( Math.random() ) + '_' #>
+ <p>
+ <label for="{{ elementIdPrefix }}title">Title:</label>
+ <input id="{{ elementIdPrefix }}title" type="text" class="widefat title">
+ </p>
+ <div class="media-widget-preview">
+ <div class="attachment-media-view">
+ <div class="placeholder">No images selected</div>
+ </div>
+ </div>
+ <p class="media-widget-buttons">
+ <button type="button" class="button edit-media selected">
+ Edit Gallery </button>
+ <button type="button" class="button change-media select-media selected">
+ Replace Media </button>
+ <button type="button" class="button select-media not-selected">
+ Add Media </button>
+ </p>
+ <div class="media-widget-fields">
+ </div>
+ </script>
+ <script type="text/html" id="tmpl-wp-media-widget-gallery-preview">
+ <# var describedById = 'describedBy-' + String( Math.random() ); #>
+ <# data.attachments = data.attachments ? JSON.parse(data.attachments) : ''; #>
+ <# if ( Array.isArray( data.attachments ) && data.attachments.length ) { #>
+ <div class="gallery gallery-columns-{{ data.columns }}">
+ <# _.each( data.attachments, function( attachment, index ) { #>
+ <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="" />
+ <# } #>
+ </dt>
+ <# if ( attachment.caption ) { #>
+ <dd class="wp-caption-text gallery-caption">
+ {{{ data.verifyHTML( attachment.caption ) }}}
+ </dd>
+ <# } #>
+ </dl>
+ <# if ( index % data.columns === data.columns - 1 ) { #>
+ <br style="clear: both;">
+ <# } #>
+ <# } ); #>
+ </div>
+ <# } else { #>
+ <div class="attachment-media-view">
+ <p class="placeholder">No images selected</p>
+ </div>
+ <# } #>
+ </script>
+
</ins><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-media-modal">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="media-modal wp-core-ui">
</span><span class="cx" style="display: block; padding: 0 10px"> <button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text">Close media panel</span></span></button>
</span></span></pre></div>
<a id="trunktestsqunitwpadminjswidgetstestmediagallerywidgetjs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/tests/qunit/wp-admin/js/widgets/test-media-gallery-widget.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/qunit/wp-admin/js/widgets/test-media-gallery-widget.js (rev 0)
+++ trunk/tests/qunit/wp-admin/js/widgets/test-media-gallery-widget.js 2017-09-25 06:27:32 UTC (rev 41590)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,30 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* global wp */
+/* jshint qunit: true */
+/* eslint-env qunit */
+/* eslint-disable no-magic-numbers */
+
+( function() {
+ 'use strict';
+
+ module( 'Gallery Media Widget' );
+
+ test( 'gallery widget control', function() {
+ var GalleryWidgetControl;
+ equal( typeof wp.mediaWidgets.controlConstructors.media_gallery, 'function', 'wp.mediaWidgets.controlConstructors.media_gallery is a function' );
+ GalleryWidgetControl = wp.mediaWidgets.controlConstructors.media_gallery;
+ ok( GalleryWidgetControl.prototype instanceof wp.mediaWidgets.MediaWidgetControl, 'wp.mediaWidgets.controlConstructors.media_gallery subclasses wp.mediaWidgets.MediaWidgetControl' );
+ });
+
+ test( 'gallery media model', function() {
+ var GalleryWidgetModel, galleryWidgetModelInstance;
+ equal( typeof wp.mediaWidgets.modelConstructors.media_gallery, 'function', 'wp.mediaWidgets.modelConstructors.media_gallery is a function' );
+ GalleryWidgetModel = wp.mediaWidgets.modelConstructors.media_gallery;
+ ok( GalleryWidgetModel.prototype instanceof wp.mediaWidgets.MediaWidgetModel, 'wp.mediaWidgets.modelConstructors.media_gallery subclasses wp.mediaWidgets.MediaWidgetModel' );
+
+ galleryWidgetModelInstance = new GalleryWidgetModel();
+ _.each( galleryWidgetModelInstance.attributes, function( value, key ) {
+ equal( value, GalleryWidgetModel.prototype.schema[ key ][ 'default' ], 'Should properly set default for ' + key );
+ });
+ });
+
+})();
</ins></span></pre>
</div>
</div>
</body>
</html>