Index: src/wp-admin/css/customize-nav-menus.css =================================================================== --- src/wp-admin/css/customize-nav-menus.css (revision 33589) +++ src/wp-admin/css/customize-nav-menus.css (working copy) @@ -605,7 +605,13 @@ overflow-y: hidden; /* avoid scrollbar jitter with animating heights */ } -#available-menu-items #available-menu-items-search.open { +#available-menu-items-search { + border-bottom: 1px solid #dfdfdf; + padding: 0 15px; + background: #eee; +} + +#available-menu-items-search.open { height: 100%; border-bottom: none; } @@ -616,8 +622,7 @@ background: #fff; } -#available-menu-items .open .accordion-section-title, -#available-menu-items #available-menu-items-search .accordion-section-title { +#available-menu-items .open .accordion-section-title { background: #eee; } @@ -690,10 +695,6 @@ display: none; } -#available-menu-items-search.cannot-expand .accordion-section-title .spinner { - display: block; -} - #available-menu-items .cannot-expand .accordion-section-title .no-items { display: block; color: #777; @@ -709,13 +710,16 @@ max-height: 290px; } -#available-menu-items #available-menu-items-search .accordion-section-content { +#available-menu-items-search .accordion-section-content { position: absolute; - left: 1px; + left: 0; top: 60px; /* below title div / search input */ bottom: 0px; /* 100% height that still triggers lazy load */ + width: 270px; max-height: none; - width: 270px; + min-height: 120px; + margin: 0; + padding: 1px 15px 15px; } #available-menu-items .menu-item-tpl { @@ -813,7 +817,7 @@ } #available-menu-items .accordion-section-title.loading .spinner, -#available-menu-items-search.loading .accordion-section-title .spinner { +#available-menu-items-search.loading .spinner { visibility: visible; margin: 0 20px; } @@ -863,31 +867,21 @@ } #available-menu-items-search input { + width: 100%; + margin: 13px 0; padding: 6px 10px; - width: 100%; } -#available-menu-items-search .accordion-section-title { - padding: 12px 15px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -#available-menu-items-search .accordion-section-title:after { - display: none; -} - #available-menu-items-search .accordion-section-content:empty { min-height: 0; padding: 0; } -#available-menu-items-search.loading .accordion-section-content div { - opacity: .5; +#available-menu-items-search.loading .accordion-section-content { + opacity: .25; } -#available-menu-items-search.loading.loading-more .accordion-section-content div { +#available-menu-items-search.loading.loading-more .accordion-section-content { opacity: 1; } @@ -1037,10 +1031,6 @@ margin-top: 12px; } -#available-menu-items .customize-section-title { - display: none; -} - @media screen and ( max-width: 640px ) { body.adding-menu-items div#available-menu-items { top: 46px; Index: src/wp-admin/customize.php =================================================================== --- src/wp-admin/customize.php (revision 33589) +++ src/wp-admin/customize.php (working copy) @@ -152,7 +152,7 @@ ' . get_bloginfo( 'name' ) . '' ); ?> - +
.accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) { - if ( api.utils.isKeydownButNotEnterEvent( event ) ) { - return; - } - event.preventDefault(); // Keep this AFTER the key filter above + meta.find( '.customize-help-toggle' ).on( 'click', function() { meta = panel.container.find( '.panel-meta' ); if ( meta.hasClass( 'cannot-expand' ) ) { @@ -1231,7 +1227,8 @@ overlay = section.closest( '.wp-full-overlay' ), container = section.closest( '.wp-full-overlay-sidebar-content' ), siblings = container.find( '.open' ), - topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ), + // Get the accordion sections but not the Active Theme section, we don't need to set tabindex there. + topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section:not(.control-section-themes) > .accordion-section-title' ), backBtn = section.find( '.customize-panel-back' ), panelTitle = section.find( '.accordion-section-title' ).first(), content = section.find( '.control-panel-content' ); @@ -3059,11 +3056,7 @@ }); // Expand/Collapse the main customizer customize info. - $( '.customize-info' ).find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) { - if ( api.utils.isKeydownButNotEnterEvent( event ) ) { - return; - } - event.preventDefault(); // Keep this AFTER the key filter above + $( '.customize-info' ).find( '.customize-help-toggle' ).on( 'click', function() { var section = $( this ).closest( '.accordion-section' ), content = section.find( '.customize-panel-description:first' ); Index: src/wp-admin/js/customize-nav-menus.js =================================================================== --- src/wp-admin/js/customize-nav-menus.js (revision 33589) +++ src/wp-admin/js/customize-nav-menus.js (working copy) @@ -138,15 +138,8 @@ } ); // Clear the search results. - $( '.clear-results' ).on( 'click keydown', function( event ) { - if ( event.type === 'keydown' && ( 13 !== event.which && 32 !== event.which ) ) { // "return" or "space" keys only - return; - } - - event.preventDefault(); - + $( '.clear-results' ).on( 'click', function( event ) { $( '#menu-items-search' ).val( '' ).focus(); - event.target.value = ''; self.search( event ); } ); @@ -202,17 +195,13 @@ $otherSections.fadeOut( 100 ); $searchSection.find( '.accordion-section-content' ).slideDown( 'fast' ); $searchSection.addClass( 'open' ); - $searchSection.find( '.clear-results' ) - .prop( 'tabIndex', 0 ) - .addClass( 'is-visible' ); + $searchSection.find( '.clear-results' ).addClass( 'is-visible' ); } else if ( '' === event.target.value ) { $searchSection.removeClass( 'open' ); $otherSections.show(); - $searchSection.find( '.clear-results' ) - .prop( 'tabIndex', -1 ) - .removeClass( 'is-visible' ); + $searchSection.find( '.clear-results' ).removeClass( 'is-visible' ); } - + this.searchTerm = event.target.value; this.pages.search = 1; this.doSearch( 1 ); @@ -362,11 +351,13 @@ // Adjust the height of each section of items to fit the screen. itemSectionHeight: function() { - var sections, totalHeight, accordionHeight, diff; + var sections, totalHeight, accordionHeight, searchHeight, diff; totalHeight = window.innerHeight; - sections = this.$el.find( '.accordion-section-content' ); + searchHeight = this.$el.find( '#available-menu-items-search' ).outerHeight(); + // Get only the actual accordions, exclude the search div. + sections = this.$el.find( '.accordion-container .accordion-section-content' ); accordionHeight = 46 * ( 1 + sections.length ) - 16; // Magic numbers. - diff = totalHeight - accordionHeight; + diff = totalHeight - accordionHeight - searchHeight; if ( 120 < diff && 290 > diff ) { sections.css( 'max-height', diff ); } Index: src/wp-includes/class-wp-customize-nav-menus.php =================================================================== --- src/wp-includes/class-wp-customize-nav-menus.php (revision 33589) +++ src/wp-includes/class-wp-customize-nav-menus.php (working copy) @@ -697,83 +697,69 @@ */ public function available_items_template() { ?> -
-
- -

- - manager->get_panel( 'nav_menus' )->title ) ); - ?> - - -

-
+
-
- -
- - - -

- - - - -

-
-
- available_item_types() as $available_item_type ) { - $id = sprintf( 'available-menu-items-%s-%s', $available_item_type['type'], $available_item_type['object'] ); - ?> -
+
+
-
    +
    + + + +

    + + + + +

    +
    + // Containers for per-post-type item browsing; items added with JS. + foreach ( $this->available_item_types() as $available_item_type ) { + $id = sprintf( 'available-menu-items-%s-%s', $available_item_type['type'], $available_item_type['object'] ); + ?> +
    + +
      +
      + +
      {{ data.title }}' ); ?> - +
      <# if ( data.description ) { #>