Image Component: Add a cropping feature

[devinle]

Is your enhancement related to a problem? Please describe.

What is working: I am outputting the Block component within the block editor and it works fine. It adds the Replace and Remove items to the Media Toolbar, and functions well. Additionally, it is adding the Focal Point picker to the Image Settings sidebar.

What could be improved: I'd like to suggest adding another layer to this component, specifically an Image Cropping function. Ideally, it would add a new button to the Image Settings Inspector Controls (above or below the Focal Point mechanism) that would trigger a modal allowing an Editor to use the crop tool to fine tune the image. Functionality could be:

• Cancel (to close the modal and not save)
• Click and drag a cropper (auto save)
• Clear to remove all cropping

Then, upon closing the modal, and crop updates would reflect on the Image component, and display the image accordingly.

Designs

Describe alternatives you've considered

I have considered adding a "Crop image" to the InspectorControls, in addition to the already in place Image Settings panel, and it works fine. However, it's odd adding another panel separate from the Image Settings panel, and would rather have all Image settings together. Additionally, I want to be able to update the Image Component with the updated crop settings in the main display, which currently doesn't support this feature.

Code of Conduct

• [X] I agree to follow this project's Code of Conduct