Add support for wide widget form controls

[westonruter]

Widget form controls are able to specify their widget, like if a widget's form needs extra space to be able to fit the fields inside of it. We should allow customize widget form controls in the customizer panel to expand outside of the sidebar area when they are expanded.

But how can a wide widget control expand over the preview?

[westonruter]

via @helenhousandi‎: http://plugins.svn.wordpress.org/css/trunk/motif.js

[westonruter]

Actually, the consensus may be to eliminate support for wide widget controls altogether.

[shaunandrews]

We should allow customize widget form controls in the customizer panel to expand outside of the sidebar area when they are expanded.

No, we shouldn't.

[westonruter]

@shaunandrews 😄 OK! 👍

[westonruter]

@shaunandrews here's another instance of wide widgets: the Jetpack Widget Visibility module.

See the relevant code in widget-conditions.js which tries to force a widget form control to be wide:

// The expanded widget must be at least 400px wide in order to
// contain the visibility settings. IE wasn't handling the
// margin-left value properly.

if ( $widget.attr( 'style' ) )
    $widget.data( 'original-style', $widget.attr( 'style' ) );

var currentWidth = $widget.width();

if ( currentWidth < 400 ) {
    var extra = 400 - currentWidth;
    $widget.css( 'position', 'relative' ).css( 'left', '-' + extra + 'px' ).css( 'width', '400px' );
}

I've added a commit (5d6dd72) to try to prevent plugins from forcing widgets to be wide in the customizer and break the layout, but doing so could break the layout of the control's contents.

/cc @cfinke

[westonruter]

As noted in #39, here's how the Widget Visibility controls now look when rendered in the customizer:

[westonruter]

@shaunandrews here's an extreme example of wide widget form controls: http://wordpress.org/plugins/black-studio-tinymce-widget/screenshots/

[westonruter]

Another extreme example: http://wordpress.org/plugins/mini-loops/screenshots/

[westonruter]

http://core.trac.wordpress.org/ticket/26117

[PeterKnight]

Right now it's pretty difficult to expand the width and have it expand outside the side panel, at least not without a bunch of js trickery. I've tried floating a widget outside the side panel altogether but that comes with a usability cost.

Any thoughts on displaying the widget controls floated next to the actual widget in the page?