Media: Restore usage of attachment filters in media modal.

[61757] wrapped the media attachment filters, which changed the return value of toolbar filters from `AttachmentFilters` to a `wp.media.View` instance, breaking the API to customize media library filters.

Reverts the shape change in the attachment filter return value and implements CSS based positioning for the visible labels.

Props bernhard-reiter, joedolson, ozgursar, audrasjb, darshitrajyaguru97, jorbin.
Fixes #64948.

git-svn-id: https://develop.svn.wordpress.org/trunk@62326 602fd350-edb4-49c9-b593-d223f7449a82

Author: joedolson

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 <select>, a visually hidden label element needs to be rendered before.
-			var filtersLabel = new wp.media.view.Label({
+			// "Filters" is a <select>, 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 <select>, a visually hidden label element needs to be rendered before.
-			dateFilterLabel = new wp.media.view.Label({
+			// DateFilter is a <select>, 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 <div> 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 <select>, a visually hidden label element needs to be rendered before.
-			dateFilterLabel = new wp.media.view.Label({
+			// DateFilter is a <select>, 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

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 {

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;