From 9c64b4ccd1c7e7d28c4a71ba4f06feba941512a7 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Mon, 27 Jul 2026 14:21:38 +0200 Subject: [PATCH 1/9] Fix media grid toolbar buttons size. --- src/js/media/views/attachments/browser.js | 1 + src/js/media/views/button/delete-selected.js | 3 +++ src/js/media/views/button/select-mode-toggle.js | 4 ++-- src/wp-admin/css/media.css | 1 + 4 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/js/media/views/attachments/browser.js b/src/js/media/views/attachments/browser.js index 5533110d815f9..82b7359eb832a 100644 --- a/src/js/media/views/attachments/browser.js +++ b/src/js/media/views/attachments/browser.js @@ -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 = [], diff --git a/src/js/media/views/button/delete-selected.js b/src/js/media/views/button/delete-selected.js index b5ad9f8d3b14f..04be114079406 100644 --- a/src/js/media/views/button/delete-selected.js +++ b/src/js/media/views/button/delete-selected.js @@ -41,6 +41,9 @@ DeleteSelected = Button.extend(/** @lends wp.media.view.DeleteSelectedButton.pro render: function() { Button.prototype.render.apply( this, arguments ); + this.model.set( { + size: '' + } ); if ( this.controller.isModeActive( 'select' ) ) { this.$el.addClass( 'delete-selected-button' ); } else { diff --git a/src/js/media/views/button/select-mode-toggle.js b/src/js/media/views/button/select-mode-toggle.js index 858c0e16cb2e4..9bd21b50346c7 100644 --- a/src/js/media/views/button/select-mode-toggle.js +++ b/src/js/media/views/button/select-mode-toggle.js @@ -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; }, @@ -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(); diff --git a/src/wp-admin/css/media.css b/src/wp-admin/css/media.css index dbce2c705995c..8b77b749ef7cd 100644 --- a/src/wp-admin/css/media.css +++ b/src/wp-admin/css/media.css @@ -557,6 +557,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; } .media-frame.mode-grid .media-toolbar label:not(.media-search-input-label) { From 895042b436a3a5fb390efdb46cbf1576ebc70c37 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Mon, 27 Jul 2026 14:45:47 +0200 Subject: [PATCH 2/9] Restore button-link and delete permanently button styling. --- src/wp-admin/css/colors/_admin.scss | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss index 313666e3ded73..e5a979182a134 100644 --- a/src/wp-admin/css/colors/_admin.scss +++ b/src/wp-admin/css/colors/_admin.scss @@ -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-delete.button-link-delete { color: tokens.$alert-red; } @@ -75,8 +76,9 @@ 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 { +/* Need higher specificity to override the default button-link. */ +.wp-core-ui .button-link-delete.button-link-delete:hover, +.wp-core-ui .button-link-delete.button-link-delete:focus { color: color.adjust(tokens.$alert-red, $lightness: 10%); } @@ -158,7 +160,7 @@ input[type="radio"]:focus { .wp-core-ui { /* Default button - theme color border and text (matches secondary) */ - .button { + .button:not(.button-link) { @include mixins.button-secondary(); } From 68c6976ca42d65626e7b2ab488ee1ea10ad0eafa Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Mon, 27 Jul 2026 14:21:38 +0200 Subject: [PATCH 3/9] Fix media grid toolbar buttons size. --- src/js/media/views/attachments/browser.js | 1 + src/js/media/views/button/delete-selected.js | 3 +++ src/js/media/views/button/select-mode-toggle.js | 4 ++-- src/wp-admin/css/media.css | 1 + 4 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/js/media/views/attachments/browser.js b/src/js/media/views/attachments/browser.js index 5533110d815f9..82b7359eb832a 100644 --- a/src/js/media/views/attachments/browser.js +++ b/src/js/media/views/attachments/browser.js @@ -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 = [], diff --git a/src/js/media/views/button/delete-selected.js b/src/js/media/views/button/delete-selected.js index b5ad9f8d3b14f..04be114079406 100644 --- a/src/js/media/views/button/delete-selected.js +++ b/src/js/media/views/button/delete-selected.js @@ -41,6 +41,9 @@ DeleteSelected = Button.extend(/** @lends wp.media.view.DeleteSelectedButton.pro render: function() { Button.prototype.render.apply( this, arguments ); + this.model.set( { + size: '' + } ); if ( this.controller.isModeActive( 'select' ) ) { this.$el.addClass( 'delete-selected-button' ); } else { diff --git a/src/js/media/views/button/select-mode-toggle.js b/src/js/media/views/button/select-mode-toggle.js index 858c0e16cb2e4..9bd21b50346c7 100644 --- a/src/js/media/views/button/select-mode-toggle.js +++ b/src/js/media/views/button/select-mode-toggle.js @@ -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; }, @@ -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(); diff --git a/src/wp-admin/css/media.css b/src/wp-admin/css/media.css index 73e01d70ecf1d..5a033b98ba350 100644 --- a/src/wp-admin/css/media.css +++ b/src/wp-admin/css/media.css @@ -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; } .media-frame.mode-grid .media-toolbar label:not(.media-search-input-label) { From d33dc3474b4f235f4d4ef6558b918640b489f6e3 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Mon, 27 Jul 2026 14:45:47 +0200 Subject: [PATCH 4/9] Restore button-link and delete permanently button styling. --- src/wp-admin/css/colors/_admin.scss | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss index 2d10323c2749d..a09d40607b767 100644 --- a/src/wp-admin/css/colors/_admin.scss +++ b/src/wp-admin/css/colors/_admin.scss @@ -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-delete.button-link-delete { color: tokens.$alert-red; } @@ -75,8 +76,9 @@ 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 { +/* Need higher specificity to override the default button-link. */ +.wp-core-ui .button-link-delete.button-link-delete:hover, +.wp-core-ui .button-link-delete.button-link-delete:focus { color: color.adjust(tokens.$alert-red, $lightness: 10%); } @@ -158,7 +160,7 @@ input[type="radio"]:focus { .wp-core-ui { /* Default button - theme color border and text (matches secondary) */ - .button { + .button:not(.button-link) { @include mixins.button-secondary(); } From 27068b1514c85b9d31293e5f0b3229027389c7cf Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Fri, 31 Jul 2026 12:26:29 +0200 Subject: [PATCH 5/9] Fix CSS specificity issue and make Copilot happy. --- src/js/media/views/button/delete-selected.js | 6 +++--- src/wp-admin/css/colors/_admin.scss | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/js/media/views/button/delete-selected.js b/src/js/media/views/button/delete-selected.js index 04be114079406..ddb30f66a452a 100644 --- a/src/js/media/views/button/delete-selected.js +++ b/src/js/media/views/button/delete-selected.js @@ -40,10 +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 ); - this.model.set( { - size: '' - } ); + if ( this.controller.isModeActive( 'select' ) ) { this.$el.addClass( 'delete-selected-button' ); } else { diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss index a09d40607b767..330b84ded1ff6 100644 --- a/src/wp-admin/css/colors/_admin.scss +++ b/src/wp-admin/css/colors/_admin.scss @@ -66,7 +66,7 @@ span.wp-media-buttons-icon:before { .media-modal .trash-attachment, .media-modal .untrash-attachment, /* Needs higher specificity to override the default button-link. */ -.wp-core-ui .button-link-delete.button-link-delete { +.wp-core-ui .button-link.button-link-delete { color: tokens.$alert-red; } @@ -158,9 +158,9 @@ input[type="radio"]:focus { /* Core UI */ .wp-core-ui { - /* Default button - theme color border and text (matches secondary) */ - .button:not(.button-link) { + /* Exlude .button-link avoiding to increase specificity. */ + .button:where(:not(.button-link)) { @include mixins.button-secondary(); } From 0e26dc52e2256222618dcf747068b65f1154ea82 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Fri, 31 Jul 2026 12:46:51 +0200 Subject: [PATCH 6/9] Make selectors consistent and fix typo. --- src/wp-admin/css/colors/_admin.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss index 330b84ded1ff6..c2b8c3cf4aee0 100644 --- a/src/wp-admin/css/colors/_admin.scss +++ b/src/wp-admin/css/colors/_admin.scss @@ -77,8 +77,8 @@ span.wp-media-buttons-icon:before { .media-modal .trash-attachment:focus, .media-modal .untrash-attachment:focus, /* Need higher specificity to override the default button-link. */ -.wp-core-ui .button-link-delete.button-link-delete:hover, -.wp-core-ui .button-link-delete.button-link-delete:focus { +.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%); } @@ -159,7 +159,7 @@ input[type="radio"]:focus { .wp-core-ui { /* Default button - theme color border and text (matches secondary) */ - /* Exlude .button-link avoiding to increase specificity. */ + /* Exclude .button-link avoiding to increase specificity. */ .button:where(:not(.button-link)) { @include mixins.button-secondary(); } From cdeafb6e5e9fbfb3a49ee4896ce2dd4924a8694f Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Fri, 31 Jul 2026 12:48:04 +0200 Subject: [PATCH 7/9] Fix delete button red color contrast ratio on hover and focus. --- src/wp-admin/css/colors/_admin.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss index c2b8c3cf4aee0..0f33730352eae 100644 --- a/src/wp-admin/css/colors/_admin.scss +++ b/src/wp-admin/css/colors/_admin.scss @@ -79,7 +79,7 @@ span.wp-media-buttons-icon:before { /* 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%); + color: color.adjust(tokens.$alert-red, $lightness: -10%); } /* Forms */ From cbfd8cfd5d8e412ee92983d545bcf48135cdb0eb Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Fri, 31 Jul 2026 14:49:17 +0200 Subject: [PATCH 8/9] Fix color for aria-disabled buttons. --- src/wp-includes/css/buttons.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/wp-includes/css/buttons.css b/src/wp-includes/css/buttons.css index 967970a9ba461..57d5754483199 100644 --- a/src/wp-includes/css/buttons.css +++ b/src/wp-includes/css/buttons.css @@ -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; } From a5f7bf1bc949e2f148e84daf168a7fe790fde71e Mon Sep 17 00:00:00 2001 From: Joe Dolson Date: Fri, 31 Jul 2026 11:44:03 -0500 Subject: [PATCH 9/9] Update src/wp-admin/css/colors/_admin.scss --- src/wp-admin/css/colors/_admin.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss index 0f33730352eae..eae6f900030ce 100644 --- a/src/wp-admin/css/colors/_admin.scss +++ b/src/wp-admin/css/colors/_admin.scss @@ -159,7 +159,7 @@ input[type="radio"]:focus { .wp-core-ui { /* Default button - theme color border and text (matches secondary) */ - /* Exclude .button-link avoiding to increase specificity. */ + /* Exclude .button-link without increasing specificity. */ .button:where(:not(.button-link)) { @include mixins.button-secondary(); }