Admin Reskin: Update notice styling to align with WordPress Design System

[fabiankaegy]

This ticket covers the visual reskin of admin notices in wp-admin as part of the WordPress 7.0 admin visual refresh (#64308).

Why This Matters

Notices are a key communication mechanism in wp-admin. They are often the first thing an editor sees after completing an action. A consistent notice system improves clarity, reduces visual noise, and supports accessibility through predictable structure and contrast.

Currently, notice styling varies across screens and has drifted from the patterns established in the block editor. This refresh brings notices into alignment with the WordPress Design System while preserving all existing markup and behavior.

Proposed Scope

Notice types:

• Info notices (.notice-info)
• Success notices (.notice-success)
• Warning notices (.notice-warning)
• Error notices (.notice-error)

Additional patterns:

• Dismissible notices with dismiss button
• Inline notices
• Legacy .updated and .error classes
• Links and buttons inside notices

Key Principles

• CSS-Only Changes: No markup or JavaScript modifications
• Backward Compatibility: All existing selectors preserved, legacy classes styled consistently
• Semantic Colors: Static colors for each notice type (not tied to admin theme color)
• Accessibility: Text contrast meets WCAG AA, dismiss button keyboard accessible with visible focus

What This Is NOT

• No new notice classes
• No new CSS custom properties for semantic colors
• No changes to notice behavior or dismissal logic

Testing Approach

Test notices where they occur naturally:

• Dashboard (plugin/theme update notices)
• Plugins screen (activation, deactivation, updates)
• Updates screen (available and completed updates)
• Settings pages (form submission feedback)

Verify in at least two color schemes (modern and light) and confirm dismiss button focus states are visible.

Related Resources

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

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

[Joen]

Nice, I'd be happy to support this. To note, @fcoveram has designed a new Notice component that he has been meaning to contribute as a visual refresh to the existing Notice (​https://wordpress.github.io/gutenberg/?path=/docs/components-notice--docs), which I'll upload after this comment. It's not clear if this moment is the right time to do so, as arguably the component itself should be updated before separate CSS is, but sharing for awareness.

[Joen]

A new Notice design proposal

[fcoveram]

Thanks for amplifying the idea @Joen

I updated the ​Notice design in the Experimental Component file and marked as ready for dev. I also added a proposal for the ​caution icon to increase the contrast in comparison to the information one.

The Figma component has three density levels that should work according to the ​dimension tokens and density work, so until that conversation lands on a path, I think we can continue with the existing spacing approach.

[dkotter]

This looks really good. Tested across most of the admin screens, both with the Default theme and Modern theme. Also tested with a handful of plugins, namely Yoast, AI Experiments, Safe SVG and Safe Redirect Manager. Overall things looked good to me.

The only area I noticed that could potentially be looked at is the Theme File Editor screen (screenshot attached). By default it shows two notices, one using notice-info and one using notice-warning. The warning looks fine but the info has a transparent background so it blends in with the rest of the page.

Comparing this to trunk, those notices get a white background so they stand out more. I didn't find any other place that uses the info notices (though I'm sure there are) and maybe transparent is what we want for the background, just looks off to me.

[dkotter]

Theme File Editor page with two admin notices

[fcoveram]

Thanks @dkotter for catching this. I think the color language should be addressed at the system level with the work happening at the package level. By following the color system we can treat the surfaces as shades that work on different contexts.

Thanks for the review @joedolson I've addressed the items you've raised individually so this can get another look 👍

Hi @fabiankaegy,

I tried this PR, created example notices, and I am getting styles that differ from the Figma design. Thanks!

[navi161]

Status: Issues Seen❗

The green, yellow and red background colors in the notices are slightly all lighter shades and do not match the Figma designs.

Screens attached in the Attachment section
Tested this on Playground using Github PR

@phpbits which designs do you mean? The new ones that were provided in the thread?

Right now the goal is to standardize on the ones that are already shipping in Gutenberg today. Not implement the new ones that will come down the line :)

[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/10784.diff

Environment

• WordPress: 7.0-alpha-20260211.081539
• 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

Tested on below screens:

• Plugins screen (activation, deactivation)
• Settings pages (form submission feedback)
• Theme editor screen

Issue noticed:
The background color of the Success and Error notices appears lighter than in the Figma design, while the Warning notice background color appears brighter than specified in Figma.

Screenshot is attached for reference:

https://core.trac.wordpress.org/attachment/ticket/64548/New%20Note.jpeg

[fabiankaegy]

In 61647:

Admin: Update notice styles to align with the design system.

Remove the full border and box-shadow from notices, keeping only the 4px left border. Add semantic background colors to each notice type: green for success, yellow for warnings, red for errors, and transparent for info. Update border colors to match the design system tokens.

Restyle the dismiss button with a larger 24px icon, flexbox centering, and 2px border-radius. Replace the red hover color with a subtle opacity change and apply a theme-color focus ring. Increase dismissible notice right padding to accommodate the larger button.

Update notice text with consistent typography and restyle notice links to use theme color custom properties with matching focus rings.

Props fabiankaegy, mukesh27, joedolson, phpbits, sabernhardt, Joen, fcoveram, dkotter, navi161, poojapadamad.
Fixes #64548.