[wp-trac] [WordPress Trac] #64549: Admin Reskin: Update card and metabox styling to align with WordPress Design System

[WordPress Trac]

#64549: Admin Reskin: Update card and metabox styling to align with WordPress
Design System
----------------------------+-------------------------------------
 Reporter:  fabiankaegy     |       Owner:  (none)
     Type:  enhancement     |      Status:  new
 Priority:  normal          |   Milestone:  7.0
Component:  Administration  |     Version:
 Severity:  normal          |  Resolution:
 Keywords:                  |     Focuses:  ui, accessibility, css
----------------------------+-------------------------------------
Changes (by sabernhardt):

 * focuses:  ui, css => ui, accessibility, css
 * milestone:  Awaiting Review => 7.0


Old description:

> 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

New description:

 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

--

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/64549#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform