Enhancement/128 ”Skip cropping” + “Free cropping area” added!

[faisal-alvi]

Description of the Change

• This PR introduces a new button “Skip cropping”, similarly to how the site icon is handled.
• And, the “Free cropping” area feature for avatar crops.

Closes #128

Alternate Designs

Possible Drawbacks

No more square restrictions in the crop, so the users who want it to be strict "Square", may have to manually crop the image and try to make it square. :|

Verification Process

1. Build the project npm run build.
2. Visit Users > Profile.
3. Click the “Choose from Media Library” button.
4. Select/Upload any image.
5. Click the “Select avatar and Crop” button.
6. Try to change the cropping area to any size and shape.
7. At the bottom right of the popup, see the “Skip cropping” button. Try using it.
8. Also, try cropping various shapes and see if that works.

Checklist:

• I have read the CONTRIBUTING document.
• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added tests to cover my change.
• All new and existing tests passed.

Changelog Entry

Added - “Skip cropping” button added.
Added - Free Cropping area introduced, no more strict squares!

Credits

Props @dkotter @faisal-alvi @cadic

[cadic]

Code looks good, except one small indent problem

[dkotter]

I know this has been merged already but is it worth discussing this Possible Drawbacks point:

No more square restrictions in the crop, so the users who want it to be strict "Square", may have to manually crop the image and try to make it square

In the issue I opened, I mentioned that it seemed like we should allow crops other than squares but that is only my opinion. I'm assuming the decision was made initially to force this to a square for a particular reason, so just want to see if there's any other feedback on that before this is shipped? I think for sure the "skip crop" option is needed but there may be a good reason to keep the square size restriction

[jeffpaul]

Any chance that it supports a shift+click function that locks the crop ratio to a square? I agree that it would be nice to keep it "simple" for someone to crop in a square while still allowing for non-square crops for whatever reason (like the one in the original dotorg report).

[faisal-alvi]

Agree, I will check about shift+click or any other possibilities, otherwise, we might have to add a custom button for square shape.

An example screenshot from https://www.fotor.com/features/crop,

[cadic]

Maybe there is a change to overload the onSelectChange event of imgAreaSelect jQuery plugin which is used to crop attachments?

https://github.com/WordPress/WordPress/blob/766a38f2fb420aafb9049ffe43e4a04f35a0c7c8/wp-admin/js/image-edit.js#L786-L800

[victorberland]

Is there an ETA for when this will be released?

[faisal-alvi]

@victorberland this is on hold to be released until #131 is implemented because as per discussion in #130 (comment), we have to consider the following possible drawback. So probably, this would be implemented by the end of this month and released the early next month. 🤞🏻

No more square restrictions in the crop, so the users who want it to be strict "Square", may have to manually crop the image and try to make it square

[faisal-alvi]

Is there an ETA for when this will be released?

@victorberland we are glad to inform you that we have a new release v2.5.0 which contains the "Skip cropping" button from this PR.

https://wordpress.org/plugins/simple-local-avatars/