Ticket #40331: 40331.themes.diff

src/js/_enqueues/wp/customize/controls.js

@@ -1917 +1917 @@
                         section.contentContainer.on( 'click', '.feature-filter-toggle', function( e ) {
                                 var $themeContainer = $( '.customize-themes-full-container' ),
                                         $filterToggle = $( e.currentTarget );
-                                section.filtersHeight = $filterToggle.parent().next( '.filter-drawer' ).height();
+                                section.filtersHeight = $filterToggle.parents( '.themes-filter-bar' ).next( '.filter-drawer' ).height();
 
                                 if ( 0 < $themeContainer.scrollTop() ) {
                                         $themeContainer.animate( { scrollTop: 0 }, 400 );
@@ -1932 +1932 @@
                                         .attr( 'aria-expanded', function( i, attr ) {
                                                 return 'true' === attr ? 'false' : 'true';
                                         })
-                                        .parent().next( '.filter-drawer' ).slideToggle( 180, 'linear' );
+                                        .parents( '.themes-filter-bar' ).next( '.filter-drawer' ).slideToggle( 180, 'linear' );
 
                                 if ( $filterToggle.hasClass( 'open' ) ) {
                                         var marginOffset = 1018 < window.innerWidth ? 50 : 76;

src/wp-admin/css/customize-controls.css

@@ -1815 +1815 @@
         bottom: 0;
 }
 
-.themes-filter-bar .feature-filter-toggle {
-        float: right;
-        margin: 3px 0 3px 25px;
-}
-
 .themes-filter-bar .feature-filter-toggle:before {
         content: "\f111";
         margin: 0 5px 0 0;
@@ -1880 +1875 @@
         animation: .6s themes-fade-in 1;
 }
 
-.control-panel-themes .filter-themes-count {
-        position: relative;
-        float: right;
-        line-height: 2.6;
-}
-
 .control-panel-themes .filter-themes-count .themes-displayed {
         font-weight: 600;
         color: #50575e;
@@ -2097 +2086 @@
         box-sizing: border-box;
         border-bottom: 1px solid #dcdcde;
 }
+.customize-preview-header.themes-filter-bar,
+.customize-preview-header.themes-filter-bar .search-form {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        flex-wrap: wrap;
+}
 
+.customize-preview-header.themes-filter-bar .search-form-input {
+        position: relative;
+}
+
+.customize-preview-header .filter-themes-wrapper {
+        display: grid;
+        align-items: center;
+        gap: 10px;
+        grid-template-columns: auto 1fr;
+}
+
+.customize-preview-header .filter-themes-wrapper .filter-themes-count {
+        justify-self: end;
+}
+
 @media screen and (min-width: 1670px) {
         .customize-preview-header.themes-filter-bar {
                 width: 82%;
@@ -2109 +2120 @@
 .themes-filter-bar .themes-filter-container {
         margin: 0;
         padding: 0;
+        display: flex;
+        align-items: center;
+        gap: 10px;
 }
 
 .themes-filter-bar .wp-filter-search {
@@ -2117 +2131 @@
         max-width: 100%;
         width: 40%;
         min-width: 300px;
-        position: absolute;
-        top: 6px;
-        left: 25px;
         height: 32px;
         margin: 1px 0;
+        top: 0;
+        left: 0;
 }
 
+.themes-filter-bar .wp-filter-search label {
+        vertical-align: 
+}
+
 /* Unstick the filter bar on short windows/screens. This breakpoint is based on the
    current length of .org feature filters assuming translations do not wrap lines. */
 @media screen and (max-height: 540px), screen and (max-width: 1018px) {
@@ -2157 +2174 @@
 
 @media screen and (max-width: 900px) {
         .customize-preview-header.themes-filter-bar {
-                height: 86px;
-                padding-top: 46px;
+                height: 96px;
         }
 
         .themes-filter-bar .wp-filter-search {
-                width: calc(100% - 50px);
+                width: 100%;
                 margin: 0;
                 min-width: 200px;
         }
 
+        .customize-preview-header.themes-filter-bar,
+        .customize-preview-header.themes-filter-bar .search-form
+        .themes-filter-bar .themes-filter-container {
+                display: grid;
+                gap: 4px;
+        }
+
+        .customize-preview-header.themes-filter-bar .search-form-input {
+                display: flex;
+                flex-grow: 1;
+        }
+
+        .customize-preview-header.themes-filter-bar .search-icon {
+                top: 6px;
+        }
+
         .filter-drawer {
                 top: 86px;
         }
@@ -2695 +2727 @@
 
 .themes-filter-bar .search-icon {
         position: absolute;
-        top: 7px;
-        left: 26px;
+        top: 2px;
+        left: 2px;
         z-index: 1;
         color: #646970;
         height: 30px;
@@ -2814 +2846 @@
                 margin-top: 12px;
         }
 
-        .wp-core-ui .themes-filter-bar .feature-filter-toggle {
-                margin: 3px 0 3px 25px;
-        }
 }
 
 @media screen and (max-width: 1200px) {
@@ -2964 +2993 @@
         .reordering .reorder-done {
                 padding: 8px;
         }
-
-        .wp-core-ui .themes-filter-bar .feature-filter-toggle {
-                margin: 0;
-        }
 }
 
 @media screen and (max-width: 600px) {

src/wp-includes/customize/class-wp-customize-themes-section.php

@@ -124 +124 @@
                 <button type="button" class="button button-primary customize-section-back customize-themes-mobile-back"><?php _e( 'Go to theme sources' ); ?></button>
                 <# if ( 'wporg' === data.action ) { #>
                         <div class="search-form">
-                                <label for="wp-filter-search-input-{{ data.id }}" class="screen-reader-text">
-                                        <?php
-                                        /* translators: Hidden accessibility text. */
-                                        _e( 'Search themes&hellip;' );
-                                        ?>
-                                </label>
-                                <input type="search" id="wp-filter-search-input-{{ data.id }}" placeholder="<?php esc_attr_e( 'Search themes&hellip;' ); ?>" aria-describedby="{{ data.id }}-live-search-desc" class="wp-filter-search">
-                                <div class="search-icon" aria-hidden="true"></div>
-                                <span id="{{ data.id }}-live-search-desc" class="screen-reader-text">
-                                        <?php
-                                        /* translators: Hidden accessibility text. */
-                                        _e( 'The search results will be updated as you type.' );
-                                        ?>
-                                </span>
+                                <label for="wp-filter-search-input-{{ data.id }}"><?php _e( 'Search themes' ); ?></label>
+                                <div class="search-form-input">
+                                        <input type="search" id="wp-filter-search-input-{{ data.id }}" aria-describedby="{{ data.id }}-live-search-desc" class="wp-filter-search">
+                                        <div class="search-icon" aria-hidden="true"></div>
+                                        <span id="{{ data.id }}-live-search-desc" class="screen-reader-text">
+                                                <?php
+                                                /* translators: Hidden accessibility text. */
+                                                _e( 'The search results will be updated as you type.' );
+                                                ?>
+                                        </span>
+                                </div>
                         </div>
+                <# } else { #>
+                        <div class="themes-filter-container">
+                                <label for="{{ data.id }}-themes-filter"><?php _e( 'Search themes' ); ?></label>
+                                <div class="search-form-input">
+                                        <input type="search" id="{{ data.id }}-themes-filter" aria-describedby="{{ data.id }}-live-search-desc" class="wp-filter-search wp-filter-search-themes" />
+                                        <div class="search-icon" aria-hidden="true"></div>
+                                        <span id="{{ data.id }}-live-search-desc" class="screen-reader-text">
+                                                <?php
+                                                /* translators: Hidden accessibility text. */
+                                                _e( 'The search results will be updated as you type.' );
+                                                ?>
+                                        </span>
+                                </div>
+                        </div>
+                <# } #>
+                <div class="filter-themes-wrapper">
+                        <# if ( 'wporg' === data.action ) { #>
                         <button type="button" class="button feature-filter-toggle">
                                 <span class="filter-count-0"><?php _e( 'Filter themes' ); ?></span><span class="filter-count-filters">
                                         <?php
@@ -147 +161 @@
                                         ?>
                                 </span>
                         </button>
-                <# } else { #>
-                        <div class="themes-filter-container">
-                                <label for="{{ data.id }}-themes-filter" class="screen-reader-text">
+                        <# } #>
+                        <div class="filter-themes-count">
+                                <span class="themes-displayed">
                                         <?php
-                                        /* translators: Hidden accessibility text. */
-                                        _e( 'Search themes&hellip;' );
+                                        /* translators: %s: Number of themes displayed. */
+                                        printf( __( '%s themes' ), '<span class="theme-count">0</span>' );
                                         ?>
-                                </label>
-                                <input type="search" id="{{ data.id }}-themes-filter" placeholder="<?php esc_attr_e( 'Search themes&hellip;' ); ?>" aria-describedby="{{ data.id }}-live-search-desc" class="wp-filter-search wp-filter-search-themes" />
-                                <div class="search-icon" aria-hidden="true"></div>
-                                <span id="{{ data.id }}-live-search-desc" class="screen-reader-text">
-                                        <?php
-                                        /* translators: Hidden accessibility text. */
-                                        _e( 'The search results will be updated as you type.' );
-                                        ?>
                                 </span>
                         </div>
-                <# } #>
-                <div class="filter-themes-count">
-                        <span class="themes-displayed">
-                                <?php
-                                /* translators: %s: Number of themes displayed. */
-                                printf( __( '%s themes' ), '<span class="theme-count">0</span>' );
-                                ?>
-                        </span>
                 </div>
                 <?php
         }