Unable to drag a widget from one sidebar to the second when the last is not selected

[JustinyAhin]

Description

This issue was noticed during the test scrub of June 11.

In the widget screen, when dragging a widget from one widget area to the another, the drag & drop only work if the second widget area was previously selected. If it is not, nothing happens.

Step-by-step reproduction instructions

1. Install and activate a theme that have at least two widgets areas.
2. Go to Appearance > Widgets and add some core widgets in one widget area (Footer 1 for example). For example, Search or Recent Posts.
3. Try to drag one of the added widget in another widget area (Footer 2 for example)

Expected behaviour

The drag & drop of the widgets from one area to another should work out of the box.

Actual behaviour

The drag & drop of the widgets from one area to another only work if the second area was previously selected.

Screenshots or screen recording (optional)

CleanShot.2021-06-14.at.09.10.13.mp4

WordPress information

• WordPress version: 5.8-beta1
• Gutenberg version: Not installed
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme: Yes

Device information

• Device: MacBook Pro
• Operating system: Big Sur 11.1
• Browser: Firefox Developer Edition 90.0b5 (64 bits)

[noisysocks]

Thanks for the report. Looks like a bug. The blue line should appear on hover.

[getdave]

Just tested on 5.8 beta with the Gutenberg Plugin enabled and I got this which seems ✅

Screen.Capture.on.2021-06-16.at.11-49-15.mp4

I'm not sure if this is the expected behaviour but I can drag and drop between Widget areas.

[kevin940726]

Yes it still works but the UX is bit wonky. There's no blue line indicators when dragging into an empty block lists. The indicator sometimes disappear for no obvious reasons as well. This is also not a bug uniquely in the widgets screen, it's happening in every editor. I think we need to revisit the blue line indicator sometimes in the future.

In the meantime, how about we highlight the drop zone when dragging into them?

Kapture.2021-06-22.at.14.44.11.mp4

1. This is only going to show in the widgets screen.
2. The highlighting will only show if the widget area is empty.

The design obviously need some additional work, but curious what @critterverse think about this approach?

[critterverse]

Not exactly a 1:1 reference but maybe we can take inspiration from what happens to an Image block when you drag and drop to replace the image (notice how the blue outline appears as soon as the dragged item enters the canvas):

image-drag.mov

In this case, I think the outline of the empty appender block itself could turn blue with a 1.5px stoke inner stroke when the dragged item enters the widget area (rather than the dotted line surrounding the larger area).

When the dragged item is directly on top of the appender block, it could turn blue (I would lean towards this state displaying without the "+" sign since it's not adding a new block but could see it working either way). One drawback is that it would be nice for the drop zone to be bigger than the narrow appender but this might be a good solution that keeps us from introducing a totally new drop zone treatment until we can revisit the blue line indicator in the future.

[kevin940726]

@critterverse Thanks for looking into this! Do you mean something like this?

Kapture.2021-06-23.at.11.13.24.mp4

The blue background of the appender looks a little bit weird to me 😅, that's probably because of my styling though.

Would just showing the outline of the panel when dragging into it be enough? I think I could make it work so that dropping anywhere in the panel will move the block into it. And maybe we should make it work in all widget areas but not only the empty ones?

[critterverse]

Nice! I really like your suggestions @kevin940726:

✅ Only outlining the panel
✅ Making the drop zone the entire panel

Expanding to all widget areas – The only thing I'm wondering about this one is that it's nice to be able to choose the position with the blue line appender when there are existing blocks there.

One note is that I'm not sure you should see the outline on the panel that the block is being dragged away from. So in the video above, maybe you wouldn't get the blue outline on the Footer panel where the block is currently but only the destination panel. Nevermind :)

[kevin940726]

One note is that I'm not sure you should see the outline on the panel that the block is being dragged away from. So in the video above, maybe you wouldn't get the blue outline on the Footer panel where the block is currently but only the destination panel. Nevermind :)

I was working on this before I saw you scratched that 😆. Just being curious, why did you change your mind?

The only thing I'm wondering about this one is that it's nice to be able to choose the position with the blue line appender when there are existing blocks there.

Agreed. However, this is probably a bug in the editor package itself though. See #32880 for more wonky blue line indicator interactions 😝. (Also could use some of your amazing design ideas on that more general issue as well!)

[critterverse]

I was working on this before I saw you scratched that 😆. Just being curious, why did you change your mind?

I think the ideal scenario would actually be something like... don't show the outline when originally dragging away from the panel but if you leave the area of the panel and then return to it, the outline will display (because it's kind of nice to see that indicator of the drop zone when you've moving back and forth between panels).

But didn't want to complicate things too much and I think what we've got merged works well for now! Thanks @kevin940726 😁