diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js index 1bb6445a3c..8cc4130245 100644 --- a/src/wp-admin/js/customize-controls.js +++ b/src/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); diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js index e43fbc6f3c..e69993f04f 100644 --- a/src/wp-includes/js/media-views.js +++ b/src/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: $( '