diff --git a/src/js/media/views/attachments/browser.js b/src/js/media/views/attachments/browser.js index 65936efc186ef..26218ea2fa1ae 100644 --- a/src/js/media/views/attachments/browser.js +++ b/src/js/media/views/attachments/browser.js @@ -198,44 +198,32 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro } if ( showFilterByType ) { - // "Filters" is a , a label element needs to be rendered before. + this.toolbar.set( 'filtersLabel', new wp.media.view.Label({ value: l10n.filterByType, attributes: { 'for': 'media-attachment-filters' }, priority: -80 - }); + }).render() ); if ( 'uploaded' === this.options.filters ) { - Filters = new wp.media.view.AttachmentFilters.Uploaded({ + this.toolbar.set( 'filters', new wp.media.view.AttachmentFilters.Uploaded({ controller: this.controller, model: this.collection.props, - }); + priority: -80 + }).render() ); } else { Filters = new wp.media.view.AttachmentFilters.All({ controller: this.controller, model: this.collection.props, + priority: -80 }); - } - - var filterContainer = wp.media.View.extend({ - tagname: 'div', - className: 'media-filter-container type-filter', - - initialize: function() { - this.views.add( [ filtersLabel, Filters ] ); - } - }); - this.toolbar.set( 'filters', new filterContainer({ - controller: this.controller, - model: this.controller.props, - priority: -80 - }).render() ); + this.toolbar.set( 'filters', Filters.render() ); + } } - var dateFilter, dateFilterLabel, dateFilterContainer; /* * Feels odd to bring the global media library switcher into the Attachment browser view. * Is this a use case for doAction( 'add:toolbar-items:attachments-browser', this.toolbar ); @@ -252,31 +240,18 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro priority: -90 }).render() ); - // DateFilter is a , a label element needs to be rendered before. + this.toolbar.set( 'dateFilter', new wp.media.view.Label({ value: l10n.filterByDate, attributes: { 'for': 'media-attachment-date-filters' }, - }); - dateFilter = new wp.media.view.DateFilter({ - controller: this.controller, - model: this.collection.props, - }); - - dateFilterContainer = wp.media.View.extend({ - tagname: 'div', - className: 'media-filter-container date-filter', - - initialize: function() { - this.views.add( [ dateFilterLabel, dateFilter ] ); - } - }); - - this.toolbar.set( 'dateFilters', new dateFilterContainer({ + priority: -75 + }).render() ); + this.toolbar.set( 'dateFilter', new wp.media.view.DateFilter({ controller: this.controller, model: this.collection.props, - priority: -75 + priority: -75, }).render() ); // BulkSelection is a
with subviews, including screen reader text. @@ -387,28 +362,15 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro } } else if ( this.options.date ) { - // DateFilter is a , a label element needs to be rendered before. + this.toolbar.set( 'dateFilterLabel', new wp.media.view.Label({ value: l10n.filterByDate, attributes: { 'for': 'media-attachment-date-filters' }, - }); - dateFilter = new wp.media.view.DateFilter({ - controller: this.controller, - model: this.collection.props, - }); - - dateFilterContainer = wp.media.View.extend({ - tagname: 'div', - className: 'media-filter-container date-filter', - - initialize: function() { - this.views.add( [ dateFilterLabel, dateFilter ] ); - } - }); - - this.toolbar.set( 'dateFilters', new dateFilterContainer({ + priority: -75 + }).render() ); + this.toolbar.set( 'dateFilter', new wp.media.view.DateFilter({ controller: this.controller, model: this.collection.props, priority: -75 diff --git a/src/wp-admin/css/media.css b/src/wp-admin/css/media.css index 20806972d3aa1..ae21bb77d3f82 100644 --- a/src/wp-admin/css/media.css +++ b/src/wp-admin/css/media.css @@ -555,8 +555,18 @@ border color while dragging a file over the uploader drop area */ height: auto; } -.media-frame.mode-grid .media-toolbar label { - display: block; +.media-frame.mode-grid .media-toolbar label:not(.media-search-input-label) { + border: 0; + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + /* Many screen reader and browser combinations announce broken words as they would appear visually. */ + word-wrap: normal !important; + word-break: normal !important; } .media-frame.mode-grid .media-toolbar select { @@ -571,11 +581,11 @@ border color while dragging a file over the uploader drop area */ padding: 0 8px; } -.media-frame.mode-grid .media-toolbar .button { - min-height: 32px; - line-height: 2.30769231; /* 30px for 32px height with 13px font */ - padding: 0 12px; - align-self: end; +.media-frame.mode-grid .media-toolbar-secondary { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 8px; } .media-frame.mode-grid.mode-edit .media-toolbar-secondary > .select-mode-toggle-button { diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css index f78a946c260f7..0feac6b178d7f 100644 --- a/src/wp-includes/css/media-views.css +++ b/src/wp-includes/css/media-views.css @@ -25,16 +25,7 @@ .media-modal label { font-size: 13px; -} - -.media-modal .media-filter-container label { - display: block; -} - -.media-modal .media-filter-container select, -.media-modal .search-form input { - margin-top: 6px; -} +} .media-modal .legend-inline { position: absolute; @@ -349,12 +340,30 @@ .media-toolbar-secondary { float: left; height: 100%; - display: flex; - flex-wrap: wrap; - gap: 12px; + display: grid; + grid-template-columns: repeat( 2, 1fr ); + grid-template-rows: repeat( 2, 1fr ); + grid-column-gap: 12px; + grid-row-gap: 0px; align-items: end; } +label[for="media-attachment-filters"] { + grid-area: 1 / 1 / 2 / 2; +} + +select#media-attachment-filters { + grid-area: 2 / 1 / 3 / 2; +} + +label[for="media-attachment-date-filters"] { + grid-area: 1 / 2 / 2 / 3; +} + +select#media-attachment-date-filters { + grid-area: 2 / 2 / 3 / 3; +} + .media-toolbar-primary > .media-button, .media-toolbar-primary > .media-button-group { margin-left: 10px; @@ -2717,6 +2726,11 @@ line-height: 2.25; /* 36px */ } + .media-toolbar-secondary, + .media-toolbar-secondary label { + display: block; + } + .media-sidebar .setting select.columns, .attachment-details .setting select.columns { width: auto;