Try to make change image flow clearer

[draganescu]

Description

Trying to move #11952 forward by:

• changing the image block to have a single flow to edit the image: media placeholder -> image source selector -> image source UI -> image, and hence remove the current behaviour where the edit mode is different for uploaded media vs URL media
• having the toolbar icon changed to a (in my opinion) better icon and switching between modes, to make is visually clear that clicking it again returns the UI to the previous mode
• added double click as an extra way to enter the edit mode by dblClick on the image and exit the edit mode by dblClick on the media placeholder

How has this been tested?

Localhost proof of concept

Screenshots

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[noisysocks]

Some really creative ideas here, nice work! Would love some design input from @mapk or @melchoyce.

Whatever we decide, it would be good to make these changes for every block that has a similar placeholder flow so that there's some consistency throughout the interface. (Let's wait to see what the design team thinks, first, though!)

[kjellr]

This is a great exploration, @draganescu. Upon testing, I have a few suggestions:

1. We should swap out the toolbar image icon with the image icon used for the block itself. (Or, come up with something else? Maybe a "swap" icon?)
2. When the replace image icon is selected, rather than switch it to a close button, it might make sense to just have it appear active.
3. I think we should do a few small adjustments to the placeholder area if possible:
   • Keep the width/height the same as the original image, so this mode feels more like a different "mode" for a block, and less like you've removed this image entirely.
   • Add a little thumbnail of the current image for reference.
   • Add a small "Cancel" text link below the buttons.

Here's a mockup for reference:

I built a quick prototype to test the idea:

https://www.figma.com/proto/dBoTFOx0JhMdxLt2R3WRO1Da/Gutenberg-Replace-Image?node-id=1%3A516&viewport=159%2C425%2C0.5&scaling=min-zoom

[melchoyce]

Love that iteration, @kjellr — the action feels more intentional, if that makes sense? Plus, the added context of "this is the image you're replacing" makes the transition feel much less jarring, IMO.

[kjellr]

On second thought, perhaps we try a swap/replace sort of icon in the place of the image icon here? Here's an example:

The SVG is here if you'd like to try it out in the PR: https://cloudup.com/cXuEmylGcCQ

[mapk]

The SVG is here if you'd like to try it out in the PR: https://cloudup.com/cXuEmylGcCQ

The new icon is excellent! It makes much more sense in the toolbar now.

I also really like the points you've noted in number 3 above, @kjellr.

@draganescu Thanks for getting us to think about this differently. Your explorations kicked off some fantastic ideas.

[draganescu]

Keep the width/height the same as the original image, so this mode feels more like a different "mode" for a block, and less like you've removed this image entirely.

This is nice but will not work when the image is smaller than the width of those buttons plus some padding or when the image is resized to be smaller than that. So there will be cases when we keep the image size as the edit mode box size and cases when we don't. Also full width images will show a huge edit mode UI in big screens.

[kjellr]

This is nice but will not work when the image is smaller than the width of those buttons plus some padding or when the image is resized to be small than that. So there will be cases when we keep the image size as the edit mode box size and cases when we don't. Also full width images will show a huge edit mode UI in big screens.

Good call. Let's implement the new icon and add the thumbnail + cancel link inside of the placeholder, and see how that feels. That alone will be a really solid improvement.

[draganescu]

Hi @kjellr,

I have updated this PR and it now behaves like this:

So the PR adds:

• a new icon that toggles edit mode and itself as active / inactive
• updates the media placeholder with a cancel link
• updates the media placeholder for the image block with a preview of the image being replaced
• leaves all other blocks using the media placeholder as they are

@noisysocks could you take a peek at the changes starting here because they look kinda hackish to me and I am unsure of all that nesting :)

[mapk]

@draganescu excellent! In the Replace Image screen, can we drop the image margin from 5% to 3%? I think it feels better at that size.

I'd hate to add more, but can we add this to the Media+Text block as well?

[draganescu]

@aduth @talldan rebased and re-tested locally after all the updates, worked OK for me. I will have a separate issue/PR for adding specific e2e tests.
@kjellr we're kinda done implementation wise, if there isn't anything blocking for this PR I'll merge it asap :)

[talldan]

Looks like all the changes are addressed, merging this.

[kjellr]

This is excellent, thanks @draganescu! Such a helpful improvement.

I've opened #14795 to help track efforts to roll this out to other blocks as well. 👍