Skip to content

Media grid toolbar buttons size #12714

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
afercia wants to merge 12 commits into from
Closed

Media grid toolbar buttons size #12714

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
9c64b4c
Fix media grid toolbar buttons size.
afercia Jul 27, 2026
895042b
Restore button-link and delete permanently button styling.
afercia Jul 27, 2026
5c2f0dc
Merge branch 'trunk' into pr/12714
joedolson Jul 30, 2026
68c6976
Fix media grid toolbar buttons size.
afercia Jul 27, 2026
d33dc34
Restore button-link and delete permanently button styling.
afercia Jul 27, 2026
27068b1
Fix CSS specificity issue and make Copilot happy.
afercia Jul 31, 2026
0e26dc5
Make selectors consistent and fix typo.
afercia Jul 31, 2026
cdeafb6
Fix delete button red color contrast ratio on hover and focus.
afercia Jul 31, 2026
cbfd8cf
Fix color for aria-disabled buttons.
afercia Jul 31, 2026
820e800
Merge branch 'trunk' into media-grid-toolbar-buttons-size
joedolson Jul 31, 2026
ca0a260
Merge branch 'media-grid-toolbar-buttons-size' of https://github.com/…
joedolson Jul 31, 2026
a5f7bf1
Update src/wp-admin/css/colors/_admin.scss
joedolson Jul 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/js/media/views/attachments/browser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -328,6 +328,7 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro
text: l10n.deletePermanently,
controller: this.controller,
priority: -55,
size: '',
click: function() {
var removed = [],
destroy = [],
Expand Down
3 changes: 3 additions & 0 deletions src/js/media/views/button/delete-selected.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,10 @@ DeleteSelected = Button.extend(/** @lends wp.media.view.DeleteSelectedButton.pro
},

render: function() {
// Set size silently before calling base render to avoid nested renders.
this.model.set( 'size', '', { silent: true } );
Button.prototype.render.apply( this, arguments );

if ( this.controller.isModeActive( 'select' ) ) {
this.$el.addClass( 'delete-selected-button' );
} else {
Expand Down
4 changes: 2 additions & 2 deletions src/js/media/views/button/select-mode-toggle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ SelectModeToggle = Button.extend(/** @lends wp.media.view.SelectModeToggle.proto

render: function() {
Button.prototype.render.apply( this, arguments );
this.$el.addClass( 'select-mode-toggle-button button-compact' );
this.$el.addClass( 'select-mode-toggle-button' );
return this;
},

Expand All @@ -52,7 +52,7 @@ SelectModeToggle = Button.extend(/** @lends wp.media.view.SelectModeToggle.proto
// @todo The Frame should be doing all of this.
if ( this.controller.isModeActive( 'select' ) ) {
this.model.set( {
size: 'large',
size: '',
text: l10n.cancel
} );
children.not( '.spinner, .media-button' ).hide();
Expand Down
14 changes: 8 additions & 6 deletions src/wp-admin/css/colors/_admin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,8 @@ span.wp-media-buttons-icon:before {
.media-modal .delete-attachment,
.media-modal .trash-attachment,
.media-modal .untrash-attachment,
.wp-core-ui .button-link-delete {
/* Needs higher specificity to override the default button-link. */
.wp-core-ui .button-link.button-link-delete {
color: tokens.$alert-red;
}
Comment thread
afercia marked this conversation as resolved.

Expand All @@ -75,9 +76,10 @@ span.wp-media-buttons-icon:before {
.media-modal .delete-attachment:focus,
.media-modal .trash-attachment:focus,
.media-modal .untrash-attachment:focus,
.wp-core-ui .button-link-delete:hover,
.wp-core-ui .button-link-delete:focus {
color: color.adjust(tokens.$alert-red, $lightness: 10%);
/* Need higher specificity to override the default button-link. */
.wp-core-ui .button-link.button-link-delete:hover,
.wp-core-ui .button-link.button-link-delete:focus {
color: color.adjust(tokens.$alert-red, $lightness: -10%);
}

/* Forms */
Expand Down Expand Up @@ -156,9 +158,9 @@ input[type="radio"]:focus {
/* Core UI */

.wp-core-ui {

/* Default button - theme color border and text (matches secondary) */
.button {
/* Exclude .button-link without increasing specificity. */
.button:where(:not(.button-link)) {
@include mixins.button-secondary();
}

Expand Down
1 change: 1 addition & 0 deletions src/wp-admin/css/media.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -558,6 +558,7 @@ border color while dragging a file over the uploader drop area */
.media-frame.mode-grid .media-toolbar {
margin-bottom: 15px;
height: auto;
min-height: 80px;
Comment thread
joedolson marked this conversation as resolved.
}

.media-frame.mode-grid .media-toolbar label:not(.media-search-input-label) {
Expand Down
1 change: 1 addition & 0 deletions src/wp-includes/css/buttons.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,7 @@ TABLE OF CONTENTS:

.wp-core-ui .button[aria-disabled="true"],
.wp-core-ui .button-secondary[aria-disabled="true"] {
color: #8a8a8a !important;
cursor: default;
}

Expand Down
Loading