Add support for adding widgets

[westonruter]

It would be great if the great new widgets UI you're working on could be embedded within in a lightbox window that appears over the window when using the customizer (just like when you open the media manager). Widgets could then be dragged into the relevant customizer sections in the customizer panel (each sidebar could have its own section), and the preview window could then update to show the user what the site looks like with that widget added.

• Expand the widget control when it is first added to the sidebar.
• Prepend the added widget to the existing widgets added to the sidebar. (Need to prepend the widgets_sidebars setting.)
• Is WordPress keeping track of the multi_number outside of the widget form?
• Don't invoke the widget save option when first adding a widget (to avoid error messages).
• When removing a single widget, make option to add the widget enabled again.
• Fix restoring of single widgets (has initial previewing state, and instance override does not work since control looks at $_POST)
• When initially adding a widget, make sure it will appear in the preview even before saving.
• When adding a single widget which previously existed (and is now in inactive sidebar), the old instance should remain.
• Refactor all of this to eliminate PHP 5.3 dependencies
• Remove pre-preview filters once customize_register happens
• Refactor option transactions into separate class.
• What is wrong with adding the RSS Feed widget?
• Adding or reusing nonces for security? (e.g. in preview_new_widgets)

[westonruter]

See also the following customizer concept from the Widgets UI Refresh, featured in the Aug 26, 2013 meeting summary:

[westonruter]

See also my concerns about the above concept, specifically the "Select a template to add widgets to" part.

[westonruter]

I just realized a compact UI for adding widgets the Widget Customizer: as part of the (hidden) control for storing the widget orders, we could also include a drop-down of all registered widgets along with a button to add. Clicking add would insert a new widget form control at the top of the list, after which it could then be dragged to its desired location (see #1).

[shaunandrews]

Another idea for adding widgets by hovering in empty spaces in an area:

[bobbravo2]

@westonruter I was initially thinking this made sense as an additional control - however - the SRP dictates that there be two separate controls: one for adding new widgets, and another to control widget preview order.

I'll give you some feedback on my thoughts RE: separate control for widget order on #14

[westonruter]

@bobbravo2 sorry, what does “SRP” mean?

[shaunandrews]

Related to @westonruter recent comment on #16, here's a minor tweak that would work better with horizontally oriented widgets:

[westonruter]

@shaunandrews so for horizontally-oriented widgets, would this ADD WIDET divider/button be rotated 90°?

[bobbravo2]

@westonruter sorry... I'm an acronym geek..: SRP Single Responsibility Principal.

[westonruter]

@bobbravo2 thanks 😄 So regarding SRP, I think what I worked on over the weekend makes sense. The new control is "sidebar widgets" and it is for the setting which is just an array of the widget IDs contained in the sidebar. So since the setting itself handles both the ordering of the widgets, and which widgets are contained in the sidebar, it seems the customizer control can also logically manage both the ordering and the adding/removing of widgets from sidebars.

I think it worked out quite cleanly, if you look at the changes on #1 and then how easy it was to add dragging between sidebars in #24.

[westonruter]

I'm doing work in the issue-3-addition branch. Here's the initial UI for where a widget would be added to a sidebar:

[westonruter]

Screenshot with the select dropdown opened:

[westonruter]

I've reached a beta state for this widget addition feature.

[bobbravo2]

@westonruter love the drop down for adding new widgets - that's what I was hoping for. What do you think about adding the Chosen jQuery plugin to enhance it with search (search a widget's description / title / possible alternate keywords for new users)?

Chosen Demo
http://harvesthq.github.io/chosen/

[westonruter]

@bobbravo2 yes, I'd love to add Chosen or Select2 to improve the usability of the dropdown. From the Chosen demo, I assume the Standard Select or the Standard Select with optgroup would be the field we'd be interested in? I guess too we'll want to let the autocomplete match not only the title of the widget, but its description as well?

[westonruter]

Well, that was an epic effort. So happy with how it turned out! 😆

[westonruter]

To see the behavior for old-style single (non-multi) widgets, try this plugin which adds a test one: https://gist.github.com/westonruter/7141599

[jtsternberg]

+1 for Select2