Header Images: Add suggested dimensions to the media workflow.

This updates [28030] to the latest patch.

props gcorne.
see #21785.

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


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

wp-admin/js/customize-controls.js

@@ -424,24 +424,25 @@
 			event.preventDefault();
 
 			this.frame = wp.media({
-				title: l10n.chooseImage,
-				library: {
-					type: 'image'
-				},
 				button: {
 					text: l10n.selectAndCrop,
 					close: false
 				},
-				multiple: false,
-				crop: {
-					suggestedWidth: _wpCustomizeHeader.data.width,
-					suggestedHeight: _wpCustomizeHeader.data.height,
-					imgSelectOptions: this.calculateImageSelectOptions
-				}
+				states: [
+					new wp.media.controller.Library({
+						title:     l10n.chooseImage,
+						library:   wp.media.query({ type: 'image' }),
+						multiple:  false,
+						priority:  20,
+						suggestedWidth: _wpCustomizeHeader.data.width,
+						suggestedHeight: _wpCustomizeHeader.data.height
+					}),
+					new wp.media.controller.Cropper({
+						imgSelectOptions: this.calculateImageSelectOptions
+					})
+				]
 			});
 
-			this.frame.states.add([new wp.media.controller.Cropper()]);
-
 			this.frame.on('select', this.onSelect, this);
 			this.frame.on('cropped', this.onCropped, this);
 			this.frame.on('skippedcrop', this.onSkippedCrop, this);

wp-includes/js/media-views.js

@@ -1843,6 +1843,9 @@
 				display:    state.get('displaySettings'),
 				dragInfo:   state.get('dragInfo'),
 
+				suggestedWidth:  state.get('suggestedWidth'),
+				suggestedHeight: state.get('suggestedHeight'),
+
 				AttachmentView: state.get('AttachmentView')
 			});
 		},
@@ -3314,12 +3317,14 @@
 		},
 
 		prepare: function() {
-			var cropOptions = this.controller.options.crop;
-			if ( cropOptions ) {
+			var suggestedWidth = this.controller.state().get('suggestedWidth'),
+				suggestedHeight = this.controller.state().get('suggestedHeight');
+
+			if ( suggestedWidth && suggestedHeight ) {
 				return {
-					suggestedWidth: cropOptions.suggestedWidth,
-					suggestedHeight: cropOptions.suggestedHeight
-				}
+					suggestedWidth: suggestedWidth,
+					suggestedHeight: suggestedHeight
+				};
 			}
 		},
 		/**
@@ -5164,8 +5169,7 @@
 		},
 
 		createToolbar: function() {
-			var filters, FiltersConstructor,
-				frameOptions = this.controller.options;
+			var filters, FiltersConstructor;
 
 			/**
 			 * @member {wp.media.view.Toolbar}
@@ -5210,9 +5214,9 @@
 				}) );
 			}
 
-			if ( frameOptions.crop ) {
+			if ( this.options.suggestedWidth && this.options.suggestedHeight ) {
 				this.toolbar.set( 'suggestedDimensions', new media.View({
-					el: $( '<div class="instructions">' + l10n.suggestedDimensions + ' ' + frameOptions.crop.suggestedWidth + ' &times; ' + frameOptions.crop.suggestedHeight + '</div>' )[0],
+					el: $( '<div class="instructions">' + l10n.suggestedDimensions + ' ' + this.options.suggestedWidth + ' &times; ' + this.options.suggestedHeight + '</div>' )[0],
 					priority: -40
 				}) );
 			}
@@ -6248,7 +6252,7 @@
 			};
 		},
 		onImageLoad: function() {
-			var imgOptions = this.controller.frame.options.crop.imgSelectOptions;
+			var imgOptions = this.controller.get('imgSelectOptions');
 			if (typeof imgOptions === 'function') {
 				imgOptions = imgOptions(this.options.attachment, this.controller);
 			}