WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#26168 closed enhancement (fixed)

Empty sidebars missing some indication of "droppablity"

Reported by: shaunandrews Owned by: iammattthomas
Milestone: 3.8 Priority: normal
Severity: normal Version:
Component: Widgets Keywords:
Focuses: ui Cc:

Description

Its not obvious that you can drop widgets into empty sidebars. MP6 has previously introduced a default "dropzone" area that made this more obvious.

Attachments (5)

Empty Sidebar.png (21.3 KB) - added by shaunandrews 6 years ago.
Empty sidebar without drop zone indicator
Suggested Dropzone Indicator.png (22.3 KB) - added by shaunandrews 6 years ago.
Suggested dropzone indicator
26168.diff (972 bytes) - added by shaunandrews 6 years ago.
26168.2.patch (3.1 KB) - added by azaozz 6 years ago.
drag-widget.png (27.3 KB) - added by azaozz 6 years ago.

Download all attachments as: .zip

Change History (15)

@shaunandrews
6 years ago

Empty sidebar without drop zone indicator

@shaunandrews
6 years ago

Suggested dropzone indicator

#1 @SergeyBiryukov
6 years ago

  • Keywords ui-focus added
  • Milestone changed from Awaiting Review to 3.8

@shaunandrews
6 years ago

#2 @shaunandrews
6 years ago

26168.diff​ adds an :after pseudo element to the #widgets-right .widgets-sortables. This element is always there, but widgets have a higher z-index so they hide it when placed.

#3 @iammattthomas
6 years ago

  • Owner set to iammattthomas
  • Resolution set to fixed
  • Status changed from new to closed

In 26413:

Reintroduce a drop zone indicator in empty sidebars on the Widgets page. Fixes #26168, props shaunandrews.

#4 @shaunandrews
6 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

#5 @shaunandrews
6 years ago

The drop zone added in r26413 is no where to be seen in /trunk...

Last edited 6 years ago by shaunandrews (previous) (diff)

#6 @shaunandrews
6 years ago

Looks like it was removed in r26426 due to conflicts with jQuery UI sortables. I've tried for nearly 90 minutes to add it back, but now that widgets no longer live inside their own div its way harder than adding an :after pseudo element. This will likely require some JS to add/remove a temporary placeholder for empty sidebars.

@azaozz
6 years ago

#7 @azaozz
6 years ago

...its way harder than adding an :after pseudo element.

Yeah, almost got it working with:

div#widgets-right .sidebar-description {
	padding-bottom: 45px;
}

div#widgets-right .widgets-holder-wrap:not(.closed) .sidebar-description + div,
div#widgets-right .widgets-holder-wrap:not(.closed) .sidebar-description + div.ui-draggable + div.widget-placeholder,
div#widgets-right .widgets-holder-wrap:not(.closed) .sidebar-description + div.ui-sortable-helper + div {
	margin-top: -45px;
}

However that makes the first widget in each sidebar shift position momentarily on drag start, which breaks the drag-helper in UI Sortable and makes it quite hard to place the widget properly.

How about 26168.2.patch: when starting to drag, add "highlighting" of all areas where a widget can be dropped, including closed sidebars. This makes it even more obvious than a placeholder in empty sidebars:


Last edited 6 years ago by azaozz (previous) (diff)

@azaozz
6 years ago

#8 @shaunandrews
6 years ago

I like that highlight effect, but it doesn't solve the root problem: it's not obvious that you can drop widgets into sidebars. Highlighting them once you drag the widget helps, but you have to try to drag the widget first. The dashed bordered "dropzone" indicator was more obvious as it was always visible in empty sidebars. It also had the benefit of making sidebars look less strange when they were empty.

I think the highlight in drag effect should go in regardless.

#9 @azaozz
6 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 26474:

Widgets: highlight all drop zones (open and closed sidebars) on starting to drag a widget to indicate "droppability", fixes #26168.

#10 @azaozz
6 years ago

I personally prefer the highlighting of all drop zones. If I remember right it used to work this way in the very first implementation of drag/drop on this screen, when it was using Prototype.js and Scriptaculous, before we adopted jQuery in core. Not sure why we stopped doing this.

It's true the user has to discover the "draggability" first, but having boxes with dashed border doesn't really help for that (if the user has never dragged a widget before, he/she wouldn't know these boxes are actually placeholders). On top of that these boxes are not visible on the screen initially as the first sidebar is usually populated with some default widgets and the rest of the sidebars are closed.

I know we lost the "move" cursor when hovering over an available widget, but the first couple of words on the screen (after the titles) are "Drag widgets". Perhaps we could also add a "pointer" for new users encouraging them to either drag the widgets or click-to-add from the available widgets.

Last edited 6 years ago by azaozz (previous) (diff)
Note: See TracTickets for help on using tickets.