Media grid toolbar buttons size

[afercia]

Trac ticket: https://core.trac.wordpress.org/ticket/65732

Fixes the height and styling of the various buttons in the Media grid.
Avoids a vertical 'jump' in the page content.

Note:
I also changed the delete button red color on hover/focus because the previous:
color: color.adjust(tokens.$alert-red, $lightness: 10%);
was below 4.5:1.
Instead of making colors lighter or soften them on hover / focus, we should make them more visible.

Use of AI Tools

None

Video recording to illustrate the 'jump' in the page content.

01.jump.mov

---

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

[Copilot]

Pull request overview

Updates Media Library grid toolbar styling to prevent layout “jumping” and normalize button appearance when switching modes (e.g., Bulk Select), primarily by stabilizing toolbar height and removing unintended button sizing interactions.

Changes:

• Reserve consistent vertical space for the grid toolbar to prevent content shifting when controls wrap or mode changes.
• Adjust admin color-scheme button styling so “link delete” buttons reliably use the intended alert color and avoid being styled as standard buttons.
• Override media button view defaults so specific toolbar buttons don’t receive the default button-large size class.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/wp-admin/css/media.css	Adds a minimum toolbar height to reduce layout jumping in Media grid.
src/wp-admin/css/colors/_admin.scss	Tweaks button/link/delete styling specificity and avoids applying default button styling to link-buttons.
src/js/media/views/button/select-mode-toggle.js	Removes extra size-related classes and forces default sizing behavior for the select-mode toggle.
src/js/media/views/button/delete-selected.js	Forces non-button-large sizing for the bulk delete button.
src/js/media/views/attachments/browser.js	Ensures the “Delete permanently” link-style button doesn’t inherit default large sizing.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props afercia, joedolson, shailu25.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

[shail-mehta]

• This PR affects the Customize button text, making it difficult to read.

[joedolson]

This improves things, but there's still a jump because the toolbar changes height.

But it's a pain to get both of these isolated; I'm going to work on a PR to address that.

And the mixin change will clearly not work, given how it overrides all primary buttons...

[joedolson]

I hadn't previously notice https://core.trac.wordpress.org/ticket/65697, so I'll withdraw my comments about the padding; those can be handled on that ticket.

[afercia]

One of the problems on this PR is that, at least for me, running npm run dev (the 'watch' task) doesn't build the CSS drom _admin.scss on the fly as I would have expected. So for any change there I have to stop npm run dev and start it again to see the change. Annoying.

The problem with the CSS specificity is that this:
.button:not(.button-link)
was increasing the specificity, impacting other buttons like the 'Customize' one in the themes page.
I changed it to:
.button:where(:not(.button-link))
which does not increase specificity and should solve the issue.

I also addressed some Copilot feedback.

[Copilot]

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated no new comments.

Suppressed comments (2)

src/wp-admin/css/colors/_admin.scss:82

• The hover/focus selector increases specificity by repeating .button-link-delete, but it no longer matches the intent stated in the comment (overriding the default .button-link styles) and is harder to read/maintain. Using .button-link.button-link-delete here achieves the same specificity while staying consistent with the non-hover selector above.

/* 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%);

src/wp-admin/css/colors/_admin.scss:162

• Typo/grammar in this comment ("Exlude" / "avoiding to increase"). Clarifying it helps explain why :where() is being used here.

	/* Exlude .button-link avoiding to increase specificity. */

[Copilot]

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated no new comments.

Suppressed comments (2)

src/wp-admin/css/colors/_admin.scss:69

• The higher-specificity .wp-core-ui .button-link.button-link-delete rule applies even in disabled / aria-disabled states and can override the intended disabled styling from the .button-link block (same specificity, later in the file). Restrict this rule (and its hover/focus variant) to enabled controls so disabled delete links remain visibly disabled.

.media-modal .delete-attachment,
.media-modal .trash-attachment,
.media-modal .untrash-attachment,
/* Needs higher specificity to override the default button-link. */
.wp-core-ui .button-link.button-link-delete {

src/wp-admin/css/media.css:562

• min-height: 80px is smaller than the minimum height of two wrapped toolbar rows when .media-toolbar-secondary wraps (buttons have min-height: 40px and the flex container uses gap: 8px, so two rows require at least 88px). This can still allow the toolbar to grow and cause a remaining vertical jump when items wrap.

.media-frame.mode-grid .media-toolbar {
	margin-bottom: 15px;
	height: auto;
	min-height: 80px;
}

[afercia]

Looks like aria-disabled buttons still have red text in this PR. In part this is a problem also on trunk, where aria-disabled buttons have a blue border. See screenshot.
Last commit should fix it.

[joedolson]

I'm approving; I'm going to make one minor text change to a comment to improve the English clarity.

[github-actions]

A commit was made that fixes the Trac ticket referenced in the description of this pull request.

SVN changeset: 62959
GitHub commit: 91138e1

This PR will be closed, but please confirm the accuracy of this and reopen if there is more work to be done.