WordPress.org

Make WordPress Core

Ticket #25952: 25952.5.patch

File 25952.5.patch, 19.9 KB (added by azaozz, 6 years ago)
  • src/wp-admin/css/colors-fresh.css

     
    15901590        color: #0074a2;
    15911591}
    15921592
    1593 div.widgets-sortables,
    1594 #widgets-left .inactive,
    1595 #available-widgets .widget-holder {
    1596         background-color: #fff;
    1597         border-color: #fff;
    1598 }
    1599 
    16001593#widgets-left #available-widgets {
    16011594        background: #fff;
    16021595}
  • src/wp-admin/css/wp-admin.css

     
    96829682.js .widgets-holder-wrap .sidebar-name .sidebar-name-arrow:before {
    96839683        color: rgba(136,136,136,.4);
    96849684}
     9685
    96859686.js .widgets-holder-wrap .sidebar-name .sidebar-name-arrow:before {
    96869687        content: '\f142';
    96879688}
     9689
    96889690.js .widgets-holder-wrap.closed .sidebar-name .sidebar-name-arrow:before {
    96899691        content: '\f140';
    96909692}
     
    999810000        margin: 10px auto;
    999910001        /* min-width: 50%; Not sure if this is needed */
    1000010002        position: relative;
    10001         border: none !important; /* ln 991 in colors-fresh.css */
     10003        /*border: none !important; /* ln 991 in colors-fresh.css */
    1000210004        box-sizing: border-box;
    1000310005        -moz-box-sizing:border-box;
    1000410006        -webkit-box-sizing:border-box;
     
    1003610038        width: 280px !important;
    1003710039        min-width: 280px !important;
    1003810040}
     10041
    1003910042.widget.ui-sortable-helper {
    1004010043        border: 1px solid #DEDEDE;
    1004110044        border-radius: 3px;
     
    1004310046        opacity: 0.8;
    1004410047        z-index: 2000;
    1004510048}
     10049
    1004610050.widget-placeholder {
    1004710051        border: 1px solid #dedede;
    10048         border-bottom: none;
    10049         margin: 0 auto;
    10050         height: 43px;
     10052        /*border-bottom: none;*/
     10053        margin: -1px auto 0;
     10054        height: 50px;
    1005110055        width: 100%;
    1005210056        background: #eee;
    1005310057        box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
     
    1005610060        box-sizing: border-box;
    1005710061}
    1005810062
     10063.widget-placeholder:last-child {
     10064        /*border-bottom: 1px solid #dedede;*/
     10065        margin-bottom: 8px;
     10066}
    1005910067
    1006010068/* Widget Sidebars */
    1006110069.sidebar-name {
     
    1006810076
    1006910077.sidebar-name-arrow {
    1007010078        position: absolute;
    10071                 top: 0;
    10072                 right: 0;
    10073                 bottom: 0;
     10079        top: 0;
     10080        right: 0;
     10081        bottom: 0;
    1007410082}
    1007510083
    1007610084.js .sidebar-name {
     
    1010910117
    1011010118/* Widgets Left - Available Widgets */
    1011110119
    10112 div#widgets-left {
     10120#widgets-left {
    1011310121        margin: 0;
    1011410122        padding: 12px 5% 0 0;
    1011510123}
    1011610124
    10117 div#widgets-left .closed .sidebar-name,
    10118 div#widgets-left .inactive-sidebar.closed .sidebar-name {
     10125#widgets-left .closed .sidebar-name,
     10126#widgets-left .inactive-sidebar.closed .sidebar-name {
    1011910127        margin-bottom: 10px;
    1012010128}
    1012110129
    10122 div#widgets-left .sidebar-name h3 {
     10130#widgets-left .sidebar-name h3 {
    1012310131        padding: 10px 0;
    1012410132        margin: 0 10px 0 0;
    1012510133}
    1012610134
    10127 div#widgets-left .sidebar-name:hover h3 {
     10135#widgets-left .sidebar-name:hover h3 {
    1012810136        color: #464646;
    1012910137}
    1013010138
    10131 div#widgets-left .sidebar-name .sidebar-name-arrow:before {
     10139#widgets-left .sidebar-name .sidebar-name-arrow:before {
    1013210140        right: 0;
    1013310141        top: 4px;
    1013410142        padding: 4px 6px 4px 4px;
     
    1013510143        border-radius: 20px;
    1013610144}
    1013710145
    10138 div#widgets-left .sidebar-name:hover .sidebar-name-arrow:before {
     10146#widgets-left .sidebar-name:hover .sidebar-name-arrow:before {
    1013910147        background: #ccc;
    1014010148}
    1014110149
    10142 div#widgets-left .closed .sidebar-name .sidebar-name-arrow:before {
     10150#widgets-left .closed .sidebar-name .sidebar-name-arrow:before {
    1014310151        background: #999;
    1014410152        color: #fff;
    1014510153}
    1014610154
    10147 div#widgets-left .widget-holder {
    10148         background: transparent;
    10149         border: none;
    10150 }
    10151 
    1015210155#available-widgets {
    1015310156        background: transparent !important; /* ln 1620 colors-fresh.css */
    1015410157        margin: 0;
     
    1018310186
    1018410187#available-widgets .widget .widget-description {
    1018510188        display: block;
    10186 padding: 10px 16px;
    10187 font-size: 12px;
     10189        padding: 10px 16px;
     10190        font-size: 12px;
    1018810191}
    1018910192
    1019010193/* Inactive Sidebars */
     
    1022810231}
    1022910232
    1023010233/* Not sure what this is for... */
    10231 div#widgets-left .inactive-sidebar .widget.expanded {
     10234#widgets-left .inactive-sidebar .widget.expanded {
    1023210235        left: auto;
    1023310236}
    1023410237
     
    1023910242        right: 10px;
    1024010243}
    1024110244
    10242 div#widgets-left .inactive-sidebar .widget-action:after {
     10245#widgets-left .inactive-sidebar .widget-action:after {
    1024310246        content: '\f111';
    1024410247        color: #888;
    1024510248}
    1024610249
    10247 div#widgets-left .inactive-sidebar .widgets-sortables {
     10250#widgets-left .inactive-sidebar .widgets-sortables {
    1024810251        min-height: 42px;
    1024910252        padding: 0;
    1025010253        background: transparent;
     
    1025210255        position: relative;
    1025310256}
    1025410257
    10255 div#widgets-left .inactive-sidebar .widget-placeholder {
     10258#widgets-left .inactive-sidebar .widget-placeholder {
    1025610259        border: 1px solid #ccc;
    10257         margin: 0 auto 10px auto;
    10258         height: 43px;
    10259         width: 100%;
     10260        margin: 10px auto 0;
     10261        height: 52px;
     10262        /*width: 100%;*/
    1026010263        border-radius: 3px;
    1026110264        background: #aaa;
    1026210265        box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
     
    1026710270
    1026810271/* Widgets Right */
    1026910272
    10270 div#widgets-right:after {
     10273#widgets-right:after {
    1027110274        content: ".";
    1027210275        display: block;
    1027310276        height: 0;
     
    1027510278        visibility: hidden;
    1027610279}
    1027710280
    10278 div#widgets-right .widgets-holder-wrap {
     10281#widgets-right .widgets-holder-wrap {
    1027910282        margin: 10px 0 0 0;
    1028010283}
    1028110284
    10282 div#widgets-right .widget {
    10283         margin: 0 auto;
    10284         border: 1px solid #dedede !important; /* ln 991 in colors-fresh.css */
    10285         border-bottom: none !important; /* ln 991 in colors-fresh.css */
    10286         margin-left: 0 !important; /* Wide format widgets are the devil */
    10287         width: 100% !important; /* Wide format widgets are the devil */
     10285#widgets-right .widget {
     10286        margin: -1px auto 0;
     10287        border: 1px solid #dedede; /* ln 991 in colors-fresh.css  !important*/
     10288        /*border-bottom: none !important; /* ln 991 in colors-fresh.css */
    1028810289}
    1028910290
    10290 div#widgets-right .sidebar-description {
     10291#widgets-right .sidebar-description {
    1029110292        border-top: 1px solid #eeeeee;
    1029210293        padding: 10px 15px 15px 15px;
    1029310294}
    1029410295
    10295 div#widgets-right .closed .sidebar-description {
    10296         display: none;
     10296#widgets-right .sidebar-name h3 {
     10297        padding: 15px;
    1029710298}
    1029810299
    10299 div#widgets-right .sidebar-name h3 {
    10300         padding: 15px 15px;
    10301 }
    10302 div#widgets-right .sidebar-name .sidebar-name-arrow:before {
     10300#widgets-right .sidebar-name .sidebar-name-arrow:before {
    1030310301        right: 0;
    1030410302        top: 4px;
    1030510303}
    10306 div#widgets-right .widget-top {
     10304
     10305#widgets-right .widget-top {
    1030710306        border-bottom: none;
    1030810307        padding: 0;
    1030910308        background: #f7f7f7;
    1031010309}
    10311 div#widgets-right .widget-title-action {
     10310
     10311#widgets-right .widget-title-action {
    1031210312        float: right;
    1031310313        position: relative;
    1031410314        top: 14px;
    1031510315        right: 10px;
    1031610316}
    10317 div#widgets-right a.widget-action:after {
     10317
     10318#widgets-right a.widget-action:after {
    1031810319        content: '\f111';
    1031910320        color: #888;
    1032010321}
    10321 div#widgets-right .widget-inside {
     10322
     10323#widgets-right .widget-inside {
    1032210324        border-top: 1px solid #dedede;
    1032310325}
    1032410326
    10325 /* The last widget has some additional borders */
    10326 div#widgets-right .widget:last-child {
    10327         border-bottom: 1px solid #dedede !important; /* ln 991 in colors-fresh.css */
    10328 }
    10329 
    10330 div#widgets-right .widgets-sortables {
    10331         min-height: 42px !important; /* Inline styles */
     10327#widgets-right .widgets-sortables {
    1033210328        padding: 0 8px;
    1033310329        margin-bottom: 8px;
    1033410330        position: relative;
    1033510331}
    10336 div#widgets-right .widgets-sortables:before {
    10337         display: block;
    10338         content: "";
    10339         text-align: center;
    10340         position: absolute;
    10341         left: 8px;
    10342         right: 8px;
    10343         bottom: 1px;
    10344         height: 40px;
    10345         border: 1px dashed #dedede;
    10346         border-radius: 3px;
    10347         line-height: 40px;
    10348         font-weight: 600;
    10349         color: #aaa;
     10332
     10333#widgets-right .closed .widgets-sortables {
     10334        margin-bottom: 0;
    1035010335}
    1035110336
     10337.widgets-holder-wrap .spinner {
     10338        float: none;
     10339        margin: -5px 5px;
     10340}
     10341
    1035210342/* Accessibility Mode */
    1035310343#available-widgets .widget-control-edit .edit {
    1035410344        display :none;
    1035510345}
     10346
    1035610347#available-widgets .widget-control-edit .add {
    1035710348        display: block;
    1035810349        position: absolute;
    10359                 top: 0;
    10360                 right: 50px;
    10361                 bottom: 0;
    10362                 left: 0;
     10350        top: 0;
     10351        right: 50px;
     10352        bottom: 0;
     10353        left: 0;
    1036310354        z-index: 40;
    1036410355        text-align: center;
    1036510356        text-indent: -5000px;
     
    1037110362        padding: 16px 15px;
    1037210363        border-left: 1px solid #DDD;
    1037310364}
     10365
    1037410366#widgets-right .widget-control-edit .add {
    1037510367        display: none;
    1037610368}
     10369
    1037710370#widgets-right .widget-control-edit:hover {
    1037810371        background: #444;
    1037910372}
     10373
    1038010374#widgets-right .widget-control-edit:before {
    1038110375        content: '\f111';
    1038210376        display: inline-block;
     
    1038510379        font: normal 16px/1 'dashicons';
    1038610380        vertical-align: top;
    1038710381        position: relative;
    10388                 top: -1px;
     10382        top: -1px;
    1038910383        padding-right: 4px;
    1039010384}
    1039110385
     
    1039610390        margin-top: 20px;
    1039710391}
    1039810392
    10399 .js .closed .widgets-sortables,
     10393.js .widgets-holder-wrap.closed .widget,
     10394.js .widgets-holder-wrap.closed .sidebar-description,
    1040010395.js .closed .widget-holder,
    1040110396.js .closed br.clear {
    1040210397        display: none;
    1040310398}
     10399
     10400.widgets-holder-wrap .sidebar-name,
     10401.widgets-holder-wrap .sidebar-description {
     10402        -webkit-user-select: none;
     10403        -moz-user-select: none;
     10404        user-select: none;
     10405}
     10406
    1040410407.nav-menus-php .item-edit:after,
    1040510408.widget-top a.widget-action:after,
    1040610409.control-section .accordion-section-title::after,
     
    1042010423        -moz-osx-font-smoothing: grayscale;
    1042110424        text-decoration: none !important;
    1042210425}
     10426
    1042310427.control-section .accordion-section-title::after,
    1042410428.accordion-section-title::after {
    1042510429        float: right;
     
    1042610430        right: 20px;
    1042710431        top: -2px;
    1042810432}
     10433
    1042910434.control-section.open .accordion-section-title::after,
    1043010435#customize-info.open .accordion-section-title::after,
    1043110436.nav-menus-php .menu-item-edit-active .item-edit:after {
    1043210437        content: '\f140';
    1043310438}
     10439
    1043410440.nav-menus-php .item-controls .item-type {
    1043510441        padding: 11px;
    1043610442        margin-right: 10px;
     
    1237912385                height: 100%;
    1238012386                z-index: 400;
    1238112387        }
    12382 }
    12383  No newline at end of file
     12388}
  • src/wp-admin/includes/widgets.php

     
    6969
    7070        $description = wp_sidebar_description( $sidebar );
    7171
    72         if ( !empty( $description ) ) {
    73                 echo "<div class='sidebar-description'>\n";
    74                 echo "\t<p class='description'>$description</p>";
    75                 echo "</div>\n";
     72        echo '<div class="sidebar-description">';
     73
     74        if ( ! empty( $description ) ) {
     75                echo "<p class='description'>$description</p>";
    7676        }
    7777
    78         echo "<div id='$sidebar' class='widgets-sortables'>\n";
     78        echo '</div>';
     79
    7980        dynamic_sidebar( $sidebar );
    80         echo "</div>\n";
    8181}
    8282
    8383/**
  • src/wp-admin/js/widgets.js

     
    1313                        isRTL = !! ( 'undefined' !== typeof isRtl && isRtl ),
    1414                        margin = ( isRTL ? 'marginRight' : 'marginLeft' );
    1515
    16                 $('#widgets-right').children('.widgets-holder-wrap').children('.sidebar-name').click( function() {
    17                         var $this = $(this), parent = $this.parent();
    18                         if ( parent.hasClass('closed') ) {
    19                                 parent.removeClass('closed');
    20                                 $this.siblings('.widgets-sortables').sortable('refresh');
     16                $( '#widgets-right .sidebar-name' ).click( function() {
     17                        var $this = $(this),
     18                                wrap = $this.closest( '.widgets-holder-wrap' );
     19
     20                        if ( wrap.hasClass( 'closed' ) ) {
     21                                wrap.removeClass( 'closed' );
     22                                $this.parent().sortable( 'refresh' );
    2123                        } else {
    22                                 parent.addClass('closed');
     24                                wrap.addClass( 'closed' );
    2325                        }
    2426                });
    2527
    26                 $('#widgets-left').children('.widgets-holder-wrap').children('.sidebar-name').click(function() {
    27                         $(this).parent().toggleClass('closed');
     28                $( '#widgets-left .sidebar-name' ).click( function() {
     29                        $(this).closest( '.widgets-holder-wrap' ).toggleClass( 'closed' );
    2830                });
    2931
    30                 sidebars.each(function(){
    31                         if ( $(this).parent().hasClass('inactive') )
    32                                 return true;
    33 
    34                         var h = 50, H = $(this).children('.widget').length;
    35                         h = h + parseInt(H * 48, 10);
    36                         $(this).css( 'minHeight', h + 'px' );
    37                 });
    38 
    3932                $(document.body).bind('click.widgets-toggle', function(e){
    40                         var target = $(e.target), css = {}, widget, inside, w;
     33                        var target = $(e.target), css, widget, inside, w;
    4134
    4235                        if ( target.parents('.widget-top').length && ! target.parents('#available-widgets').length ) {
    4336                                widget = target.closest('div.widget');
    4437                                inside = widget.children('.widget-inside');
    45                                 w = parseInt( widget.find('input.widget-width').val(), 10 );
     38                                targetWidth = parseInt( widget.find('input.widget-width').val(), 10 ),
     39                                widgetWidth = widget.width();
    4640
    4741                                if ( inside.is(':hidden') ) {
    48                                         if ( w > 250 && inside.closest('div.widgets-sortables').length ) {
    49                                                 css.width = w + 30 + 'px';
    50                                                 if ( inside.closest('div.widget-liquid-right').length )
    51                                                         css[margin] = 235 - w + 'px';
    52                                                 widget.css(css);
     42                                        if ( targetWidth > 250 && ( targetWidth + 30 > widgetWidth ) && widget.closest('div.widgets-sortables').length ) {
     43                                                css = {
     44                                                        width: targetWidth + 30 + 'px',
     45                                                        'z-index': 100
     46                                                }
     47
     48                                                if ( inside.closest('div.widget-liquid-right').length ) {
     49                                                        css[margin] = widgetWidth - ( targetWidth + 28 ) + 'px';
     50                                                }
     51
     52                                                widget.css( css );
    5353                                        }
    5454                                        wpWidgets.fixLabels(widget);
    5555                                        inside.slideDown('fast');
    5656                                } else {
    5757                                        inside.slideUp('fast', function() {
    58                                                 widget.css({'width':'', margin:''});
     58                                                widget.attr( 'style', '' );
    5959                                        });
    6060                                }
    6161                                e.preventDefault();
     
    105105                        containment: 'document',
    106106                        start: function(e,ui) {
    107107                                ui.item.children('.widget-inside').hide();
    108                                 ui.item.css({margin:'', 'width':''});
    109108                        },
    110109                        stop: function(e,ui) {
    111110                                if ( ui.item.hasClass('ui-draggable') && ui.item.data('draggable') )
     
    122121                                        id = the_id,
    123122                                        sb = $(this).attr('id');
    124123
    125                                 ui.item.css({margin:'', 'width':''});
     124                                ui.item.attr( 'style', '' );
    126125                                the_id = '';
    127126
    128127                                if ( add ) {
     
    143142                                wpWidgets.saveOrder(sb);
    144143                        },
    145144                        receive: function(e, ui) {
    146                                 var sender = $(ui.sender);
     145                                var $this = $(this),
     146                                        sender = $( ui.sender );
    147147
    148                                 if ( !$(this).is(':visible') || this.id.indexOf('orphaned_widgets') > -1 )
     148                                $this.parent().removeClass('closed');
     149
     150                                if ( ! $this.is(':visible') || this.id.indexOf('orphaned_widgets') > -1 )
    149151                                        sender.sortable('cancel');
    150152
    151                                 if ( sender.attr('id').indexOf('orphaned_widgets') > -1 && !sender.children('.widget').length ) {
     153                                if ( sender.attr('id').indexOf('orphaned_widgets') > -1 && ! sender.children('.widget').length ) {
    152154                                        sender.parents('.orphan-sidebar').slideUp(400, function(){ $(this).remove(); });
    153155                                }
    154156                        }
     
    216218                        var $target = $( event.target );
    217219
    218220                        if ( $target.hasClass('button-primary') ) {
    219                                 self.addWidget( chooser );
     221                                self.addWidget( chooser.find( '.widgets-chooser-selected' ).data('sidebarId') );
    220222                                self.closeChooser();
    221223                        } else if ( $target.hasClass('button-secondary') ) {
    222224                                self.closeChooser();
     
    245247                $.post( ajaxurl, a, function() {
    246248                        $('.spinner').hide();
    247249                });
    248 
    249                 this.resize();
    250250        },
    251251
    252252        save : function(widget, del, animate, order) {
     
    285285                                        });
    286286                                } else {
    287287                                        widget.remove();
    288                                         wpWidgets.resize();
    289288                                }
    290289                        } else {
    291290                                $('.spinner').hide();
     
    332331
    333332        close : function(widget) {
    334333                widget.children('.widget-inside').slideUp('fast', function(){
    335                         widget.css({'width':'', margin:''});
     334                        widget.attr( 'style', '' );
    336335                });
    337336        },
    338337
    339         addWidget: function( chooser ) {
    340                 var widget = $('#available-widgets').find('.widget-in-question').clone(),
     338        addWidget: function( sidebarId ) {
     339                var top,
     340                        widget = $('#available-widgets').find('.widget-in-question').clone(),
    341341                        widgetId = widget.attr('id'),
    342342                        add = widget.find( 'input.add_new' ).val(),
    343343                        n = widget.find( 'input.multi_number' ).val(),
    344                         sidebarId = chooser.find( '.widgets-chooser-selected' ).data('sidebarId'),
    345344                        sidebar = $( '#' + sidebarId );
    346345
    347346                if ( 'multi' === add ) {
     
    363362                sidebar.closest( '.widgets-holder-wrap' ).removeClass('closed');
    364363                sidebar.sortable('refresh');
    365364
    366                 widget.prependTo( sidebar );
     365                sidebar.find( '.sidebar-description' ).after( widget );
    367366
    368367                wpWidgets.save( widget, 0, 0, 1 );
    369368                // No longer "new" widget
    370369                widget.find( 'input.add_new' ).val('');
    371370
    372                 $( 'html, body' ).animate({
    373                         scrollTop: sidebar.offset().top - 130
    374                 }, 200 );
     371                top = sidebar.offset().top;
    375372
     373                if ( top && top - 130 > 0 ) {
     374                        $( 'html, body' ).animate({
     375                                scrollTop: ( top - 130 )
     376                        }, 200 );
     377                }
     378
    376379                window.setTimeout( function() {
    377                         // Cannot use a callback in the animation above as it fires twice,
    378                         // have to queue this "by hand".
    379380                        widget.find( '.widget-title' ).trigger('click');
    380381                }, 250 );
    381382        },
     
    391392
    392393        clearWidgetSelection: function() {
    393394                $( '#widgets-left' ).removeClass( 'chooser' );
    394                 $( '#available-widgets' ).find( '.widget-in-question' ).removeClass( 'widget-in-question' );
     395                $( '.widget-in-question' ).removeClass( 'widget-in-question' );
    395396        }
    396397};
    397398
  • src/wp-admin/widgets.php

     
    332332<div id="widgets-left">
    333333        <div id="available-widgets" class="widgets-holder-wrap">
    334334                <div class="sidebar-name">
    335                 <div class="sidebar-name-arrow"><br /></div>
    336                 <h3><?php _e('Available Widgets'); ?> <span id="removing-widget"><?php _ex('Deactivate', 'removing-widget'); ?> <span></span></span></h3></div>
     335                        <div class="sidebar-name-arrow"><br /></div>
     336                        <h3><?php _e('Available Widgets'); ?> <span id="removing-widget"><?php _ex('Deactivate', 'removing-widget'); ?> <span></span></span></h3>
     337                </div>
    337338                <div class="widget-holder">
    338                 <p class="description"><?php _e('Drag widgets from here to a sidebar on the right to activate them. Drag widgets back here to deactivate them and delete their settings.'); ?></p>
    339                 <div id="widget-list">
    340                 <?php wp_list_widgets(); ?>
     339                        <p class="description"><?php _e('Drag widgets from here to a sidebar on the right to activate them. Drag widgets back here to deactivate them and delete their settings.'); ?></p>
     340                        <div id="widget-list">
     341                        <?php wp_list_widgets(); ?>
     342                        </div>
     343                        <br class='clear' />
    341344                </div>
    342                 <br class='clear' />
    343                 </div>
    344345                <br class="clear" />
    345346        </div>
    346347
    347348<?php
     349
    348350foreach ( $wp_registered_sidebars as $sidebar => $registered_sidebar ) {
    349351        if ( false !== strpos( $registered_sidebar['class'], 'inactive-sidebar' ) || 'orphaned_widgets' == substr( $sidebar, 0, 16 ) ) {
    350352                $wrap_class = 'widgets-holder-wrap';
    351                 if ( !empty( $registered_sidebar['class'] ) )
     353
     354                if ( ! empty( $registered_sidebar['class'] ) )
    352355                        $wrap_class .= ' ' . $registered_sidebar['class'];
    353356
    354 ?>
    355 
     357                ?>
    356358                <div class="<?php echo esc_attr( $wrap_class ); ?>">
     359                <div id="<?php echo $sidebar; ?>" class="widgets-sortables">
    357360                        <div class="sidebar-name">
    358361                                <div class="sidebar-name-arrow"><br /></div>
    359                                 <h3><?php echo esc_html( $registered_sidebar['name'] ); ?>
    360                                         <span class="spinner"></span>
    361                                 </h3>
     362                                <h3><?php echo esc_html( $registered_sidebar['name'] ); ?> <span class="spinner"></span></h3>
    362363                        </div>
    363                         <div class="widget-holder inactive">
    364                                 <?php wp_list_widget_controls( $registered_sidebar['id'] ); ?>
    365                                 <div class="clear"></div>
    366                         </div>
     364                        <?php wp_list_widget_controls( $registered_sidebar['id'] ); ?>
     365                        <div class="clear"></div>
    367366                </div>
    368 <?php
     367                </div>
     368                <?php
    369369        }
    370370}
    371371?>
     
    376376<div class="widget-liquid-right">
    377377<div id="widgets-right">
    378378<?php
     379
    379380$i = 0;
     381
    380382foreach ( $wp_registered_sidebars as $sidebar => $registered_sidebar ) {
    381383        if ( false !== strpos( $registered_sidebar['class'], 'inactive-sidebar' ) || 'orphaned_widgets' == substr( $sidebar, 0, 16 ) )
    382384                continue;
     
    386388                $wrap_class .= ' sidebar-' . $registered_sidebar['class'];
    387389
    388390        if ( $i )
    389                 $wrap_class .= ' closed'; ?>
     391                $wrap_class .= ' closed';
    390392
     393        ?>
    391394        <div class="<?php echo esc_attr( $wrap_class ); ?>">
    392         <div class="sidebar-name">
    393         <div class="sidebar-name-arrow"><br /></div>
    394         <h3><?php echo esc_html( $registered_sidebar['name'] ); ?>
    395         <span class="spinner"></span></h3></div>
    396         <?php wp_list_widget_controls( $sidebar ); // Show the control forms for each of the widgets in this sidebar ?>
     395        <div id="<?php echo $sidebar; ?>" class="widgets-sortables">
     396                <div class="sidebar-name">
     397                        <div class="sidebar-name-arrow"><br /></div>
     398                        <h3><?php echo esc_html( $registered_sidebar['name'] ); ?> <span class="spinner"></span></h3>
     399                </div>
     400                <?php wp_list_widget_controls( $sidebar ); // Show the control forms for each of the widgets in this sidebar ?>
    397401        </div>
    398 <?php
     402        </div>
     403        <?php
     404
    399405        $i++;
    400 } ?>
     406}
     407
     408?>
    401409</div>
    402410</div>
    403411<form action="" method="post">