[wp-trac] [WordPress Trac] #64308: Explore a "Coat-of-Paint" Visual Reskin of the WordPress Admin for WordPress 7.0

[WordPress Trac]

#64308: Explore a "Coat-of-Paint" Visual Reskin of the WordPress Admin for
WordPress 7.0
----------------------------+-----------------------------
 Reporter:  fabiankaegy     |      Owner:  (none)
     Type:  enhancement     |     Status:  new
 Priority:  normal          |  Milestone:  Awaiting Review
Component:  Administration  |    Version:
 Severity:  normal          |   Keywords:
  Focuses:  ui, css         |
----------------------------+-----------------------------
 During a recent Core Committer meeting, there was interest voiced for
 pursuing a "coat-of-paint" visual reskin of the WordPress admin for the
 WordPress 7.0 release cycle. This ticket proposes formally initiating that
 effort.

 The goal is to modernize the admin's appearance, reduce inconsistencies
 between old screens and the newer block editor / site editor screens, and
 better align it with the WordPress design system as a whole:
 https://www.figma.com/design/804HN2REV2iap2ytjRQ055/WordPress-Design-
 System?node-id=551-29619&t=fgacEMH0dvBqKwXF-1

 = Why Now =

 The admin's visual language has fallen out of alignment with Gutenberg and
 newer interfaces. Prior attempts became unmanageably broad; this effort is
 intentionally constrained to a reskin only. And with the 7.0 release being
 right around the corner, this feels like a good time to address some of
 these discrepancies.

 = Proposed Scope =

 This is a '''visual-only refresh''' with no functional or architectural
 changes. The focus is on core components that appear across all admin
 screens:

  * '''Buttons''': Consistent styling for primary, secondary, and link
 buttons
  * '''Input Fields''': Unified appearance for text inputs, selects,
 checkboxes, and radio buttons
  * '''Admin Tables''': Light refresh of admin tables styles to align with
 DataViews
  * '''Cards''': Dashboard widgets and metaboxes with modern styling
  * '''Notices''': Clear, accessible info/warning/success/error messages
  * '''Typography''': Consistent font sizes, weights, and line heights
  * '''Spacing''': Unified spacing scale across the admin
  * '''Global Background''': Updated background color aligned with the
 design system
  * '''Admin Frame''': Explore a sidebar navigation pattern similar to the
 Site Editor (if time and resources permit)

 = Key Principles =

  * '''CSS-Only Changes''': No markup or JavaScript modifications
  * '''Backward Compatibility''': All existing CSS class names and admin
 color schemes preserved
  * '''Design System Alignment''': Built on the WordPress Design System
 foundation:
    https://www.figma.com/design/804HN2REV2iap2ytjRQ055/WordPress-Design-
 System?node-id=551-29619&t=fgacEMH0dvBqKwXF-1

 = What This Is NOT =

  * This is not a React-based admin rebuild
  * This is not an information architecture restructure
  * This is not a DataViews adoption (functional changes)
  * This is not removing or changing existing functionality

 = Timeline Approach =

 Given that any visual refresh always comes with feedback and potential
 compatibility issues, the aim here is to get this into trunk as early as
 possible to allow for a longer feedback cycle.

 My proposal is a phased approach here:

  * Get the foundational color variables in place so they can be used
 across the all the admin screens
 (https://core.trac.wordpress.org/ticket/49930)
  * Update the buttons, input fields, notices, cards, and tables to align
 with the new design system (partially handled by
 https://core.trac.wordpress.org/ticket/62864)
  * Update the typography to align with the new design system
  * Update the spacing to align with the new design system
  * Update the admin frame to align with the new design system
  * Update the global background color to align with the design system

 = Initial Exploration =

 I've started some initial explorations here:
 https://github.com/fabiankaegy/wp-admin-redesign-exploration

 They can be tested in a playground environment:
 https://playground.wordpress.net/?blueprint-
 url=https://raw.githubusercontent.com/fabiankaegy/wp-admin-redesign-
 exploration/main/_playground/blueprint.json

 = Questions for Discussion =

  * '''Scope Agreement''': Does the proposed scope feel appropriate for the
 7.0 timeline?
  * '''Feature Plugin''': Should we create this all as a feature plugin
 (MP7) before merging into trunk?
  * '''Design Direction''': Are there specific visual patterns from the
 Block/Site Editor we should prioritize?
  * '''Color Schemes''': How do we ensure all existing admin color schemes
 work well with the refresh?
  * '''Plugin Compatibility''': What level of plugin testing is needed
 before merge?
  * '''Admin Frame''': Is the admin frame sidebar navigation worth
 exploring, or should we defer it?

 = Related Tickets =

  * #49930 – Replace wp-admin color schemes with CSS custom properties
  * #62831 – Admin Design Refresh / Global Styles (lessons learned)
  * #62864 – Rethinking WP Admin Styles (incorporated concerns)

 ----

 '''Note''': This is intentionally a high-level proposal to start the
 conversation. Detailed implementation specifications, CSS examples, etc
 can follow if we agree this is a good direction to go in.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/64308>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform