WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#25952 closed enhancement (fixed)

Allow widgets to be dropped onto closed sidebars

Reported by: shaunandrews Owned by: azaozz
Milestone: 3.8 Priority: normal
Severity: normal Version: 3.8
Component: Widgets Keywords:
Focuses: Cc:
PR Number:

Description

It should be possible to drag-and-drop a widget onto a closed sidebar. @azaozz has an initial patch, but this needs more consideration.

Attachments (8)

25952.patch (860 bytes) - added by shaunandrews 6 years ago.
25952.2.diff (2.8 KB) - added by shaunandrews 6 years ago.
Dragging a widget over a sidebar will highlight. Dropping it will clone it and save the sidebar.
25952.3.diff (4.4 KB) - added by azaozz 6 years ago.
25952.4.diff (4.3 KB) - added by shaunandrews 6 years ago.
Changing the hover class to make a little more sense, and refreshing the css patch.
25952.5.patch (19.9 KB) - added by azaozz 6 years ago.
25952.6.patch (17.1 KB) - added by azaozz 6 years ago.
25952.7.patch (17.3 KB) - added by shaunandrews 6 years ago.
Updating styles for sidebar description and widget-hover class.
25952.8.patch (17.9 KB) - added by azaozz 6 years ago.

Download all attachments as: .zip

Change History (23)

@shaunandrews
6 years ago

@shaunandrews
6 years ago

Dragging a widget over a sidebar will highlight. Dropping it will clone it and save the sidebar.

#1 @shaunandrews
6 years ago

A quick video of the 25952.2.diff in action: https://cloudup.com/cNpXPAOBe3w

@azaozz
6 years ago

#2 @azaozz
6 years ago

In 25952.3.diff:

  • Clean up the JS a bit.
  • Reuse addWidget() to process the widget after dropping.
  • Fix a problem with disappearing reference element when dragging the widget over an open sidebar and then dropping it on a closed sidebar.

The css will need some refresh/tweaks.

@shaunandrews
6 years ago

Changing the hover class to make a little more sense, and refreshing the css patch.

#3 @shaunandrews
6 years ago

Dragging a widget from a sidebar over to a closed sidebar doesn't work. The closed sidebar highlights on hover as expected, and once you drop the widget, the closed sidebar opens, but the widget isn't moved.

@azaozz
6 years ago

#4 @azaozz
6 years ago

In 25952.5.patch:

  • Include the sidebar title in the sortable making it possible to drop widgets on the title. That increases the drop area and lets the user drop on a closed sidebar.
  • Fix expanding widgets.
  • Some css and js cleanup.

This works well but requires that we change the html outputted from wp_list_widget_controls() a bit. That may break couple of plugins. It is possible to add another agr to output the "new" html.

However I'm still not fully convinced this makes it more useful. As the new widgets screen layout emphasizes the sidebars, perhaps better would be to have them all open on page load. Also, maybe the left and right areas can scroll independent from each other making it possible for the user to see the desired widget and the desired sidebar side by side. That would make dragging and dropping any widget in any sidebar much easier.

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

#5 @SergeyBiryukov
6 years ago

  • Milestone changed from Awaiting Review to 3.8

#6 @westonruter
6 years ago

  • Cc weston@… added

#7 @shaunandrews
6 years ago

I think 25952.5.patch makes things worse. 25952.4.diff seemed like a simpler interaction, and solved the root problem.

#8 @azaozz
6 years ago

In 26285:

Widgets: split the sidebars in two containers so there are no empty spaces when they are shown in two columns and some are open, other closed. See #25952.

#9 @azaozz
6 years ago

In 26286:

Widgets: fix html for sidebars columns when the theme has only one sidebar. See #25952.

@azaozz
6 years ago

#10 @azaozz
6 years ago

In 25952.6.patch:

  • Fix possible regression in wp_list_widget_controls(), add an optional argument to output the sidebar name inside the sortable container.
  • Lock the sortable containers min-height while dragging to prevent them from jumping when moving a widget to a closed sidebar.
  • Move widgets dropped on closed sidebars to the top. UI Sortable places them randomly near the bottom.

Also tried to implement "jump-open" when holding a widget over a closed sidebar, however UI Sortable randomly fails to activate after the timeout and the dragged widget cannot be placed properly.

@shaunandrews
6 years ago

Updating styles for sidebar description and widget-hover class.

#11 @shaunandrews
6 years ago

In 25952.7patch:

  • Tweaks the styles for the sidebar description, removing the border-top and adding padding to align it with the rest of the text in the sidebar. Added a margin-top: -5px; to bring the description slightly closer to the sidebar name, making the context more obvious.
  • Removing the gauche blue glow on closed sidebars when a widget is dragged overtop. Replaced it with a more subtle border color change, slight box-shadow, and subtle opacity.

@azaozz
6 years ago

#12 @azaozz
6 years ago

In 25952.8.patch:

  • Merge the styling changes from 25952.7.patch.
  • Kill some more !important and fix the draggable helper's size.
  • Refresh after [26366].

#13 @azaozz
6 years ago

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

In 26426:

Widgets: drop onto closed sidebars.

  • Make dropping a widget easier by preventing the source sidebar from resizing while the widget is being dragged.
  • Move widgets dropped on closed sidebars to the top. UI Sortable places them randomly near the bottom.
  • Fix possible regression in wp_list_widget_controls(), add an optional argument to output the sidebar name inside the sortable container.
  • Updated styles for sidebar description and widget-hover class.

Part props shaunandrews, fixes #25952.

#14 @azaozz
6 years ago

In 26427:

Widgets: remove leftover debug bits and fix jshint warnings in widgets.js, see #25952.

#15 @ocean90
6 years ago

#21061 was marked as a duplicate.

Note: See TracTickets for help on using tickets.