Ticket #47540: 47540.patch

src/js/_enqueues/admin/widgets.js

@@ -501 +501 @@
                                 self.closeChooser();
                         }
                 });
+
+                /**
+                 * Use feature detection to determine whether inputs should use
+                 * the `keyup` or `input` event. Input is preferred but lacks support
+                 * in legacy browsers. See changeset 34078, see also ticket #26600#comment:59
+                 */
+                if ( 'oninput' in document.createElement( 'input' ) ) {
+                        inputEvent = 'input';
+                } else {
+                        inputEvent = 'keyup';
+                }
+
+                $( '#widgets-search-input' ).on( inputEvent, function() {
+
+                        var search_term   = $('#widgets-search-input').val() || '',
+                                parent        = $('#widgets-left'),
+                                widgets       = parent.find('.widget'),
+                                widget_titles = parent.find('.widget-title');
+
+                        if( search_term.length ) {
+
+                                // Hide all widgets. Because, Below we show those widgets
+                                // which have search term in the widget title.
+                                widgets.addClass('hide-widget').removeClass('show-widget');
+
+                                // Search widget and ONLY show these widgets which "contain" the widget title.
+                                var rex = new RegExp( search_term, 'i');
+                        widget_titles.filter(function () {
+                                        var widget_name = $.trim( $(this).text() ) || '';
+                                return rex.test( widget_name );
+                        }).parents('.widget').removeClass('hide-widget').addClass('show-widget');
+
+                        } else {
+
+                                // Show all widgets.
+                                widgets.removeClass('hide-widget').addClass('show-widget');
+                        }
+                });
         },
 
         saveOrder : function( sidebarId ) {

src/wp-admin/css/widgets.css

@@ -773 +773 @@
         cursor: not-allowed;
 }
 
+/* =Widget Search
+-------------------------------------------------------------- */
+#widgets-search-input {
+        margin: 0 0 .2em 0;
+        width: 100%;
+        font-size: 16px;
+        font-weight: 300;
+        line-height: 1.5;
+        border-width: 1px;
+        border-style: solid;
+        border-color: #ddd;
+}
+
+
+.show-widget {
+    display: block;
+}
+
+.hide-widget {
+    display: none;
+}
+
 /* =Media Queries
 -------------------------------------------------------------- */
 

src/wp-admin/widgets.php

@@ -426 +426 @@
 
 <div class="widget-liquid-left">
 <div id="widgets-left">
+        <div class="widgets-search">
+                <input type="search" id="widgets-search-input" class="regular-text" placeholder="<?php _e('Search widgets...'); ?>">
+        </div>
         <div id="available-widgets" class="widgets-holder-wrap">
                 <div class="sidebar-name">
                         <button type="button" class="handlediv hide-if-no-js" aria-expanded="true">