diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js index 60ad65ee48..82740218dc 100644 --- a/src/wp-includes/js/media-views.js +++ b/src/wp-includes/js/media-views.js @@ -9168,18 +9168,28 @@ Cropper = View.extend(/** @lends wp.media.view.Cropper.prototype */{ imgOptions = _.extend(imgOptions, { parent: this.$el, onInit: function() { - this.parent.children().on( 'mousedown touchstart', function( e ){ - if ( e.shiftKey ) { + // Store the set ratio. + var setRatio = imgSelect.getOptions().aspectRatio; + + // On mousedown, if no ratio is set and the Shift key is down, use a 1:1 ratio. + this.parent.children().on( 'mousedown touchstart', function( e ) { + + // If no ratio is set and the shift key is down, use a 1:1 ratio. + if ( ! setRatio && e.shiftKey ) { imgSelect.setOptions( { aspectRatio: '1:1' } ); - } else { - imgSelect.setOptions( { - aspectRatio: false - } ); } } ); + + this.parent.children().on( 'mouseup touchend', function( e ) { + + // Restore the set ratio. + imgSelect.setOptions( { + aspectRatio: setRatio ? setRatio : false + } ); + } ); } } ); this.trigger('image-loaded'); diff --git a/src/wp-includes/js/media/views/cropper.js b/src/wp-includes/js/media/views/cropper.js index 4220729072..74967cca26 100644 --- a/src/wp-includes/js/media/views/cropper.js +++ b/src/wp-includes/js/media/views/cropper.js @@ -55,18 +55,28 @@ Cropper = View.extend(/** @lends wp.media.view.Cropper.prototype */{ imgOptions = _.extend(imgOptions, { parent: this.$el, onInit: function() { - this.parent.children().on( 'mousedown touchstart', function( e ){ - if ( e.shiftKey ) { + // Store the set ratio. + var setRatio = imgSelect.getOptions().aspectRatio; + + // On mousedown, if no ratio is set and the Shift key is down, use a 1:1 ratio. + this.parent.children().on( 'mousedown touchstart', function( e ) { + + // If no ratio is set and the shift key is down, use a 1:1 ratio. + if ( ! setRatio && e.shiftKey ) { imgSelect.setOptions( { aspectRatio: '1:1' } ); - } else { - imgSelect.setOptions( { - aspectRatio: false - } ); } } ); + + this.parent.children().on( 'mouseup touchend', function( e ) { + + // Restore the set ratio. + imgSelect.setOptions( { + aspectRatio: setRatio ? setRatio : false + } ); + } ); } } ); this.trigger('image-loaded');