Add/gallery reordering

[jayrenteria]

Description

Added a click event to reorder the images in a gallery image block. This was from Contributor Day - WordCamp ABQ 2018

How Has This Been Tested?

Created a gallery in the editor, added up to 10 images, saved post. Edited the post, reordered the gallery images, saved post and checked in both editor and front end to confirm changes were made.
This was tested across Chrome, Safari, and Firefox on a Macbook Pro running Sierra 10.12.3

Screenshots (jpeg or gifs if applicable):

Types of changes

New Feature to allow reordering of images in gallery block.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code has proper inline documentation.

Edit: fixed task list markdown

[paulwilde]

Wouldn't reordering with drag and drop be much easier and much more expected for the end user? For 10 items it would take 9 presses to move an item from the end to the start versus a simple drag and drop.

I can imagine this being useful for keyboard users though.

[jayrenteria]

@paulwilde definitely. This was discussed at WordCamp, and we agreed that drag and drop was the better UX. We didn't see that Gutenberg had any drag and drop functionality that we could reuse, and we weren't totally sure about the process for implementing third party libraries. In the end didn't want to add bloat when we could accomplish the functionality while also keeping accessibility in mind.

That being said, I imagine drag and drop will be the next step! We could potentially add that in, do you have any guidance on adding libraries that could potentially be used in other blocks? Or maybe there's a library already there that we missed?

[paulwilde]

There is an active pull request (#4115) which implements drag and drop for blocks, so it's more than likely that it could be re-used to some extent to implement drag and drop for gallery images.

There is also an open issue (#743) about implement drag and drop for gallery images, although there isn't much activity with that.

[jayrenteria]

Awesome, I'll have to keep an eye on that PR, thanks for linking those!

[StaggerLeee]

If you do not add drag & drop function it would be huge step back, compared to old TinyMce handling of galleries.

[chriskmnds]

There is an active pull request (#4115) which implements drag and drop for blocks, so it's more than likely that it could be re-used to some extent to implement drag and drop for gallery images.

That is the plan indeed. No point in not having both though imo - after all the d&d for blocks is not touch friendly yet.

[karmatosed]

Thanks for the exploration, but from a design view I think it would be better to have drag and drop over this. It feels confusing to have all those interactions on hover. I think we can close this and go to drag and drop as the first step, I don't think we need an interim step.