Ticket #36318: 36318.3.diff

src/wp-includes/js/media/controllers/customize-image-cropper.js

@@ -14 +14 @@
 CustomizeImageCropper = Controller.Cropper.extend({
         doCrop: function( attachment ) {
                 var cropDetails = attachment.get( 'cropDetails' ),
-                        control = this.get( 'control' );
+                        control = this.get( 'control' ),
+                        ratio = cropDetails.width / cropDetails.height;
 
-                if ( ! control.params.flex_width ) {
-                        cropDetails.dst_width = control.params.width;
-                }
-                if ( ! control.params.flex_height ) {
-                        cropDetails.dst_height = control.params.height;
+                // Use crop measurements when flexible in both directions.
+                if ( control.params.flex_width && control.params.flex_height ) {
+                        cropDetails.dst_width  = cropDetails.width;
+                        cropDetails.dst_height = cropDetails.height;
+
+                // Constrain flexible side based on image ratio and size of the fixed side.
+                } else {
+                        cropDetails.dst_width  = control.params.flex_width  ? control.params.height * ratio : control.params.width;
+                        cropDetails.dst_height = control.params.flex_height ? control.params.width  / ratio : control.params.height;
                 }
 
                 return wp.ajax.post( 'crop-image', {

src/wp-includes/js/media-views.js

@@ -400 +400 @@
 CustomizeImageCropper = Controller.Cropper.extend({
         doCrop: function( attachment ) {
                 var cropDetails = attachment.get( 'cropDetails' ),
-                        control = this.get( 'control' );
+                        control = this.get( 'control' ),
+                        ratio = cropDetails.width / cropDetails.height;
 
-                if ( ! control.params.flex_width ) {
-                        cropDetails.dst_width = control.params.width;
-                }
-                if ( ! control.params.flex_height ) {
-                        cropDetails.dst_height = control.params.height;
+                // Use crop measurements when flexible in both directions.
+                if ( control.params.flex_width && control.params.flex_height ) {
+                        cropDetails.dst_width  = cropDetails.width;
+                        cropDetails.dst_height = cropDetails.height;
+
+                // Constrain flexible side based on image ratio and size of the fixed side.
+                } else {
+                        cropDetails.dst_width  = control.params.flex_width  ? control.params.height * ratio : control.params.width;
+                        cropDetails.dst_height = control.params.flex_height ? control.params.width  / ratio : control.params.height;
                 }
 
                 return wp.ajax.post( 'crop-image', {