mirror/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2026-06-19 07:37:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Media: Restore usage of attachment filters in media modal.

Browse Source 
[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.
Built from https://develop.svn.wordpress.org/trunk@62326


git-svn-id: http://core.svn.wordpress.org/trunk@61606 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
joedolson
2026-05-07 21:36:43 +00:00
parent f0ec22b948
commit ae7ce5a915
11 changed files with 116 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
wp-admin/css/media-rtl.css
+17 -7
View File
@@ -556,8 +556,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 {
@@ -572,11 +582,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 {
wp-admin/css/media-rtl.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
wp-admin/css/media.css
+17 -7
View File
@@ -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 {
wp-admin/css/media.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
wp-includes/css/media-views-rtl.css
+27 -13
View File
@@ -26,16 +26,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;
@@ -350,12 +341,30 @@
.media-toolbar-secondary {
float: right;
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-right: 10px;
@@ -2718,6 +2727,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;
wp-includes/css/media-views-rtl.min.css
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long
wp-includes/css/media-views.css
+27 -13
View File
@@ -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;
wp-includes/css/media-views.min.css
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long
wp-includes/js/media-views.js
+20 -58
View File
@@ -4555,44 +4555,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
});
this.toolbar.set( 'filters', Filters.render() );
}
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() );
}
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 );
@@ -4609,31 +4597,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({
priority: -75
}).render() );
this.toolbar.set( '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({
controller: this.controller,
model: this.collection.props,
priority: -75
priority: -75,
}).render() );
// BulkSelection is a <div> with subviews, including screen reader text.
@@ -4744,28 +4719,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
wp-includes/js/media-views.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
wp-includes/version.php
+1 -1
View File
@@ -16,7 +16,7 @@
*
* @global string $wp_version
*/
$wp_version = '7.1-alpha-62324';
$wp_version = '7.1-alpha-62326';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.