[wp-trac] [WordPress Trac] #64308: Explore a "Coat-of-Paint" Visual Reskin of the WordPress Admin for WordPress 7.0
WordPress Trac
noreply at wordpress.org
Wed Nov 26 10:32:07 UTC 2025
#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 | Resolution:
Keywords: | Focuses: ui, css
----------------------------+------------------------------
Description changed by fabiankaegy:
Old description:
> 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.
New description:
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
* '''View Transitions''': Apply global view transitions for cross
document navigations within 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#comment:4>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform
More information about the wp-trac
mailing list