Ticket #41914: 41914.1.diff

src/wp-admin/css/widgets.css

@@ -87 +87 @@
 .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 +162 @@
         margin: 1em 0;
 }
 
+.media-widget-gallery-preview {
+        display: flex;
+        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: flex;
+        align-items: 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%;

new file src/wp-admin/js/widgets/media-gallery-widget.js

@@ +1 @@
+/* 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 );

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

@@ -25 +25 @@
         ImageWidgetControl = component.MediaWidgetControl.extend({
 
                 /**
+                 * View events.
+                 *
+                 * @type {object}
+                 */
+                events: _.extend( {}, component.MediaWidgetControl.prototype.events, {
+                        'click .media-widget-preview.populated': 'editMedia'
+                } ),
+
+                /**
                  * Render preview.
                  *
                  * @returns {void}
@@ -38 +47 @@
                         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 ) ) {

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

@@ -429 +429 @@
                 events: {
                         'click .notice-missing-attachment a': 'handleMediaLibraryLinkClick',
                         'click .select-media': 'selectMedia',
+                        'click .placeholder': 'selectMedia',
                         'click .edit-media': 'editMedia'
                 },
 
@@ -591 +592 @@
                 syncModelToInputs: function syncModelToInputs() {
                         var control = this;
                         control.syncContainer.find( '.media-widget-instance-property' ).each( function() {
-                                var input = $( this ), value;
-                                value = control.model.get( input.data( 'property' ) );
+                                var input = $( this ), value, propertyName;
+                                propertyName = input.data( 'property' );
+                                value = control.model.get( propertyName );
                                 if ( _.isUndefined( value ) ) {
                                         return;
                                 }
-                                value = String( value );
-                                if ( input.val() === value ) {
-                                        return;
+
+                                // @todo Support comma-separated ID list arrays? This will depend on WP_Widget_Media::form() being updated to support serializing array to form field.
+                                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 );
+                                }
+
+                                if ( input.val() !== value ) {
+                                        input.val( value );
+                                        input.trigger( 'change' );
                                 }
-                                input.val( value );
-                                input.trigger( 'change' );
                         });
                 },
 
@@ -1002 +1012 @@
                                         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 );

src/wp-includes/default-widgets.php

@@ -31 +31 @@
 /** 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' );
 

src/wp-includes/script-loader.php

@@ -699 +699 @@
 
                 $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' ) );

src/wp-includes/widgets.php

@@ -1609 +1609 @@
 
         register_widget( 'WP_Widget_Media_Image' );
 
+        register_widget( 'WP_Widget_Media_Gallery' );
+
         register_widget( 'WP_Widget_Media_Video' );
 
         register_widget( 'WP_Widget_Meta' );

new file src/wp-includes/widgets/class-wp-widget-media-gallery.php

@@ +1 @@
+<?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' ),
+                        'select_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' ),
+                        'change_media' => _x( 'Add Image', '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,
+                        ),
+                        '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'],
+                );
+
+                // @codingStandardsIgnoreStart
+                if ( $instance['orderby_random'] ) {
+                        $shortcode_atts['orderby'] = 'rand';
+                }
+                // @codingStandardsIgnoreEnd
+
+                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;
+        }
+}

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

@@ -257 +257 @@
                                 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 +322 @@
                                 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 +394 @@
                                 <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>

new file tests/phpunit/tests/widgets/media-gallery-widget.php

@@ +1 @@
+<?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 {
+
+        /**
+         * 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() {
+                // @todo Add tests.
+        }
+
+        /**
+         * Test enqueue_admin_scripts() method.
+         *
+         * @covers WP_Widget_Media_Gallery::enqueue_admin_scripts()
+         */
+        public function test_enqueue_admin_scripts() {
+                // @todo Add tests.
+        }
+
+        /**
+         * 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' );
+
+                $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'] );
+
+                $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'] );
+        }
+
+        /**
+         * Test render_control_template_scripts() method.
+         *
+         * @covers WP_Widget_Media_Gallery::render_control_template_scripts()
+         */
+        public function test_render_control_template_scripts() {
+                // @todo Add tests.
+        }
+}

tests/qunit/index.html

@@ -119 +119 @@
                         wp.mediaWidgets.controlConstructors[ "media_audio" ].prototype.mime_type = "audio";
                         _.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&#8217;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&#8217;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"} );
                 </script>
+                <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_prop":"_orderbyRandom","should_preview_update":false},"attachments":{"type":"string","default":""}};
+                        wp.mediaWidgets.controlConstructors[ "media_gallery" ].prototype.mime_type = "image";
+
+                        _.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&#8217;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&#8217;t deleted.","media_library_state_multi":"","media_library_state_single":"","unsupported_file_type":"Looks like this isn&#8217;t the correct kind of file. Please link to an appropriate file instead.","select_media":"Select Images","change_media":"Add Image"} );
+                </script>
 
                 <!-- Unit tests -->
                 <script src="wp-admin/js/password-strength-meter.js"></script>
@@ -136 +143 @@
                 <script src="wp-admin/js/nav-menu.js"></script>
                 <script src="wp-admin/js/widgets/test-media-widgets.js"></script>
                 <script src="wp-admin/js/widgets/test-media-image-widget.js"></script>
+                <script src="wp-admin/js/widgets/test-media-gallery-widget.js"></script>
                 <script src="wp-admin/js/widgets/test-media-video-widget.js"></script>
 
                 <!-- Customizer templates for sections -->
@@ -569 +577 @@
                                         </div><!-- #available-widgets-list -->
                                 </div><!-- #available-widgets -->
                         </div><!-- #widgets-left -->
-                        
+
                         <script type="text/html" id="tmpl-widget-media-media_image-control">
                         <# var elementIdPrefix = 'el' + String( Math.random() ) + '_' #>
                         <p>
@@ -811 +819 @@
                 <div class="media-frame-uploader"></div>
         </script>
 
+        <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>
+
         <script type="text/html" id="tmpl-media-modal">
                 <div class="media-modal wp-core-ui">
                         <button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text">Close media panel</span></span></button>

new file tests/qunit/wp-admin/js/widgets/test-media-gallery-widget.js

@@ +1 @@
+/* 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 );
+                });
+        });
+
+})();