Improvement to the Image Edit Block Placeholder

[mapk]

Currently the when the user goes to swap out the image in an image block with another image, the Image Edit placeholder comes up.

This works great, but I think the design can be refined a bit more.

1. "Edit Image" doesn't quite make sense here. The user can't really edit that image (ie. crop, resize, etc.). Maybe we say "Replace Image"?
2. The thumbnail might benefit from some improvements as well. Whether it floats left, or becomes smaller, etc.
3. Should the three buttons be stacked, or aligned in the same row?
4. Is the "Cancel" link the best solution here? Maybe take a look at a "X" in the corner? Or creating a way to just keep the image by clicking it, or something.

Just some thoughts for minor improvements.

[talldan]

I've worked on this a bit in the past (though it has been iterated on since). It definitely presented some challenges!

Should the three buttons be stacked, or aligned in the same row?

When thinking about this it's definitely worth considering how it looks when the 'Insert from URL' button has been clicked:

I originally put the button on its own to make sure it feels balanced with the popover in the middle when it's opened (and to make sure it doesn't overlap anything else). I definitely understand it looks unusual with the button on its own, but thought I'd share why the original decision was made.

Having said that, I'm still not completely convinced the popover for entering the URL is the right pattern, either.

Look forward to seeing options for tidying it up 😄

[enriquesanchez]

I was comparing this to how we handle basically the same operation on the media & text block and found some differences that caught my attention:

• On the media & text block, we use a pencil icon to represent the same action (Edit media vs. Edit image).
• On the media & text block, clicking the "edit media" icon takes you straight to the "Select or Upload Media" modal.
• We also don't present the option to "Insert from URL" in this case. Any reason why we do that?

I wonder if we can bring some consistency to these two blocks. Is there any reason why "media" is treated as a different type of upload?

cc. @mapk @talldan

[enriquesanchez]

I just came across #14795 and #15517 and looks like this flow is being implemented on other blocks, including media & text.

[mapk]

It appears there is other work happening here #11952 in regards to replacing an image which will most likely be carried over to the blocks that use images, so let's close this one out.