Improve UX of image crop/edit tools

[richtabor]

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.

Current flow:

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:

1. 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.

2. 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).

3. 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.

4. Update the "Aspect ratio" icon to be a bit more clear.

5. 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.

6. 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

[mapk]

Great review, Rich! I like that you've explored a way to keep the crop icon in position and toggle the new features in one compact area. It appears that the UI for this is undergoing continual changes right now. My recent pull shows a slightly different UI.

That being said, I jumped in with another exploration on the toggle riffing on your work.

To address your numbered points:

1. Good call. I like that icon staying in one place.
2. The toggle works well as a way to open new interactions.
3. I followed the drawer concept in my iteration as well. It feels pretty natural. With the additional explorations from Shaun about toggling a URL inserter in the toolbar for certain blocks, this could work really well.
4. The new icon is much more clearer for me.
5. I prefer the zoom RangeControl as it is now – an addition to the feature options in the toolbar.
6. Saving without having to click "Apply" is a great suggestion. I'd hate to lose the edits by accidentally clicking away.

[shaunandrews]

I think the image tools could take a cue from the proposed Link UI updates in #23375 and "take over" the entire block toolbar.

[mapk]

My animation is off, but here's a go at the editing controls taking over the entire toolbar.

[richtabor]

I think the image tools could take a cue from the proposed Link UI updates in #23375 and "take over" the entire block toolbar.

I like that even better! Especially if we decide that plugins can add their own image editing capabilities to the mix (such as image filters, exposure editing, contrast, saturation even). Leaves more room for the actually useful items within context.

I wonder if the "Done" language should be consistent as well. "Apply" is interesting, because as we know, the image edits are not technically applied, but to a user seeing the changes as they edit, they have been.

[richtabor]

Is there any reason we wouldn't want to use the label "Edit" instead of the crop icon?

[shaunandrews]

Is there any reason we wouldn't want to use the label "Edit" instead of the crop icon?

I can see how using a text label would be tempting, but I think the icon provides a visual anchor between the default Image block toolbar a potential "image editing" toolbar.

[aaroncampbell]

Is there any reason we wouldn't want to use the label "Edit" instead of the crop icon?

I can see how using a text label would be tempting, but I think the icon provides a visual anchor between the default Image block toolbar a potential "image editing" toolbar.

My thought here is that a crop icon takes you to a tool that lets you crop, rotate, zoom, etc. I admit I'm partial to the "edit" text label, but if we keep an icon is there one that might better convey an array of editing options?

[mapk]

There is agreement on the toggle functionality of the edit tool to open up a group of edit tools. I worked through some iterations trying to understand which items, if any, should remain visible in the block's toolbar when the edit image tools are toggled.

A is the toggled state from this comment.
B includes A and also removes the ellipses.
C replaces all icons in the toolbar except the Block Type which might still be valuable for the user.
D replaces the entire toolbar with the edit image options.

I'd love some feedback around which of these is the right path to go down. Much of this can be edited in a PR, but it would be good to have a strong beginning.

[mapk]

In regards to icons I've checked in with a few people and got this feedback.

1. It would be good to get an image editing icon that includes more than just cropping. Maybe something like the iOS icon?
   
2. The zoom "magnifying glass" icon is too similar to the search icon. Can we find a new "zoom" related icon?
3. The new aspect ratio icon Rich suggested could be tightened up a bit more.

[shaunandrews]

Option D makes the most sense to me, and is consistent with the proposed Link UI. I'd suggest removing the vertical line between the rotate icon and "Apply" as well; Its not doing too much.

--

The crop icon seems fine to me, as most of this editing is actually cropping, but I can see how it could be confusing. I think combining the crop and rotate icons is a good solution.

I don't mind the magnifying glass too much, but maybe we could add a + to help differentiate it from search. Something like this:

[richtabor]

Option D makes sense to me as well. We're focusing the current contextual actions with the invoked editing tools. Makes sense to me.

[mapk]

"Search" icon on the left. A "Zoom" icon on the right.

[mapk]

I think we can move forward with a PR for option D. Once this is working, we can refine icons in the PR if needed.

[paaljoachim]

@ajlende Alex I believe this would be an issue for you to take a closer look at.

[paaljoachim]

Btw I tried cropping a few days ago the bottom area of an image. I could not figure out how to do so. It would be great to improve this aspect of the image tools.

[webtrainingwheels]

Is there any reason we wouldn't want to use the label "Edit" instead of the crop icon?

In the current state of the image block, Edit would be more appropriate.

To @paaljoachim's point above, and also seen in this thread: https://wordpress.com/forums/topic/i-need-help-with-cropping-an-image-in-my-blog-post-using-the-block-editor/, the Crop icon is very misleading because there isn't a true crop function on the image block. The gridlines and crosshair cursor imply that you should be able to click and drag on the image to select the area to crop, but in reality you have to go into Aspect Ratio for any kind of select tool.

Compare to the Crop function in Media > Edit which acts how one would expect (click, drag, crop, boom!)

Until the image block has that same kind of complete crop function, using the crop icon or variation of it should be avoided because it's quite confusing/misleading. Not to mention having the same icon in 2 places (Media screen and Image block) representing different functionality is also a bit confusing.😬🙃

[annezazu]

Passing along some feedback that came in through the FSE Outreach Program's All Things Media exploration that relates to the specific experience around rotating:

Rotate was..weird? One of the images I had was inherently a very large image, and it would go to its full size when I tried to rotate. I expected it stay the same size it was in the gallery, and it made the experience kind of awkward. I also kept wishing for some more information that would tell me how much it was rotated (especially since the image got huge and I couldn’t really tell), something like 90, 180, 270. I found myself checking the rotate icon itself to see if it had changed (rotated to move where the little arrow was) so I’d know how much rotation I had just done.