[wp-trac] [WordPress Trac] #30155: Fix crop image functionality within edit flow

[WordPress Trac]

#30155: Fix crop image functionality within edit flow
----------------------------+-----------------------------
 Reporter:  sonjanyc        |      Owner:
     Type:  defect (bug)    |     Status:  new
 Priority:  normal          |  Milestone:  Awaiting Review
Component:  Media           |    Version:  trunk
 Severity:  normal          |   Keywords:
  Focuses:  ui, javascript  |
----------------------------+-----------------------------
 The Image Flow team has done some user testing and the cropping
 functionality within the image editing flow is basically unusable, and not
 at all intuitive even for tech savvy users.

 Several things would need to be fixed in order to make it more usable and
 user friendly:

   1. When the user clicks on "Edit image" in the image flow, NO tool
 should be selected in the initial state of editing mode
   2. Upon selection of Crop tool, dotted crop lines should be around the
 edges of the full image (currently user needs to make the selection and
 most of the users didn't realize that)
   3. User should be able to scale crop area with handles and reposition
 crop area by dragging it
   4. Aspect ratio should be a visual representation with text (see mockup
 attached), and an option to input custom aspect ratio should be available
 (original, custom, 1:1, 3:2, 2:3, 4:3, 3:4, 16:9, 9:16)
   5. Selecting an aspect ratio should lock selection, so when user resizes
 selection it contains the aspect ratio
   6. When a user clicks on "Original" aspect ratio, it should reset
 selection to full image and lock in the aspect ratio of the image aspect
 ratio
   7. "Selection" numbers inside "Image Crop" shouldn't be an input field,
 but rather just reflect the selected image size without the ability to
 manually edit it (confuses users)
   7. When user chooses to use a custom aspect ratio, we should add an
 "Apply" button to set the custom ratio (currently it doesn't work properly
 with pressing tab)
   8. To save and apply the crop there should be one prominent button
 called "Apply crop" (currently the user needs to click on the crop tool
 again, which makes no sense and none of our test users could figure it
 out)

--
Ticket URL: <https://core.trac.wordpress.org/ticket/30155>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform