From d19b2ded94a92500deb507098e71b423cd71ed01 Mon Sep 17 00:00:00 2001
From: Scott Taylor <wonderboymusic@git.wordpress.org>
Date: Mon, 29 Sep 2014 03:44:25 +0000
Subject: [PATCH] Add `size` to the UI for Gallery Settings in the media modal.
 Ensure that the TinyMCE view is refreshed when size changes.

Props richardmtl, noplanman, wonderboymusic.
Fixes #18143.


git-svn-id: https://develop.svn.wordpress.org/trunk@29779 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-includes/js/mce-view.js     | 14 +++++++++-----
 src/wp-includes/media-template.php | 25 +++++++++++++++++++++++++
 2 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/wp-includes/js/mce-view.js b/src/wp-includes/js/mce-view.js
index 85484ef42b..c522d85e57 100644
--- a/src/wp-includes/js/mce-view.js
+++ b/src/wp-includes/js/mce-view.js
@@ -437,8 +437,9 @@ window.wp = window.wp || {};
 		 *
 		 * @param view {object} being refreshed
 		 * @param text {string} textual representation of the view
+		 * @param force {Boolean} whether to force rendering
 		 */
-		refreshView: function( view, text ) {
+		refreshView: function( view, text, force ) {
 			var encodedText = window.encodeURIComponent( text ),
 				viewOptions,
 				result, instance;
@@ -454,7 +455,7 @@ window.wp = window.wp || {};
 				instances[ encodedText ] = instance;
 			}
 
-			instance.render();
+			instance.render( force );
 		},
 
 		getInstance: function( encodedText ) {
@@ -525,7 +526,9 @@ window.wp = window.wp || {};
 
 					_.each( attachments, function( attachment ) {
 						if ( attachment.sizes ) {
-							if ( attachment.sizes.thumbnail ) {
+							if ( attrs.size && attachment.sizes[ attrs.size ] ) {
+								attachment.thumbnail = attachment.sizes[ attrs.size ];
+							} else if ( attachment.sizes.thumbnail ) {
 								attachment.thumbnail = attachment.sizes.thumbnail;
 							} else if ( attachment.sizes.full ) {
 								attachment.thumbnail = attachment.sizes.full;
@@ -552,9 +555,10 @@ window.wp = window.wp || {};
 			frame = gallery.edit( data );
 
 			frame.state('gallery-edit').on( 'update', function( selection ) {
-				var shortcode = gallery.shortcode( selection ).string();
+				var shortcode = gallery.shortcode( selection ).string(), force;
 				$( node ).attr( 'data-wpview-text', window.encodeURIComponent( shortcode ) );
-				wp.mce.views.refreshView( self, shortcode );
+				force = ( data !== shortcode );
+				wp.mce.views.refreshView( self, shortcode, force );
 			});
 
 			frame.on( 'close', function() {
diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php
index 8299642c7d..1c7749a8d6 100644
--- a/src/wp-includes/media-template.php
+++ b/src/wp-includes/media-template.php
@@ -734,6 +734,31 @@ function wp_print_media_templates() {
 			<span><?php _e( 'Random Order' ); ?></span>
 			<input type="checkbox" data-setting="_orderbyRandom" />
 		</label>
+
+		<label class="setting size">
+			<span><?php _e( 'Size' ); ?></span>
+			<select class="size" name="size"
+				data-setting="size"
+				<# if ( data.userSettings ) { #>
+					data-user-setting="imgsize"
+				<# } #>
+				>
+				<?php
+				// This filter is documented in wp-admin/includes/media.php
+				$size_names = apply_filters( 'image_size_names_choose', array(
+					'thumbnail' => __( 'Thumbnail' ),
+					'medium'    => __( 'Medium' ),
+					'large'     => __( 'Large' ),
+					'full'      => __( 'Full Size' ),
+				) );
+
+				foreach ( $size_names as $size => $label ) : ?>
+					<option value="<?php echo esc_attr( $size ); ?>">
+						<?php echo esc_html( $label ); ?>
+					</option>
+				<?php endforeach; ?>
+			</select>
+		</label>
 	</script>
 
 	<script type="text/html" id="tmpl-playlist-settings">