Ticket #25821: 25821.6.patch

src/wp-admin/css/wp-admin.css

@@ -10190 +10190 @@
 
 #available-widgets .widget .widget-description {
         display: block;
-padding: 10px 16px;
-font-size: 12px;
+        padding: 10px 16px;
+        font-size: 12px;
 }
 
 /* Inactive Sidebars */
@@ -10495 +10495 @@
 }
 
 
-/* Widgets Area Chooser merge */
+/* Widgets Area Chooser */
 .widget-liquid-left #widgets-left.chooser #available-widgets .widget,
 .widget-liquid-left #widgets-left.chooser .inactive-sidebar {
-        transition: opacity 0.2s ease-in-out;
+        transition: opacity 0.1s linear;
 }
 
 .widget-liquid-left #widgets-left.chooser #available-widgets .widget,
@@ -10523 +10523 @@
 #widgets-chooser {
         clear: both;
         display: none;
-        margin: auto;
-        padding-bottom: 10px;
         max-width: 400px;
 }
 
 #widgets-chooser h3 {
-        font-size: 14px;
-        margin: 15px 0;
+        font-size: 12px;
+        padding: 15px 0 12px 35px;
+        margin: 0;
+        border-top: 1px solid #ccc;
+        background: rgba(0,0,0,0.6);
+        color: #fff;
 }
 
 #widgets-chooser ul.widgets-chooser-sidebars {
-        margin: 0 0 20px 0;
+        margin: 0;
         list-style-type: none;
+        max-height: 300px;
+        overflow: auto;
 }
 
-#widgets-chooser ul.widgets-chooser-sidebars li {
+#widgets-chooser li {
         padding: 10px 15px 10px 35px;
         background: #fff;
-        border: 1px solid #ccc;
-        border-bottom: none;
+        border-bottom: 1px solid #ccc;
         margin: 0;
         cursor: pointer;
+        outline: none;
+        position: relative;
+        transition: background: 0.2s ease-in-out;
 }
 
-#widgets-chooser ul.widgets-chooser-sidebars li:hover {
+#widgets-chooser li:hover,
+#widgets-chooser li:focus {
         background: rgba(255,255,255,0.7);
 }
 
-#widgets-chooser ul.widgets-chooser-sidebars li.widgets-chooser-selected {
+#widgets-chooser li:focus:before {
+        content: '\f147';
+        display: block;
+        -webkit-font-smoothing: antialiased;
+        font: normal 26px/1 'dashicons';
+        color: #999;
+        position: absolute;
+        top: 7px;
+        left: 5px;
+}
+
+#widgets-chooser li.widgets-chooser-selected {
         background: #1075a0;
         color: #fff;
-        position: relative;
 }
 
-#widgets-chooser ul.widgets-chooser-sidebars li.widgets-chooser-selected:before {
+#widgets-chooser li.widgets-chooser-selected:before,
+#widgets-chooser li.widgets-chooser-selected:focus:before {
         content: '\f147';
         display: block;
         -webkit-font-smoothing: antialiased;
         font: normal 26px/1 'dashicons';
+        color: #fff;
         position: absolute;
         top: 7px;
         left: 5px;
 }
 
-#widgets-chooser ul.widgets-chooser-sidebars li:last-child {
-        border-bottom: 1px solid #ccc;
-}
-
 #widgets-chooser .widgets-chooser-actions {
-        clear: both;
+        padding: 10px 0 12px 0;
         text-align: center;
 }
 
@@ -12368 +12383 @@
                 height: 100%;
                 z-index: 400;
         }
-}
- No newline at end of file
+}

src/wp-admin/js/widgets.js

@@ -204 +204 @@
                                 $( '#widgets-left' ).addClass( 'chooser' );
                                 widget.addClass( 'widget-in-question' );
 
-                                widget.after( chooser );
-                                chooser.slideDown( 200, function() {
+                                widget.find( '.widget-description' ).after( chooser );
+                                chooser.slideDown( 300, function() {
                                         selectSidebar.find('.widgets-chooser-selected').focus();
                                 });
+
+                                selectSidebar.find( 'li' ).on( 'focusin.widgets-chooser', function() {
+                                        selectSidebar.find('.widgets-chooser-selected').removeClass( 'widgets-chooser-selected' );
+                                        $(this).addClass( 'widgets-chooser-selected' );
+                                } )
                         }
                 });
 
@@ -220 +225 @@
                                 self.closeChooser();
                         } else if ( $target.hasClass('button-secondary') ) {
                                 self.closeChooser();
-                        } else if ( $target.is('.widgets-chooser-sidebars li') ) {
+                        } 
+                        /*
+                        else if ( $target.is('.widgets-chooser-sidebars li') ) {
                                 chooser.find('.widgets-chooser-selected').removeClass( 'widgets-chooser-selected' );
                                 $target.addClass( 'widgets-chooser-selected' );
                         }
+                        */
+                }).on( 'keyup.widgets-chooser', function( event ) {
+                        if ( event.which === $.ui.keyCode.ENTER ) {
+                                if ( $( event.target ).hasClass('button-secondary') ) {
+                                        // Close instead of adding when pressing Enter on the Cancel button
+                                        self.closeChooser();
+                                } else {
+                                        self.addWidget( chooser );
+                                        self.closeChooser();
+                                }
+                        } else if ( event.which === $.ui.keyCode.ESCAPE ) {
+                                self.closeChooser();
+                        }
                 });
         },
 
@@ -337 +357 @@
         },
 
         addWidget: function( chooser ) {
-                var widget = $('#available-widgets').find('.widget-in-question').clone(),
-                        widgetId = widget.attr('id'),
-                        add = widget.find( 'input.add_new' ).val(),
-                        n = widget.find( 'input.multi_number' ).val(),
+                var widget, widgetId, add, n,
                         sidebarId = chooser.find( '.widgets-chooser-selected' ).data('sidebarId'),
                         sidebar = $( '#' + sidebarId );
 
+                // Move the chooser out of the widget
+                $('#wpbody-content').append( chooser );
+
+                widget = $('#available-widgets').find('.widget-in-question').clone();
+                widgetId = widget.attr('id');
+                add = widget.find( 'input.add_new' ).val();
+                n = widget.find( 'input.multi_number' ).val();
+
                 if ( 'multi' === add ) {
                         widget.html(
                                 widget.html().replace( /<[^<>]+>/g, function(m) {
@@ -391 +416 @@
 
         clearWidgetSelection: function() {
                 $( '#widgets-left' ).removeClass( 'chooser' );
-                $( '#available-widgets' ).find( '.widget-in-question' ).removeClass( 'widget-in-question' );
+                $( '.widget-in-question' ).removeClass( 'widget-in-question' );
         }
 };
 

src/wp-admin/widgets.php

@@ -407 +407 @@
 </div>
 
 <div id="widgets-chooser">
-        <h3><?php _e( 'Choose an area to place this widget&hellip;' ); ?></h3>
+        <h3><?php _e( 'Choose a sidebar:' ); ?></h3>
         <ul class="widgets-chooser-sidebars"></ul>
         <div class="widgets-chooser-actions">
+                <button class="button-secondary"><?php _e( 'Cancel' ); ?></button>
                 <button class="button-primary"><?php _e( 'Add Widget' ); ?></button>
-                <button class="button-secondary"><?php _e( 'Cancel' ); ?></button>
         </div>
 </div>