Navigation block: prevent drag & drop out of the editable list view sidebar

[annezazu]

Description

Using the new navigation block experience with Gutenberg 14.9, I noticed I could drag and drop the page list block out of the sidebar and onto the page, making for a very confusing experience.

Step-by-step reproduction instructions

1. Use GB 14.9 and open the Site Editor
2. Ensure a page list block is in place in the navigation block
3. Notice you can drag and drop the page list block out of the sidebar entirely seemingly causing the menu to disappear.

Screenshots, screen recording, code snippet

https://user-images.githubusercontent.com/26996883/211391725-8c3eb5ab-f915-4113-935f-92bd37842a3f.mov

Environment info

• WP 6.1.1
• GB 14.9
• TT3

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[getdave]

This is a great bug find. I'll take a look into it.

[getdave]

Was able to replicate but had to have other blocks in the canvas which I could drag the Page List into.

[draganescu]

This problem exists in the list view as well.

[getdave]

My plan here is to:

• add metadata to each dropzone to indicate it's context (i.e. canvas, list view...etc)
• add data to each drag operation indicating the original of the drag
• in the dragend event check whether the origin data in the drag event matches that of the dropzone and handle accordingly
  • if different - cancel the drop operation
  • if matching - allow the drop
• also it would be good to check if there's a way to do the comparison during the drag operation so that we can indicate which dropzones are appropriate for the given drag

[talldan]

Hmm, this is actually a feature, not a bug.

I guess it might not make much sense for the off canvas editor, but for the persistent list view it works that way on purpose. You can drag from the canvas into List View or the other way around.

[getdave]

Ah I see. Well thanks for clarifying. For the Nav block offcanvas this does not make sense to me so I still think we should "fix" it. What do you think @draganescu?

[draganescu]

You can drag from the canvas into List View or the other way around.

Does anyone actually do that and not think they broke the thing?

[talldan]

I don't really know why you would do it if it wasn't on purpose 🤔

[annezazu]

TBH I did it by accident and very easily when trying to rearrange navigation items. I think that's going to be a pretty common use case and it just takes a slight slip to drop it in the canvas.

[andrewserong]

I guess it might not make much sense for the off canvas editor, but for the persistent list view it works that way on purpose. You can drag from the canvas into List View or the other way around.

Thanks, I was just going to mention that this is a really useful feature for the main list view, so that folks can drag an item from the list view onto the editor canvas and see visually where the item is going to land.

That said, if it's important to fix for the cases of the navigation block or other potential uses of the list view, I quite like @getdave's idea of adding in some kind of context for the drag and drop (https://github.com/WordPress/gutenberg/issues/46994#issuecomment-1408839130) — it sounds like we'd want to still allow the drag and drop between the main list view and editor canvas, but not between the Navigation block's sidebar list view and the editor canvas.

[scruffian]

Thinking about this more, is this actually a problem? I think it behaves as I would expect as a user.

[annezazu]

I'll note that I did it completely by mistake when trying to use drag and drop. I found it pretty frustrating as it created more work for me to undo and it's not a common action I think anyone would want to take from there.