Media grid toolbar buttons size - #12714
Conversation
There was a problem hiding this comment.
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-largesize 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.
| render: function() { | ||
| Button.prototype.render.apply( this, arguments ); | ||
| this.model.set( { | ||
| size: '' | ||
| } ); |
| .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; | ||
| } |
|
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 Core Committers: Use this line as a base for the props when committing in SVN: To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Test using WordPress PlaygroundThe 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
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
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.
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.