Ticket #40331: 40331.media-plugins.diff

src/js/media/views/attachments/browser.js

@@ -378 +378 @@
                 }
 
                 if ( this.options.search ) {
-                        // Search is an input, a visually hidden label element needs to be rendered before.
+                        // Search is an input, a label element needs to be rendered before.
                         this.toolbar.set( 'searchLabel', new wp.media.view.Label({
                                 value: l10n.searchLabel,
                                 className: 'media-search-input-label',

src/wp-admin/css/common.css

@@ -1090 +1090 @@
 
 .wp-filter .search-form {
         float: right;
-        margin: 10px 0;
+        display: flex;
+        align-items: center;
+        column-gap: .5rem;
 }
 
 .wp-filter .search-form input[type="search"] {
@@ -1119 +1121 @@
 .wp-filter .search-form.search-plugins .wp-filter-search,
 .no-js .wp-filter .search-form.search-plugins .button {
         display: inline-block;
-        margin-top: 10px;
         vertical-align: top;
 }
 
@@ -1360 +1361 @@
                 position: relative;
                 max-width: 100%;
         }
+        .wp-filter .search-form {
+                margin: 11px 0;
+                flex-wrap: wrap;
+                row-gap: 10px;
+        }
 }
 
 @media only screen and (max-width: 782px) {
@@ -4123 +4129 @@
         }
 
         .wp-filter .search-form input[type="search"] {
-                width: 100%;
                 font-size: 1rem;
         }
 

src/wp-admin/css/forms.css

@@ -720 +720 @@
 }
 
 p.search-box {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        column-gap: .5rem;
+        position: relative;
         float: right;
-        margin: 0;
+        margin: 11px 0;
 }
 
 .network-admin.themes-php p.search-box {

src/wp-admin/css/media.css

@@ -581 +581 @@
 }
 
 .media-frame-content .media-search-input-label {
-        margin: 0 .2em 0 0;
         vertical-align: baseline;
 }
 
-.media-frame.mode-grid .media-search-input-label {
-        position: static;
-        margin: 0 .5em 0 0;
-}
-
 .attachments-browser .media-toolbar-secondary > .media-button {
         margin-right: 10px;
 }
@@ -1369 +1363 @@
                 width: 100%;
                 margin-bottom: 20px;
                 display: flex;
+                flex-wrap: nowrap;
+                column-gap: 0px;
         }
 
+        .wp-filter p.search-box #media-search-input {
+                width: 100%;
+        }
+
 }
 
 @media only screen and (max-width: 782px) {

src/wp-admin/includes/class-wp-plugins-list-table.php

@@ -452 +452 @@
                 }
                 ?>
                 <p class="search-box">
-                        <label class="screen-reader-text" for="<?php echo esc_attr( $input_id ); ?>"><?php echo $text; ?>:</label>
-                        <input type="search" id="<?php echo esc_attr( $input_id ); ?>" class="wp-filter-search" name="s" value="<?php _admin_search_query(); ?>" placeholder="<?php esc_attr_e( 'Search installed plugins...' ); ?>" />
+                        <label for="<?php echo esc_attr( $input_id ); ?>"><?php echo $text; ?></label>
+                        <input type="search" id="<?php echo esc_attr( $input_id ); ?>" class="wp-filter-search" name="s" value="<?php _admin_search_query(); ?>" />
                         <?php submit_button( $text, 'hide-if-js', '', false, array( 'id' => 'search-submit' ) ); ?>
                 </p>
                 <?php

src/wp-admin/includes/plugin-install.php

@@ -320 +320 @@
         ?>
         <form class="search-form search-plugins" method="get">
                 <input type="hidden" name="tab" value="search" />
+                <label for="search-plugins"><?php _e( 'Search Plugins' ); ?></label>
+                <input type="search" name="s" id="search-plugins" value="<?php echo esc_attr( $term ); ?>" class="wp-filter-search" />
                 <label class="screen-reader-text" for="typeselector">
                         <?php
                         /* translators: Hidden accessibility text. */
@@ -331 +333 @@
                         <option value="author"<?php selected( 'author', $type ); ?>><?php _e( 'Author' ); ?></option>
                         <option value="tag"<?php selected( 'tag', $type ); ?>><?php _ex( 'Tag', 'Plugin Installer' ); ?></option>
                 </select>
-                <label class="screen-reader-text" for="search-plugins">
-                        <?php
-                        /* translators: Hidden accessibility text. */
-                        _e( 'Search Plugins' );
-                        ?>
-                </label>
-                <input type="search" name="s" id="search-plugins" value="<?php echo esc_attr( $term ); ?>" class="wp-filter-search" placeholder="<?php esc_attr_e( 'Search plugins...' ); ?>" />
                 <?php submit_button( __( 'Search Plugins' ), 'hide-if-js', false, false, array( 'id' => 'search-submit' ) ); ?>
         </form>
         <?php

src/wp-admin/plugins.php

@@ -788 +788 @@
 <?php $wp_list_table->views(); ?>
 
 <form class="search-form search-plugins" method="get">
-<?php $wp_list_table->search_box( __( 'Search Installed Plugins' ), 'plugin' ); ?>
+<?php $wp_list_table->search_box( __( 'Search installed plugins' ), 'plugin' ); ?>
 </form>
 
 <form method="post" id="bulk-action-form">

src/wp-includes/css/media-views.css

@@ -1208 +1208 @@
         display: flex;
         align-items: center;
         column-gap: .5rem;
+        margin: 11px 0;
 }
 
 .mode-grid .attachments-browser .media-toolbar-mode-select .media-toolbar-primary {
@@ -2797 +2798 @@
         }
 
         .mode-grid .attachments-browser .media-toolbar-primary {
-                display: flex;
+                display: grid;
+                grid-template-columns: auto 1fr;
         }
 
         .mode-grid .attachments-browser .media-toolbar-primary input[type="search"] {

src/wp-includes/media.php

@@ -4815 +4815 @@
                 'apply'                       => __( 'Apply' ),
                 'filterByDate'                => __( 'Filter by date' ),
                 'filterByType'                => __( 'Filter by type' ),
-                'searchLabel'                 => __( 'Search' ),
+                'searchLabel'                 => __( 'Search media' ),
                 'searchMediaLabel'            => __( 'Search media' ),          // Backward compatibility pre-5.3.
                 'searchMediaPlaceholder'      => __( 'Search media items...' ), // Placeholder (no ellipsis), backward compatibility pre-5.3.
                 /* translators: %d: Number of attachments found in a search. */