Ticket #32710: 32710.7.diff

src/wp-admin/css/customize-nav-menus.css

@@ -584 +584 @@
         bottom: 0;
         left: -301px;
         visibility: hidden;
-        overflow: hidden;
+        overflow-x: hidden;
+        overflow-y: auto;
         width: 300px;
         margin: 0;
         z-index: 4;
@@ -598 +599 @@
         overflow-y: auto;
 }
 
+#available-menu-items #available-menu-items-search.open {
+        border-bottom: none;
+}
+
 #available-menu-items .accordion-section-title {
         border-left: none;
         border-right: none;
         background: #fff;
 }
 
-#available-menu-items .open .accordion-section-title {
+#available-menu-items .open .accordion-section-title,
+#available-menu-items #available-menu-items-search .accordion-section-title {
         background: #eee;
 }
 
@@ -696 +702 @@
         max-height: 290px;
 }
 
+#available-menu-items #available-menu-items-search .accordion-section-content {
+        position: absolute;
+        left: 1px;
+        top: 60px; /* below title div / search input */
+        bottom: 0px; /* 100% height that still triggers lazy load */
+        max-height: none;
+        width: 270px;
+}
+
 #available-menu-items .menu-item-tpl {
         margin: 0;
 }
@@ -796 +811 @@
         margin: 0 20px;
 }
 
+#available-menu-items-search .clear-results {
+        color: #a00;
+        position: absolute;
+        top: 20px;
+        right: 20px;
+        width: 20px;
+        height: 20px;
+        cursor: pointer;
+}
+
+#available-menu-items-search .clear-results,
+#available-menu-items-search.loading .clear-results.is-visible {
+        display: none;
+}
+
+#available-menu-items-search .clear-results.is-visible {
+        display: block;
+}
+
+#available-menu-items-search .clear-results:before {
+        content: "\f335";
+        font: normal 20px/1 dashicons;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+}
+
+#available-menu-items-search .clear-results:hover,
+#available-menu-items-search .clear-results:focus {
+        color: #f00;
+}
+
+#available-menu-items-search .clear-results:focus {
+        -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
+        box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
+}
+
 #available-menu-items-search .spinner {
         position: absolute;
         top: 20px;

src/wp-admin/js/customize-nav-menus.js

@@ -96 +96 @@
                 events: {
                         'input #menu-items-search': 'debounceSearch',
                         'keyup #menu-items-search': 'debounceSearch',
-                        'click #menu-items-search': 'debounceSearch',
                         'focus .menu-item-tpl': 'focus',
                         'click .menu-item-tpl': '_submit',
                         'click #custom-menu-item-submit': '_submitLink',
@@ -138 +137 @@
                                 }
                         } );
 
+                        // Clear the search results.
+                        $( '.clear-results' ).on( 'click keydown', function( event ) {
+                                $( '#menu-items-search' ).val( '' );
+                                event.target.value = '';
+                                self.search( event );
+                        } );
+
                         this.$el.on( 'input', '#custom-menu-item-name.invalid, #custom-menu-item-url.invalid', function() {
                                 $( this ).removeClass( 'invalid' );
                         });
@@ -176 +182 @@
                 // Search input change handler.
                 search: function( event ) {
                         var $searchSection = $( '#available-menu-items-search' ),
-                                $openSections = $( '#available-menu-items .accordion-section.open' );
+                                $otherSections = $( '#available-menu-items .accordion-section' ).not( $searchSection );
 
                         if ( ! event ) {
                                 return;
                         }
-                        // Manual accordion-opening behavior.
-                        if ( this.searchTerm && ! $searchSection.hasClass( 'open' ) ) {
-                                $openSections.find( '.accordion-section-content' ).slideUp( 'fast' );
+
+                        if ( this.searchTerm === event.target.value ) {
+                                return;
+                        }
+
+                        if ( '' !== event.target.value && ! $searchSection.hasClass( 'open' ) ) {
+                                $otherSections.fadeOut( 100 );
                                 $searchSection.find( '.accordion-section-content' ).slideDown( 'fast' );
-                                $openSections.find( '[aria-expanded]' ).first().attr( 'aria-expanded', 'false' );
-                                $openSections.removeClass( 'open' );
                                 $searchSection.addClass( 'open' );
-                        }
-                        if ( '' === event.target.value ) {
+                                $searchSection.find( '.clear-results' )
+                                        .prop( 'tabIndex', 0 )
+                                        .addClass( 'is-visible' );
+                        } else if ( '' === event.target.value ) {
                                 $searchSection.removeClass( 'open' );
+                                $otherSections.show();
+                                $searchSection.find( '.clear-results' )
+                                        .prop( 'tabIndex', -1 )
+                                        .removeClass( 'is-visible' );
                         }
-                        if ( this.searchTerm === event.target.value ) {
-                                return;
-                        }
+                        
                         this.searchTerm = event.target.value;
                         this.pages.search = 1;
                         this.doSearch( 1 );
@@ -264 +276 @@
                         self.currentRequest.fail(function( data ) {
                                 // data.message may be undefined, for example when typing slow and the request is aborted.
                                 if ( data.message ) {
-                                        $content.empty().append( $( '<p class="nothing-found"></p>' ).text( data.message ) );
+                                        $content.empty().append( $( '<div class="nothing-found"></div>' ).html( data.message ) );
                                         wp.a11y.speak( data.message );
                                 }
                                 self.pages.search = -1;

src/wp-includes/class-wp-customize-nav-menus.php

@@ -217 +217 @@
                 $items = $this->search_available_items_query( array( 'pagenum' => $p, 's' => $s ) );
 
                 if ( empty( $items ) ) {
-                        wp_send_json_error( array( 'message' => __( 'No menu items found.' ) ) );
+                        wp_send_json_error( array( 'message' => '<p>' . __( 'No results found.' ) . '</p><p>' . __( 'You must create and publish content before you can add it as a menu item. You can also add links to external sites in the Custom Links section.' ) . '</p>' ) );
                 } else {
                         wp_send_json_success( array( 'items' => $items ) );
                 }
@@ -718 +718 @@
                                         <input type="text" id="menu-items-search" placeholder="<?php esc_attr_e( 'Search menu items&hellip;' ) ?>" aria-describedby="menu-items-search-desc" />
                                         <p class="screen-reader-text" id="menu-items-search-desc"><?php _e( 'The search results will be updated as you type.' ); ?></p>
                                         <span class="spinner"></span>
+                                        <span class="clear-results"></span>
                                 </div>
                                 <ul class="accordion-section-content" data-type="search"></ul>
                         </div>

tests/phpunit/tests/ajax/CustomizeMenus.php

@@ -520 +520 @@
                                 array(
                                         'success' => false,
                                         'data'    => array(
-                                                'message' => 'No menu items found.',
+                                                'message' => '<p>No results found.</p><p>You must create and publish content before you can add it as a menu item. You can also add links to external sites in the Custom Links section.</p>',
                                         ),
                                 ),
                         ),