-
Notifications
You must be signed in to change notification settings - Fork 4.5k
Description
Is your feature request related to a problem? Please describe.
The current flow of image edit tools within the Image block are great, though the experience using the controls could be improved to better indicate the available tools, as well as clean up the interactions.
Notice how the "Insert Link" and "Crop" icon (the one pressed to trigger this edit flow) both disappear when the "Crop" icon is toggled. I almost think we should view the "Crop" icon as a toggle, instead of a "click it, it's gone" action step.
It's also unclear what new set of relative image editing tools are available, now that we're editing the image.
Describe the solution you'd like:
-
We switch the placement of the "Insert Link" and "Crop" icons, so that when the "Crop" icon is clicked and the "Insert Link" icon disappears (which again, is proper), the "Crop" toggle does not move from its current position.
-
The "Crop" icon is switched to a toggle functionality, much like a number of other patterns used throughout the editor (i.e. the new + inserter at the top left, the settings sidebar toggle).
-
Consider making the new icons/editing tools a "drawer" that slides out to reveal the additional tooling for editing the images. The styling in my prototype here resembles the new "dragging" indicator style, and makes it clear that these have been added to the toolbar for cropping/editing the image.
-
Update the "Aspect ratio" icon to be a bit more clear.
-
Bonus points: Move the "Zoom" RangeControl to live within the bounds of the editing experience, to not bounce/interfere with content below the currently manipulated image.
-
More bonus points: Currently we require pressing the "Apply" button to save any edits, but if you accidentally click outside of the block - any edits are reverted without any indication of what occurred. Perhaps we should consider auto-applying the image edits when the block is deselected. Potential flow would be to open the edit tools, configure however, then move on to the next. If that's the case, maybe we don't need the "Apply" button (though we'd need to test that UX).
Figma:
https://www.figma.com/file/xsxvEDmfi5ijzQrBQwVegN/Image-Crop-Flow?node-id=0%3A1
Figma Prototype: https://www.figma.com/proto/xsxvEDmfi5ijzQrBQwVegN/Image-Edit-Idea?node-id=1%3A29&viewport=415%2C794%2C1&scaling=scale-down&hide-ui=1
Metadata
Metadata
Assignees
Labels
Type
Projects
Status