Amp-wp: Allow reordering of pages by dragging the carousel indicators

[swissspidy]

Underneath the pages there are little bars for every page in the story.

For faster creation of stories it could be useful to be able to quickly reorder pages by dragging around these editor carousel indicators.

Demo

• https://youtu.be/TZUo0YUGXDU

Changelog entry

• Added support for reordering pages by dragging carousel indicators

[swissspidy]

For reference, #2910 was a previous attempt at this.

[miina]

Starting looking into this.

[miina]

Any thoughts on if / how to make it more understandable where to is the reordered page being moved? E.g. perhaps displaying small Page numbers on each indicator while dragging is happening?

cc @cathibosco @swissspidy

[swissspidy]

You mean showing the page numbers below _all_ indicators while an element is being dragged? That could work.

[miina]

Thoughts, @swissspidy?

I wonder if it might make sense to always display the numbers instead since it can get confusing with multiple pages, e.g.:

Not sure. @cathibosco any thoughts? Perhaps there's a better alternative.

[cathibosco]

@miina Based on the mockups above, I do think it makes sense to have the number displayed for the page sequence...
It also makes sense to have them always display (rather than to display only on drag action) based on the UX of the editor currently.
Of the two mockups ups above: I think the position of the number in this mock up is the most useful.

Note: As the user selects the page to move or work on, the bar or page indicator gets highlighted - perhaps the number could also become a darker color or bold to highlight as well.

[miina]

Screencast: https://www.dropbox.com/s/fbwwj1uky3shhm5/reordering_carousel.mp4?dl=0

[miina]

Instructions for testing:

• Add a few pages
• Verify that the pages have page numbers displayed in the carousel below
• Verify that it's possible to reorder the pages by dragging the carousel indicators (and that they are moved to the correct location).

[csossi]

Am unable to drag the bars along the bottom successfully - pages above aren't changing position

[barklund]

Am unable to drag the bars along the bottom successfully - pages above aren't changing position

Yes, there's a bug for it in #3464.

[miina]

Looks like #3412 (using hooks where possible) caused this regression. _Looking into this_

[miina]

Ok, looks like #3412 removed the DropZoneProvider, assuming that unintentionally and will add it back.