Proposal for supporting wide widget controls

[westonruter]

When a wide widget control is collapsed, the triangle arrow that normally points downward instead points rightward:

When a wide widget control is expanded, the arrow switches to be leftward pointing, to indicate the direction it will collapse.

When you focus on a wide widget control, the corresponding widget-top will highlight to indicate which widget it is part of:

If there are multiple wide widget controls open at a time, hovering over the control or the widget title will indicate the two are connected:

Todos:

• Ensure that newly-added wide widgets also properly initialize
• Ensure that focused/hovered wide widget control has the higher z-index
• Stop allowing multiple controls to be open at a time?
• Position wide widget control vertically along with corresponding widget-top
• Allow wide widget control to be dragged to another location over the preview?
• Allow widget control to be made transparent to see through it?

Fixes #18

[shaunandrews]

Heh. Dig the subtle messages to me in the screenshots. :)

I think this is a good solution — I'm still a little uneasy about having a different UX for wide widgets, but this works.

I'll play with the positioning of the controls so they're closer in context to the widget-top — and maybe add a pointer on the controls to help make the connecting between them and the widget being edited.

Nice work.

[westonruter]

@shaunandrews I updated my sample single widget plugin as depicted in the screenshots 😉 https://gist.github.com/westonruter/7141599

[shaunandrews]

Awesome.

Shaun

On Feb 7, 2014, at 12:04 PM, Weston Ruter notifications@github.com wrote:

@shaunandrews I updated my sample single widget plugin as depicted in the screenshots https://gist.github.com/westonruter/7141599

—
Reply to this email directly or view it on GitHub.

[PeterKnight]

Awesome! it worked well with my own widget plugin. I noticed black tinymce widget had some trouble showing up properly, might be due to it not loading its scripts on the customizer screen.

What is supposed to happen when a user has a wide widget control open and they then click 'add widget'?

[westonruter]

• Close any expanded wide widget controls when clicking Add Widget.

😄

Yes. The Black TinyMCE plugin isn't coded in a way that makes it compatible, it seems. I looked at the source briefly, and it seems maybe that it just needs to be updated to use the right hooks, but that's just the impression I had.

[westonruter]

@PeterKnight fixed that issue in 05f0e15

[westonruter]

@shaunandrews @PeterKnight please review the latest changes.

The vertical position of the wide widget control now is kept in sync with the vertical position of the widget-top. If the widget-top is scrolled up out of view, then the widget controls remain stuck to the top of the screen. Likewise, if the widget-top is scrolled to the bottom, the widget controls will only go so far as the bottom of the screen. The idea is that the widget control should never get scrolled out of view while it is open:

Note also that now only one widget control may be opened at a time. I think this is actually as it keeps the customizer from getting cluttered with lots of expanded controls, and it makes it easier when multiple wide widget controls are expanded.

[PeterKnight]

I like these latest improvements a lot, the workflow is much better and working great so far on my install. I'm guessing next step is a better experience for when the widget control overlaps the widget in the preview?

[westonruter]

@PeterKnight I was kinda hoping that the ability to scroll the wide widget control up and down over the preview would allow the user to easily get it out of the way. If it is still stuck in the way, it could always be collapsed for a quick peek. Do you have any other recommendations? Two other thoughts are:

1. Allow the control to become transparent so you can see through it.
2. Allow the control to be manually dragged elsewhere over the preview.

[PeterKnight]

The problem with having the user scroll both widget control and widget into view is that it can be impossible to do. Take the black tinymce widget plugin,it takes up a lot of space and if the widget is inside a left sidebar, I can barely get a glimpse of it and that's with a 23inch monitor and maximized browser.

Transparency, I gave that a go but I don't think it would ultimately work, it wouldn't fly with accessibility folks I think because they'd say its giving up readability.

In terms of dragging the control. I think that works but it's another little thing for a user to learn to do. It would also be strange to do it considering that dragging widgets used to be a pain point in the main widget screens. On top of that, would the drag position be saved when the user decides to refresh the entire customizer page?

One alternative that shouldn't be too hard to test now is by doing a little calculating with jquery position and having the controls positioned left, above, or right of the widget in the preview depending on the screen size & height, widget width, and controls width & height. For example, twenty fourteen has a narrow left sidebar, it would be intuitive to place the widget control to the right of that.

I'd love to see how that stacks up in some user tests. I was thinking it might be nice to collapse the sidepanel at the same time so a user can maximum the screen real estate. An added benefit there would be that singular focus given to editing a widget.

[westonruter]

One alternative that shouldn't be too hard to test now is by doing a little calculating with jquery position and having the controls positioned left, above, or right of the widget in the preview depending on the screen size & height, widget width, and controls width & height.

Or widgets can appear in the center column or take up the entire page, for that matter.

For a very large widget, such as Black TinyMCE, it's the nature of the beast for them to be hard to fit in the UI. Given that the user can always just collapse the widget to see any widget in the preview that may be covered by the wide widget control, I think that this is going to be acceptable for now.

We can open additional issues/tickets for how to improve the previewability of changes to widgets with wide controls, but I think we've got a suitable solution in place right now to propose for merging into WordPress core.

@shaunandrews @MichaelArestad thoughts? If you agree that we're on the right track and this is an acceptable solution to move forward with, I'll merge the PR.

[westonruter]

Any additional tweaks can be added to the develop branch and discussion can continue on #18

[MichaelArestad]

Awesome. I'll take a look sometime tommorrow when I get back to Colorado. (Unless plane has wifi)-Michael

On Sat, Feb 8, 2014 at 9:17 PM, Weston Ruter notifications@github.com
wrote:

Any additional tweaks can be added to the develop branch and discussion can continue on #18

Reply to this email directly or view it on GitHub:
#89 (comment)