Add preview for galleries

Very basic, needs much more polish. And styles.

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

@@ -109,11 +109,23 @@
 			});
 			wp.media.frame = mediaFrame; // See wp.media().
 
+
 			// Handle selection of a media item.
-			mediaFrame.on( 'reset', function onInsert() {
+			mediaFrame.on( 'update', function onUpdate( selection ) {
 				var state = mediaFrame.state();
-console.log(wp.media.controller.state().get('selection'));
-			});
+
+				selection = selection || state.get( 'selection' );
+
+				if ( ! selection ) {
+					return;
+				}
+
+				// Update widget instance.
+				control.model.set( {
+					ids: _.pluck( selection.models, 'id' ).join( ',' ),
+					attachments: selection.models.map( function( model ) { return model.toJSON(); } )
+				} );
+			} );
 
 			// Disable syncing of attachment changes back to server. See <https://core.trac.wordpress.org/ticket/40403>.
 			defaultSync = wp.media.model.Attachment.prototype.sync;

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

@@ -59,8 +59,8 @@ public function get_instance_schema() {
 			parent::get_instance_schema(),
 			array(
 				'ids' => array(
-					'type' => 'array',
-					'default' => array(),
+					'type' => 'string',
+					'default' => '',
 				),
 				'columns' => array(
 					'type' => 'integer',
@@ -71,13 +71,23 @@ public function get_instance_schema() {
 					'enum' => array_merge( get_intermediate_image_sizes(), array( 'full', 'custom' ) ),
 					'default' => 'thumbnail',
 				),
-				'link' => array(
+				'link_type' => array(
 					'type' => 'string',
-					'default' => '',
-					'format' => 'uri',
-					'sanitize_callback' => 'esc_url',
+					'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,
+				),
+				'attachments' => array(
+					'type'                  => 'array',
+					'default' => array(),
+				),
 			)
 		);
 	}
@@ -93,10 +103,15 @@ public function get_instance_schema() {
 	 */
 	public function render_media( $instance ) {
 		$instance = array_merge( wp_list_pluck( $this->get_instance_schema(), 'default' ), $instance );
-
-		echo gallery_shortcode( array(
+		$shortcode_atts = array(
 			'ids' => $instance['ids'],
-		) );
+		);
+
+		if ( $instance['orderby_random'] ) {
+			$shortcode_atts['orderby'] = 'rand';
+		}
+
+		echo gallery_shortcode( $shortcode_atts );
 	}
 
 	/**
@@ -155,6 +170,28 @@ public function render_control_template_scripts() {
 				<div class="notice notice-error notice-alt notice-missing-attachment">
 					<p><?php echo $this->l10n['missing_attachment']; ?></p>
 				</div>
+			<# } else if ( 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"><?php echo esc_html( $this->l10n['no_media_selected'] ); ?></p>