diff --git a/src/js/_enqueues/admin/site-icon.js b/src/js/_enqueues/admin/site-icon.js index 59a098dc08aac..33898175e5204 100644 --- a/src/js/_enqueues/admin/site-icon.js +++ b/src/js/_enqueues/admin/site-icon.js @@ -24,9 +24,10 @@ * @since 6.5.0 * * @param {Object} attachment The attachment object representing the image. + * @param {Object} controller The cropper controller. * @return {Object} The image selection options. */ - function calculateImageSelectOptions( attachment ) { + function calculateImageSelectOptions( attachment, controller ) { var realWidth = attachment.get( 'width' ), realHeight = attachment.get( 'height' ), xInit = 512, @@ -38,6 +39,20 @@ y1, imgSelectOptions; + /* + * Square images can skip cropping. "Skip Cropping" still sends the whole + * image through the crop request, so the site icon sizes are created. + */ + controller.set( 'hasRequiredAspectRatio', realWidth === realHeight ); + controller.set( 'suggestedCropSize', { + width: realWidth, + height: realHeight, + x1: 0, + y1: 0, + x2: xInit, + y2: yInit, + } ); + if ( realWidth / realHeight > ratio ) { yInit = realHeight; xInit = yInit * ratio; @@ -117,17 +132,37 @@ // When an image is selected, run a callback. frame.on( 'select', function () { // Grab the selected attachment. - var attachment = frame.state().get( 'selection' ).first(); + var attachment = frame.state().get( 'selection' ).first(), + size = $el.data( 'size' ); if ( - attachment.attributes.height === $el.data( 'size' ) && - $el.data( 'size' ) === attachment.attributes.width + attachment.attributes.height === size && + size === attachment.attributes.width ) { - switchToUpdate( attachment.attributes ); - frame.close(); - - // Set the value of the hidden input to the attachment id. - $hiddenDataField.val( attachment.id ); + /* + * The image doesn't need cropping, but it still goes through the crop + * request so that the site icon and its additional sizes are created. + */ + wp.ajax + .post( 'crop-image', { + nonce: attachment.get( 'nonces' ).edit, + id: attachment.id, + context: 'site-icon', + cropDetails: { + x1: 0, + y1: 0, + width: size, + height: size, + dst_width: size, + dst_height: size, + }, + } ) + .done( function ( croppedImage ) { + frame.trigger( 'cropped', croppedImage ); + } ) + .fail( function () { + frame.trigger( 'content:error:crop' ); + } ); } else { frame.setState( 'cropper' ); }