Element positioning (drag & drop)

[ThierryA]

The goal is to allow a user to add a block to a page and then drag it wherever they want, including on top of other elements (e.g. Text block on top of an Image block)

• Make all top-level elements absolutely positioned (except for background image and CTA); add draggability of elements
• Automatically position newly added element when inserting a new block
• Add drag/drop reordering of elements in table of contents (contribute via Gutenberg)
• Eliminate layer blocks
• Ability to select and reorder elements (change z-index by virtue of document order (⬇️/⬆️ ), not changing the z-index CSS property).
• Also consider “bring to front” and “send to back” options. Also, consider whether user confusion for ⬇️ actually meaning to raise an element in the stack, and ⬆️ to lower an element in the stack.

[miina]

@ThierryA / @westonruter Is there a specific Gutenberg issue you had in mind to contribute to for the drag-drop within the block navigation (table of contents) or is this something that we should start?

[westonruter]

@miina Here are a few:

• Promote table of contents for navigation of nested blocks WordPress/gutenberg#9053: Promote table of contents for navigation of nested blocks
• Enhance the tools for selecting child/parent blocks WordPress/gutenberg#9628: Enhance the tools for selecting child/parent blocks
• Drag & drop reordering of "chapters" in the Table of Contents WordPress/gutenberg#5301: Drag & drop reordering of "chapters" in the Table of Contents
• Reordering of blocks inside block navigation WordPress/gutenberg#11408: Drag & drop reordering of blocks inside block navigation

[miina]

On drag & drop for the block navigation: although it's possible, it's probably not reasonable to rely on getting it merged to Gutenberg within the timeframe. I'm thinking that perhaps we could create the functionality locally and just replace the default navigation with the "enhanced" one for the purposes of AMP Stories; at the same time, we can already create a PR with the same code to the Gutenberg codebase as well.

This way we wouldn't have to rely on processes not dependent on us but could still use the drag-drop with navigator + propose it to core, too. Once it gets merged we can just remove the "local" version.

Thoughts, @westonruter?

[westonruter]

@miina that sounds good. However, I think the drag & drop in block navigation should be the last item tackled here. I'm guessing that users would not frequently need to change the z-index/order. Normally they would intuitively add an image and then add the text to put on top of the image, not the other way around. Even then, if they want to change the order, they could use the ⬇️/⬆️ buttons for quick change to the order. Being able to drag & drop in the navigation would be rounding out the feature. But I think it's more important to focus on the other items first, since they are more challenging.

[miina]

Sounds good, I was actually planning to start with the drag & drop of the blocks (and not the block navigation) first but wanted to account for all the todo-s in planning.

[miina]

@westonruter On the UX: should we try to replace the existing functionality of the dragging icon, the one that is displayed between the Up and Down arrow by default (remove the currently existing icon and replace it with a custom one)? Or were you thinking it would be good if a block would be draggable from anywhere?
Since the icon for dragging already exists then I'm wondering if it would make sense to (try to) keep it as similar to the original UI as possible. But perhaps you already had a discussion on this. Thoughts?

[westonruter]

@miina That's a good idea. Re-using the existing drag icon makes sense to me. It would be somewhat overloading the meaning of it, since it would no longer about changing the relative block order but rather the coordinate position. But there would not be any way to use the grab bar to re-order relative to the position of other blocks, so I think it makes sense. The up/down arrows could retain their original behavior, if we keep them.

Something else to keep in mind is what to do with the rotation handle, like in Google Slides:

I assume that there would be grab handles on the bottom and right for all blocks, similar to how the image block has it today. But this rotation handle would be something new. I'm not sure where that would be incorporated.

[swissspidy]

I don't think we can use the existing BlockMover for this. But why not make it possible to drag the whole block? Perhaps only when it is not selected.

The up/down arrows don't make much sense any more IMO when an element can be positioned anywhere on a page.

As for rotation, we can think about it later as it's handled separately by https://github.com/ampproject/amp-wp/projects/10#card-17824998.

[westonruter]

But why not make it possible to drag the whole block? Perhaps only when it is not selected.

Only allow a block to be dragged when it is not selected? That would be counter-intuitive I'd think.

[miina]

@swissspidy We don't have to use the existing BlockMover but we can replace it leaving the UX the same. Actually, just for the purposes of drag-drop, we can use the existing one as well -- we can just filter the drag-drop zone.

For the up/down arrows -- we will need something for changing the order of the elements, the Up/Down arrows would be better labeled "Bring to Front" / "Send to back" instead, the functionality can stay the same. Still -- for changing the labels and icons we might need to replace the BlockMover completely.

On making it possible to drag the whole block -- it seems to me that it would be better to use the existing UX of Gutenberg to create as few new UX changes as possible, Gutenberg can already be quite confusing for those who aren't so involved with it. I'd vote for reusing the UX that already exists to make it as familiar for the new AMP Stories users as possible. Thoughts?

[swissspidy]

Only allow a block to be dragged when it is not selected? That would be counter-intuitive I'd think.

I was using Instagram Stories a lot the last couple of days and it was just super easy to grab the whole text and drag it somewhere. As for the selected part, it was just a thought off the top of my head. Sounds odd to be able to drag the whole element while you're typing, makes it hard to select text.

[westonruter]

Sounds odd to be able to drag the whole element while you're typing, makes it hard to select text.

Good point. I suppose that is why it is important to have the block mover handle so that it can be dragged while it is selected.

[swissspidy]

#1953 landed, so let's close this one.

Add drag/drop reordering of elements in table of contents (contribute via Gutenberg)

Moved that to a new issue, #1974, as I think it needs some more thought.

[csossi]

Verified in QA