Admin Reskin: Update card and metabox styling to align with WordPress Design System

[fabiankaegy]

This ticket covers the visual reskin of cards, metaboxes, and dashboard widgets in wp-admin as part of the WordPress 7.0 admin visual refresh (#64308).

Why This Matters

Cards, metaboxes, and dashboard widgets are the primary layout containers across wp-admin. They appear on the Dashboard, in the post editor, on plugin and theme screens, and throughout settings pages. Container styling influences the entire perceived quality of the admin interface.

Updating these surfaces creates a strong sense of cohesion between older admin screens and newer block editor interfaces while preserving all existing markup and behavior.

Proposed Scope

Container types:

• Postboxes and metaboxes (.postbox)
• Dashboard widgets
• Welcome panel
• Plugin cards (Plugins > Add New)
• Theme cards (Appearance > Themes)
• Generic boxed sections that behave like cards

Styling updates:

• Surface background and borders
• Border radius (rounded corners for dashboard, square for metaboxes)
• Header and divider styling
• Internal padding and spacing

Key Principles

• CSS-Only Changes: No markup or JavaScript modifications
• Backward Compatibility: All existing selectors preserved, collapse and drag-drop behavior unchanged
• Subtle Refinement: White backgrounds with subtle borders create a clean, modern appearance
• Accessibility: Collapse toggle buttons retain visible focus states

What This Is NOT

• No changes to collapse behavior or drag-and-drop interactions
• No new CSS custom properties for surfaces, borders, or elevation
• No changes to markup structure

Testing Approach

Test cards in screens where they are heavily used:

• Dashboard (Quick Draft, At a Glance, Activity widgets)
• Post editor metaboxes (Publish, Categories, Tags)
• Plugins > Add New (plugin card grid)
• Appearance > Themes (theme card grid)
• Widgets screen

Verify collapsed states, drag-and-drop reordering, and focus states on toggle buttons. Test in at least two color schemes (modern and light).

Related Resources

• Parent ticket: #64308
• Figma: ​https://www.figma.com/design/804HN2REV2iap2ytjRQ055/WordPress-Design-System?node-id=16532-44253
• Gutenberg Storybook: ​https://wordpress.github.io/gutenberg/?path=/docs/components-card--docs

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

[psorensen]

Visual nitpick - the focus indicator is bumping up against the border on the expand button:

Tested this in Playground. The cards look fine as per the Figma designs.

QA Notes:

Dashboard (Quick Draft, At a Glance, Activity widgets)✅
Post editor metaboxes (Publish, Categories, Tags)✅
Plugins > Add New (plugin card grid)✅
Appearance > Themes (theme card grid)✅
Widgets screen✅
Verify collapsed states, drag-and-drop reordering, and focus states on toggle buttons. Test in at least two color schemes (modern and light).❗Issues Seen:

1. _The collapse state is not working as expected. As I expand the menu, the expanded list, auto opens the Tools options. Video attached for reference._
2. _There is a flash in the editor while switching between the Styles and Navigation option in the Editor_

Added supporting media.
Tested using Playground.
Chrome: 144

PS: This is my first time testing a functionality. If I have missed something, please let me know.

​https://github.com/user-attachments/assets/d652fe04-b730-4b2a-89dc-09b839815dc2
​https://github.com/user-attachments/assets/c218c9e7-3029-42c3-8e85-3f4c5fd335af

cc @fabiankaegy @jeffpaul

[fabiankaegy]

Thanks @psorensen :) Fixed 👍

[poojapadamad]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: ​https://patch-diff.githubusercontent.com/raw/WordPress/wordpress-develop/pull/10862.diff

Environment

• WordPress: 7.0-alpha-20260204.112130
• PHP: 7.4.33
• Server: PHP.wasm
• Database: WP_SQLite_Driver (Server: 8.0.38 / Client: 3.51.0)
• Browser: Chrome 144.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.4
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.1

Actual Results

The cards should look fine as per the Figma designs in the below pages:

• Dashboard (Quick Draft, At a Glance, Activity widgets)✅
• Post editor metaboxes (Publish, Categories, Tags)✅
• Plugins > Add New (plugin card grid)✅
• Appearance > Themes (theme card grid)✅
• Widgets screen✅
• Verify collapsed states, drag-and-drop reordering, and focus states on toggle buttons. Test in at least two color schemes (modern and light)❗️

Issues noticed:

When the user clicks on the upward or downward arrow to expand or collapse the card, the card’s position shifts unexpectedly on the page. On clicking the upward arrow, the card moves upward, and on clicking the downward arrow, the card moves downward instead of maintaining a consistent layout position.
When the user switches between Styles and Navigation in the editor, flash is observed.

=== Screenshots and screen recording are attached for reference:
https://core.trac.wordpress.org/attachment/ticket/64549/


[fabiankaegy]

@poojapadamad can you give me a little more context about what browser / os etc you are seeing this on? And are you not able to replicate that on the current latest version? Because I am not able to replicate it at all?

[poojapadamad]

I am testing on Chrome browser on macOS Sonoma Version 14.1. I tested on playground using pull request - 10862.

[fabiankaegy]

@poojapadamad thanks for the videos. I guess I'm still not sure what issue you are seeing?

Especially in the site editor, that has nothing to do with this PR here.

@fabiankaegy Does this card reskin also includes the Classic Editor metaboxes? Thanks!

@phpbits right now no. I've kept the scope of it intentionally small

[joedolson]

Marking for commit. I think this is ready; but I'll leave the committing to you, @fabiankaegy, unless you want to pass it off. Taking ownership to make sure it happens.

[sabernhardt]

Related: #57931

[fabiankaegy]

In 61646:

Admin: Update card and container styles to align with the design system.

Apply 8px border-radius and a consistent rgb(0, 0, 0, 0.1) border to cards, postboxes, plugin cards, and theme cards. Standardize internal padding to 16px for postbox content and headers.

Update drag-and-drop interactions: replace dashed gray outlines on sortable drop zones with theme-color-tinted backgrounds, and restyle sortable placeholders with a solid theme-color border and subtle background fill.

Adjust dashboard widget spacing, welcome panel padding, and empty-container drop zone styles. Add overflow hidden to plugin and theme cards to clip content to the new rounded corners.

Props fabiankaegy, mukesh27, joedolson, navi161, phpbits, karmatosed, sabernhardt, poojapadamad, psorensen, generosus.
Fixes #64549.

[Mamaduka]

It could be me, but I think "At a Glance" dashboard widget spacing is bit off, compared to other widgets. They used default padding, while #dashboard_right_now .main uses custom one.

Was this intentional decision? Could find a convo regarding this.

[wildworks]

The welcome panel has a black background applied to the entire box. When a transparent border is applied to this box, the black background is exposed, resulting in a black border. I don't think this is the intended design.

Perhaps the black background should only be applied to the header, rather than the box itself. Example:

diff --git a/src/wp-admin/css/dashboard.css b/src/wp-admin/css/dashboard.css
index 1c5d42ea6b..8605694adf 100644
--- a/src/wp-admin/css/dashboard.css
+++ b/src/wp-admin/css/dashboard.css
@@ -140,7 +140,6 @@
        position: relative;
        overflow: auto;
        margin: 16px 0;
-       background-color: #151515;
        border: 1px solid rgb(0, 0, 0, 0.1);
        border-radius: 8px;
        font-size: 14px;
@@ -170,6 +169,7 @@
 .welcome-panel-header {
        position: relative;
        color: #fff;
+       background-color: #151515;
 }
 
 .welcome-panel-header-image {

[wildworks]

Welcome Panel has black border

[audrasjb]

In 61877:

Administration: Use rounded corners for dashboard widgets drop zones.

Admin Cards and Metabox were modified in [61646] to better align with the modern WordPress design system, but dashboard widgets drop zones weren't updated as such. This changeset adds rounded corners to these drop zones for better consistency.

Follow-up to [61646].

Props ocean90, niravsherasiya7707, stefanvelthuys, valentingrenier, manhar, huzaifaalmesbah, r1k0.
Fixes #64787.
See #64549.