Gallery Block: adding buttons to remove image from galleries inline

[youknowriad]

fixes #2128

[mtias]

I think you should "select" an image before being able to remove it. That should help with UI noise as well. (I explored it a bit in an old captions PR.)

[codecov]

Codecov Report

Merging #2658 into master will decrease coverage by 0.07%.
The diff coverage is 14.28%.

@@            Coverage Diff             @@
##           master    #2658      +/-   ##
==========================================
- Coverage   31.38%   31.31%   -0.08%     
==========================================
  Files         177      178       +1     
  Lines        5413     5429      +16     
  Branches      949      949              
==========================================
+ Hits         1699     1700       +1     
- Misses       3139     3154      +15     
  Partials      575      575

Impacted Files	Coverage Δ
blocks/library/gallery/index.js	62.5% <ø> (+29.16%)	⬆️
blocks/library/gallery/gallery-image.js	55.55% <100%> (+5.55%)	⬆️
blocks/library/gallery/block.js	11.76% <11.76%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f445861...fe7dd08. Read the comment docs.

[youknowriad]

I think you should "select" an image before being able to remove it

how should we "show" the selected state? A stronger border on the image? any design proposals?

[mtias]

This was Joen's proposal back then:

[mtias]

For reference: #1831

[munirkamal]

This looks great addition to the gallery block. Also how about adding the possibility to re-arrange the images in a gallery block inline, by simply drag-n-drop?

May be extending the "Joen's proposal" and add another icon for "move" which would allow to hold that image and move it within gallery block to drop on the desired place.

[youknowriad]

@mtias this toolbar in this proposal could overlap the block's controls toolbar. I'm putting it under the image to start.

[youknowriad]

After several attempts, I think showing the menu inside the image is the best approach for now. We'll have to revisit the "overflow: hidden" style of the wrapper if we want something like the proposal (above or under the image)

[youknowriad]

@munirkamal there's an issue for that too #743 ;)

Feel free to add any complementary proposal/idea on the issue.

[karmatosed]

Looks good to me 👍

[mtias]

@youknowriad I think the X was better in this case, as the trash icon can sort of imply "deleting the image".

[karmatosed]

On seeing your comment @mtias I took a step outside and saw what existing pattern there was on in WP.

In actual images:

It made me think how obvious hovering is to seeing deleting. Would it maybe be good to see like this? Perhaps that's something to investigate though in testing.