Make the Media Library top bar layout consistent in List and Grid mode view

[afercia]

In WordPress 6.9, the Media Library top bar with CSS class wp-filter has a consistent layout and spacing across the List view and the Grid view. See first screenshot.

Starting from WordPress 7.0, the bar is layout and spacing (padding) is inconsistent, where in the Grid view there's way more spacing. See second screenshot.

There's no reason for this inconsistency. I'd like to propose to make the layout consistent. If the new version with more padding is preferred (in my personal opinion it looks nicer and more modern), then the bar layout in the List view should be changed as well.

[afercia]

WordPress 6.9

[afercia]

WordPress 7.0

[softglaze]

I'd be happy to prepare a PR for this. Based on the description, the direction would be: keep the 7.0 Grid-view spacing and apply the same padding to the wp-filter bar in List view, so both match the newer layout. Shall I proceed on that basis?

[softglaze]

Root cause confirmed: in the Grid view the bar is .media-toolbar.wp-filter and receives padding: 12px 16px from the .attachments-browser .media-toolbar rule in media-views.css. That padding was introduced in [61757] (voice-control usability improvements for media filters), where the toolbar's fixed height: 72px was replaced with padding-driven sizing. The List view bar is plain .wp-filter with padding: 0 10px from common.css, which was not updated — hence the inconsistency since 7.0.

One scoping note for the direction: .wp-filter is shared with the Plugins and Themes install screens, so adopting the Grid spacing can either be scoped to the Media Library list view only, or applied to .wp-filter globally (which would modernize those bars too). Happy to prepare the PR either way once there's a preference.

The Media Library top bar has inconsistent spacing between List and Grid mode since WordPress 7.0. This applies the grid view's spacing to the list view so both modes line up.

What the problem was:

• In WordPress 6.9 the .wp-filter top bar had consistent layout and spacing across the List and Grid views.
• [61757] replaced the grid view toolbar's height: 72px with padding: 12px 16px on .attachments-browser .media-toolbar, sizing it by padding instead of a fixed height. That commit also removed the old centring margins (margin-top: 11px on the filters, margin: 32px 0 0 on the search), so the padding is the intended new sizing rather than accidental stacking.
• The list view bar is a plain .wp-filter and kept padding: 0 10px from common.css, so it was never updated and is visibly tighter than the grid bar.

What the fix does:

• Applies padding: 12px 16px to the Media Library filter bar in list view, so the bar has the same spacing in both modes.

Approach and why:

• Scoped to .upload-php .wp-filter:not(.media-toolbar) so it applies only to the list view bar.
• The grid view toolbar is deliberately excluded. On upload.php, wp_enqueue_media() runs before admin-header.php enqueues colors, whose dependency chain pulls in wp-admin → common. That means media-views.css is printed *before* common.css. An unscoped .upload-php .wp-filter rule has equal specificity (0,2,0) to .attachments-browser .media-toolbar and would therefore override it, silently becoming the source of the grid toolbar's padding and leaving the media-views.css rule dead for the Media Library. Excluding the grid toolbar keeps media-views.css authoritative for the grid view and makes the result independent of stylesheet print order.
• Verified by measuring the grid bar's full padding rule chain before and after the patch: it is unchanged, and the patched rule does not appear in it.
• Scoped to the Media Library rather than changing .wp-filter globally. A global change would also restyle the Plugins and Themes install screens; that broader option is raised on the ticket and is awaiting dev-feedback.
• The media modal is unaffected: wp.media.view.AttachmentsBrowser only adds the wp-filter class when grid mode is active, so the modal toolbar is a plain .media-toolbar.
• The padding is horizontally symmetric, so no RTL-specific handling is needed.

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

## Use of AI Tools

AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 4.8
Used for: Ticket analysis and writing PR description. All changes were reviewed and validated by me.

[joedolson]

This was definitely accidental. This should be added to 7.1, as it's an easy fix.

@softglaze thanks for your research! It looks like @khokansardar has prepared a PR already.

[afercia]

Related: #65711. Turns out there is a reason why the top toolbar in the Media grid is taller: it was meant to make room for visible labels for the filter select elements. More details on #65711.

I don't think that should be fixed on this ticket. Best to keep things separated.

[softglaze]

Trunk: List view .wp-filter gets padding: 0 10px from common.css:1013

[softglaze]

Trunk: Grid view toolbar gets padding: 12px 16px from media-views.css:1252; the common.css rule is overridden

[softglaze]

PR 12664: List view now matches, padding: 12px 16px from the new .upload-php .wp-filter:not(.media-toolbar) rule in media.css:460

[softglaze]

PR 12664: Grid toolbar unchanged — still media-views.css:1252; the new rule does not appear in the applied chain

[softglaze]

PR 12664: List view filter bar at 1880px viewport, 100% zoom

[softglaze]

PR 12664: Grid view filter bar at the same viewport and zoom — spacing now matches List

[softglaze]

PR 12664: List view at 400px viewport — bar wraps to three rows, no overlap or horizontal scroll

[softglaze]

Test report for PR 12664 at head 1a26e04d51. This PR had no test reports; posting a full pass including a check of the stylesheet print-order claim in the PR description.

Environment

WordPress 7.1-beta3-62828-src (wordpress-develop Docker, serving src/), nginx, Chrome, Windows 11 host. build:dev run on both trunk and the PR branch so before/after come from the same pipeline. Cache disabled in DevTools, hard refresh between states.

Trunk baseline (before)

Screen	Element	Padding	Source
upload.php?mode=list	.wp-filter	0px 10px	common.css:1013
upload.php?mode=grid	.media-toolbar.wp-filter	12px 16px	media-views.css:1252 (common.css rule struck through)

Results with PR 12664 applied

#	Test	Expected	Result
1	List view bar	Picks up 12px 16px from the new rule	✅ .upload-php .wp-filter:not(.media-toolbar) from media.css:460 applies; common.css 0 10px struck through
2	Grid view bar	Unchanged; new rule must not apply	✅ Still 12px 16px from .attachments-browser .media-toolbar (media-views.css:1252). The new rule does not appear in the applied chain at all
3	Visual parity	Both bars same spacing	✅ Identical at the same viewport and zoom
4	plugin-install.php	Unchanged	✅ wp-filter → 0px 10px
5	theme-install.php	Unchanged	✅ wp-filter hide-if-no-js → 0px 10px 0px 20px
6	Media modal	Toolbar unaffected	✅ Modal toolbar is media-toolbar with no wp-filter class, so neither rule is in play
7	Responsive ~400px, List	No breakage	✅ Wraps to three rows, no overlap, no horizontal scroll

Computed values, list view after the patch:

wp-filter → 12px 16px

On the stylesheet print order

The PR description notes that media-views.css prints before common.css on upload.php, so an unscoped rule could silently take over the grid toolbar's padding. Checked that directly — the enqueued order on that screen is:

5:  media-views.css
7:  common.css
14: media.css

So media-views.css does print first, and the concern is real. Worth noting the new rule lands in media.css at index 14, after both — which would make an unscoped .upload-php .wp-filter (0,2,0) override .attachments-browser .media-toolbar (0,2,0) on source order regardless of where common.css sits. The :not(.media-toolbar) scoping handles this cleanly, and I verified empirically that the grid toolbar's applied rule chain is byte-identical to trunk, same source file and line. Nice catch on the print order — tested against that specifically.

One note on the branch

The PR branch is a few commits behind trunk (class-wp-email-address.php, formatting.php and others differ). No impact on a CSS-only change, but a rebase before commit would make the diff cleaner.

Tested this at head 1a26e04d51 — full report on the Trac ticket: https://core.trac.wordpress.org/ticket/65697#comment:7

Short version: List view picks up 12px 16px from the new rule in media.css, and the Grid toolbar is untouched — .upload-php .wp-filter:not(.media-toolbar) never enters its applied chain, so .attachments-browser .media-toolbar stays authoritative at media-views.css:1252, byte-identical to trunk. Verified the stylesheet print order you describe: on upload.php the enqueued order is media-views.css (5) → common.css (7) → media.css (14), so the concern is real and the :not() scoping handles it. Nice catch.

Also checked plugin-install.php and theme-install.php (unchanged), the media modal (toolbar has no wp-filter class, so unaffected — matches your note), and List view at 400px (wraps cleanly).

One small thing: the branch is a few commits behind trunk — a rebase before commit would make the diff cleaner.

[softglaze]

Following up on the scoping question from comment:2 — it's still open and I'd rather not guess at it.

A. Scope to the Media Library only. This is what PR 12664 does today.

B. Apply the spacing to .wp-filter globally, which would also restyle the Plugins and Themes install screens.

My report in comment:7 covers option A: list view, grid view, plugin-install.php, theme-install.php, the media modal, and 400px. If B is preferred I'm happy to retest, but that needs a wider pass across every screen using .wp-filter, so knowing before RC1 on 5 August would help.

Separately, a CI observation. PR 12664 is no longer fully green — three jobs are currently failing:

• Performance Tests / Multisite Default / Test before
• PHPUnit Tests / PHP 8.2 / MariaDB 10.11
• PHPUnit Tests / PHP 8.2 / MariaDB 10.11 multisite

These don't look related to the change. The "Test before" job runs against the base commit rather than the patch, so it fails without the CSS applied at all, and the PHPUnit failures are confined to a single PHP/DB pair while every other combination in the matrix passes. The branch is still a few commits behind trunk, so a rebase would most likely clear all three.

Leaving dev-feedback on the ticket.

[joedolson]

Marking for commit.

I don't think it makes a lot of sense to scope this change beyond the media library; other blocks of filters are markedly different, in that they don't include an opaque wrapper. The media library is already different from most other displays, but the grid and list view shouldn't be different from each other.

[joedolson]

In 62976:

Media: Equalize padding for filter bar between list and grid views.

The list and grid filter panels had different padding following [61757]. This is an undesirable difference, and should be equalized. Apply scoped padding to match the two filter bars.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/12664

Props afercia, softglaze, khokansardar, joedolson.
Fixes #65697.