Ticket #47138: 47138.2.diff

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

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

src/js/media/views/button/select-mode-toggle.js

@@ -57 +57 @@
                         } );
                         children.not( '.spinner, .media-button' ).hide();
                         this.$el.show();
+                        toolbar.$el.addClass( 'media-toolbar-mode-select' );
                         toolbar.$( '.delete-selected-button' ).removeClass( 'hidden' );
                 } else {
                         this.model.set( {
@@ -65 +66 @@
                         } );
                         this.controller.content.get().$el.removeClass( 'fixed' );
                         toolbar.$el.css( 'width', '' );
+                        toolbar.$el.removeClass( 'media-toolbar-mode-select' );
                         toolbar.$( '.delete-selected-button' ).addClass( 'hidden' );
                         children.not( '.media-button' ).show();
                         this.controller.state().get( 'selection' ).reset();

src/js/media/views/search.js

@@ -1 @@
-var l10n = wp.media.view.l10n,
-        Search;
+var Search;
 
 /**
  * wp.media.view.Search
@@ -17 +16 @@
         id:        'media-search-input',
 
         attributes: {
-                type:        'search',
-                placeholder: l10n.searchMediaPlaceholder
+                type: 'search'
         },
 
         events: {

src/wp-admin/css/common.css

@@ -3984 +3984 @@
         #screen-meta-links {
                 margin-bottom: 20px; /* Add margins beneath links for better spacing between boxes and elements */
         }
+
+        .wp-filter .search-form input[type="search"] {
+                font-size: 1rem;
+        }
 }
 
 /* Smartphone */

src/wp-admin/css/media.css

@@ -538 +538 @@
 
 .media-frame.mode-grid .media-toolbar select {
         margin: 0 10px 0 0;
-        font-size: 14px;
 }
 
 .media-frame.mode-grid.mode-edit .media-toolbar-secondary > .select-mode-toggle-button {
@@ -555 +554 @@
         margin-top: 0;
 }
 
-.media-frame.mode-grid .spinner {
-        margin-top: 16px;
+.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;
 }

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

@@ -270 +270 @@
         </div>
 
         <div class="search-form">
-                <label for="media-search-input" class="screen-reader-text"><?php esc_html_e( 'Search Media' ); ?></label>
-                <input type="search" placeholder="<?php esc_attr_e( 'Search media items...' ); ?>" id="media-search-input" class="search" name="s" value="<?php _admin_search_query(); ?>"></div>
+                <label for="media-search-input" class="media-search-input-label"><?php esc_html_e( 'Search' ); ?></label>
+                <input type="search" id="media-search-input" class="search" name="s" value="<?php _admin_search_query(); ?>"></div>
         </div>
                 <?php
         }

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

@@ -310 +310 @@
 .media-toolbar-primary {
         float: right;
         height: 100%;
+        position: relative;
 }
 
 .media-toolbar-secondary {
@@ -882 +883 @@
         max-width: 100%;
 }
 
+.media-frame .media-search-input-label {
+        position: absolute;
+        left: 0;
+        top: 10px;
+        margin: 0;
+        line-height: 1;
+}
+
 /**
  * Attachments
  */
@@ -1165 +1174 @@
         max-width: 33%;
 }
 
+.mode-grid .attachments-browser .media-toolbar-primary {
+        display: flex;
+        align-items: center;
+}
+
+.mode-grid .attachments-browser .media-toolbar-mode-select .media-toolbar-primary {
+        display: none;
+}
+
 .attachments-browser .media-toolbar-secondary {
         max-width: 66%;
 }
@@ -1650 +1668 @@
         vertical-align: middle;
 }
 
+.media-frame.mode-grid .spinner {
+        margin: 0;
+        float: none;
+        vertical-align: middle;
+}
+
+.media-modal .media-toolbar .spinner {
+        float: none;
+        vertical-align: bottom;
+        margin: 0 0 5px 5px;
+}
+
 .media-frame .spinner.is-active {
         visibility: visible;
 }
 
-.media-toolbar .spinner {
-        margin-top: 14px;
-}
-
 /**
  * Attachment Details
  */
@@ -2493 +2519 @@
                 height: auto;
         }
 
+        .media-frame .media-toolbar input[type="search"] {
+                line-height: 2.25; /* 36px */
+        }
+
         .media-sidebar .setting select.columns,
         .attachment-details .setting select.columns {
                 width: auto;
@@ -2504 +2534 @@
                 padding: 3px 6px;
         }
 
+        .wp-admin .media-frame select {
+                min-height: 40px;
+                font-size: 16px;
+                line-height: 1.625;
+                padding: 5px 24px 5px 8px;
+        }
+
         .image-details .column-image {
                 width: 30%;
                 left: 70%;
@@ -2590 +2627 @@
                 height: auto;
         }
 
-        .media-modal .attachments-browser .media-toolbar .spinner {
-                margin: 14px 2px 0;
-        }
-
         /* Text inputs need to be 16px, or they force zooming on iOS */
         .media-frame input[type="text"],
         .media-frame input[type="password"],
@@ -2607 +2640 @@
         }
 
         .media-frame .media-toolbar input[type="search"] {
-                line-height: 1.625; /* 26px */
+                line-height: 2.3755; /* 38px */
         }
+
+        .media-modal .media-toolbar .spinner {
+                margin-bottom: 10px;
+        }
 }
 
 @media screen and (max-width: 782px) {
@@ -2621 +2658 @@
                 top: 82px;
         }
 
-        .media-frame .media-toolbar input[type="search"] {
-                line-height: 2.25; /* 36px */
-        }
-
         .media-frame-toolbar .media-toolbar {
                 bottom: -48px;
         }
 }
 
+@media screen and (max-width: 782px) {
+        .mode-grid .attachments-browser .media-toolbar-primary {
+                display: block;
+        }
+}
+
 /* Responsive on portrait and landscape */
 @media only screen and (max-width: 640px), screen and (max-height: 400px) {
         /* Full-bleed modal */

src/wp-includes/media.php

@@ -3852 +3852 @@
                 'apply'                       => __( 'Apply' ),
                 'filterByDate'                => __( 'Filter by date' ),
                 'filterByType'                => __( 'Filter by type' ),
-                'searchMediaLabel'            => __( 'Search Media' ),
-                'searchMediaPlaceholder'      => __( 'Search media items...' ), // placeholder (no ellipsis)
+                'searchLabel'                 => __( 'Search' ),
+                'searchMediaLabel'            => __( 'Search Media' ), // backwards compatibility pre-5.3
+                'searchMediaPlaceholder'      => __( 'Search media items...' ), // backwards compatibility pre-5.3
                 'mediaFound'                  => __( 'Number of media items found: %d' ),
                 'mediaFoundHasMoreResults'    => __( 'Number of media items displayed: %d. Scroll the page for more results.' ),
                 'noMedia'                     => __( 'No media items found.' ),