Visually align Notice from @wordpress/components with Notice from @wordpress/ui#78231
Open
jameskoster wants to merge 10 commits into
Open
Visually align Notice from @wordpress/components with Notice from @wordpress/ui#78231jameskoster wants to merge 10 commits into
Notice from @wordpress/components with Notice from @wordpress/ui#78231jameskoster wants to merge 10 commits into
Conversation
Restyle the components-package `Notice` to visually mirror the UI-package `Notice`: full 1px border with rounded corners, tinted intent surfaces, WPDS-token-driven colors and spacing, `closeSmall` dismiss icon, compact action buttons, and a 2-row grid layout that places actions in their own row so the notice's outer padding remains symmetric on all four edges. Co-authored-by: Cursor <cursoragent@cursor.com>
Apply `--wpds-typography-line-height-sm` to `.components-notice__content` so `1lh` in the centering calc resolves to the WPDS body line-height (20px). Previously `1lh` resolved against an inherited line-height, producing ~4.5px of `padding-block` instead of the intended 2px and breaking parity with `Notice` from `@wordpress/ui`. Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Switch hardcoded typography and border-width values to WPDS tokens. Move `font-family` / `font-size` from the notice root to `.components-notice__content` so typography lives on the text-bearing child, mirroring how `Notice` from `@wordpress/ui` sets typography on its `Text` children rather than on the root container. Replace the hardcoded 1px border with `--wpds-border-width-xs` for consistency with other UI components (Dialog, Badge, Popover, etc). Also leave a TODO at the centering calc to swap `$button-size-small` for a WPDS size token once size tokens land in `@wordpress/theme`. Co-authored-by: Cursor <cursoragent@cursor.com>
jameskoster
added
[Type] Enhancement
|
Size Change: -35 B (0%) Total Size: 7.96 MB 📦 View Changed
ℹ️ View Unchanged
|
mirka
reviewed
May 13, 2026
Member
mirka
left a comment
mirka
left a comment
There was a problem hiding this comment.
Thanks for working on this 🙏
I didn't touch
@wordpress/noticesbecause frankly I don't know what it is.
You can test this by running this in dev tools console in a post editor:
wp.data.dispatch( 'core/notices' ).createNotice(
'success',
'Inline notice smoke test',
{ id: 'inline-test' }
);
wp.data.dispatch( 'core/notices' ).createNotice(
'warning',
'Pinned notice smoke test',
{ id: 'pinned-test', isDismissible: false }
);I think we'll want some adjustment here too.
Member
There was a problem hiding this comment.
Let's remove the mentions of the Theme component behavior because it's no longer relevant.
diff --git a/packages/components/src/notice/README.md b/packages/components/src/notice/README.md
index 486a90c4c0c..e388cf714b1 100644
--- a/packages/components/src/notice/README.md
+++ b/packages/components/src/notice/README.md
@@ -17,7 +17,6 @@ Notices display at the top of the screen, below any toolbars anchored to the top
Notices are color-coded to indicate the type of message being communicated:
- **Informational** notices are **blue** by default.
-- If there is a parent `Theme` component with an `accent` color prop, informational notices will take on that color instead.
- **Success** notices are **green.**
- **Warning** notices are **yellow.**
- **Error** notices are **red.**
@@ -101,7 +100,7 @@ Used to provide a custom spoken message in place of the `children` default.
#### `status`: `'warning' | 'success' | 'error' | 'info'`
-Determines the color of the notice: `warning` (yellow), `success` (green), `error` (red), or `'info'`. By default `'info'` will be blue, but if there is a parent Theme component with an accent color prop, the notice will take on that color instead.
+Determines the color of the notice: `warning` (yellow), `success` (green), `error` (red), or `'info'`. By default `'info'` will be blue.
- Required: No
- Default: `info`
diff --git a/packages/components/src/notice/types.ts b/packages/components/src/notice/types.ts
index d0264e6265d..6772b63cdea 100644
--- a/packages/components/src/notice/types.ts
+++ b/packages/components/src/notice/types.ts
@@ -53,8 +53,7 @@ export type NoticeProps = {
/**
* Determines the color of the notice: `warning` (yellow),
* `success` (green), `error` (red), or `'info'`.
- * By default `'info'` will be blue, but if there is a parent Theme component
- * with an accent color prop, the notice will take on that color instead.
+ * By default `'info'` will be blue.
*
* @default 'info'
*/While we're there, we should also consider removing the mentions to specific colors in the prop descriptions.
Comment on lines
-78
to
-82
| .components-notice__content { | ||
| margin-top: $grid-unit-15; | ||
| margin-bottom: $grid-unit-15; | ||
| line-height: 2; | ||
| } |
Member
There was a problem hiding this comment.
There are about four instances of style overrides of this class throughout the codebase, which could potentially break with this style refactor. Probably worth testing.
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Contributor
|
We should also take into account places where gutenberg/packages/block-library/src/gallery/editor.scss Lines 24 to 36 in 983b40b In general, we should search for any Given the new styles and DOM structure, existing overrides won't work or, even worse, will produce unexpected results. |
ciampo
reviewed
May 14, 2026
Contributor
There was a problem hiding this comment.
Depending on the previous comment re. gating padding only when dismissible, the is-dismissible class could end up being unused.
We may want to keep it around for legacy purposes, but if we do so, maybe we should add a JS comment to clarify it.
Contributor
Author
There was a problem hiding this comment.
I vote for removing. Folks can still target using :has(.components-notice__dismiss) which I've done in packages/list-reusable-blocks/src/components/import-form/style.scss.
Contributor
There was a problem hiding this comment.
Sounds good. It may warrant a CHANGELOG entry, though
| ); | ||
| <div className="components-notice__content">{ children }</div> | ||
| { actions.length > 0 && ( | ||
| <div className="components-notice__actions"> |
Contributor
There was a problem hiding this comment.
More in general, changing the DOM structure (.components-notice__actions from child to sibling of .components-notice__content) could cause regressions to consumers that were (wrongly) relying on this DOM structure. We should inspect Notice usage across the repo to look for this potential regression
Contributor
Author
There was a problem hiding this comment.
I don't see any regressions across the repo. Obvious I can't account for third party consumers, but maybe a breaking change entry in the changelog is adequate?
Contributor
There was a problem hiding this comment.
Sounds good, maybe one entry to flag both the is-dismissible removal and the modified DOM structure of .components-notice__actions
Informational notices are documented as blue by default only; remove parent Theme accent behavior from README and status prop JSDoc. Co-authored-by: Cursor <cursoragent@cursor.com>
Remove the root is-dismissible modifier; dismissibility is visible from the rendered dismiss control. Document CSS hooks and list-reusable-blocks overrides using :has(.components-notice__dismiss). Update tests, snapshot, coding guidelines example, and CHANGELOG. Clarify why content vertical padding applies when the notice is not dismissible. Co-authored-by: Cursor <cursoragent@cursor.com>
Move font-family, font-size, and line-height to .components-notice so the actions row inherits WPDS body styles alongside message content. Co-authored-by: Cursor <cursoragent@cursor.com>
Document breaking change: notice actions are siblings of __content, not nested beneath it, for third-party selector updates. Co-authored-by: Cursor <cursoragent@cursor.com>
Remove InlineNotices stylesheet; strip gallery, placeholder, media replace flow, and import form hacks that conflicted with grid-based Notice. Keep narrow-column overflow rules in media replace flow. Document __actions sibling in coding guidelines; add package CHANGELOG entries. Co-authored-by: Cursor <cursoragent@cursor.com>
- Remove stale suppressions (npm run lint:js:prune-suppressions). - Reference #78231 on Notice-related Unreleased changelog entries. Co-authored-by: Cursor <cursoragent@cursor.com>
github-actions
Bot
added
[Package] Block library
Contributor
Author
|
Here's how the editor inline notices look on this PR: 
Obviously not ideal. I'd prefer not to apply any style overrides though. The simplest change might be some padding to offset the notices from the canvas boundary e.g. 
|
ciampo
reviewed
May 14, 2026
| } | ||
| ``` | ||
|
|
||
| When the `actions` prop is set, `Notice` also renders a `.components-notice__actions` element as a sibling of `.components-notice__content` (before the dismiss control). |
Contributor
There was a problem hiding this comment.
Definitely something that existed prior to this PR, but I wonder if we can stop referring to internal classnames and DOM structure, which are supposed to be internal implementation details and shouldn't really be documented to consumers?
Comment on lines
+77
to
84
| .components-notice { | ||
| max-width: 100%; | ||
| } | ||
|
|
||
| .components-notice__content { | ||
| overflow: hidden; | ||
| word-wrap: break-word; | ||
| } | ||
| .components-notice__dismiss { | ||
| position: absolute; | ||
| right: 10px; | ||
| overflow-wrap: break-word; | ||
| } |
Contributor
There was a problem hiding this comment.
Are the remaining .components-notice styles necessary here?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Aligns the visual style of
Noticein@wordpress/componentswithNoticein@wordpress/ui: bordered, rounded, intent-tinted surfaces driven by WPDS tokens, grid layout with symmetric padding when actions exist,closeSmalldismiss control, and compact action buttons.Also in this PR (follow-up cleanup):
packages/components/CHANGELOG.md): the rootis-dismissibleclass is removed; dismissibility is reflected by rendering.components-notice__dismiss(CSS can use:has(.components-notice__dismiss)where needed)..components-notice__actionsis a sibling of.components-notice__content, not nested under it—custom selectors that assumed a descendant relationship need updating.NoticeREADME /typesJSDoc no longer describe informational color following a parentThemeaccentprop (info stays blue by default in the docs).NoticeCSS overrides that fought the new component (@wordpress/noticesInlineNoticesstylesheet deleted; gallery editor, block placeholder notices, media replace flow error area, list-reusable-blocks import form).docs/contributors/code/coding-guidelines.mdBEM example and a short note about the__actionssibling were updated.font-family,font-size, andline-heightlive on the root.components-noticeagain so both message copy and the actions row inherit the same WPDS stack (sibling__actionsdoes not inherit from__content).JSX / API:
isDismissibleand other props behave as before; the structural change is the actions wrapper + removal of theis-dismissibleclass from the root.Why
@wordpress/componentsNoticeand@wordpress/uiNoticecan appear on the same screen. The old left-stripe look was inconsistent with the UI card and did not consistently use WPDS tokens for theming / dark mode.Legacy package-level overrides (absolute dismiss, stripped padding, etc.) were written for the old markup and layout; leaving them in place caused clashes or subtle bugs with the new grid and token-based chrome.
Part of #76135.
How
Container — Replace the 4px left stripe + flat background with a 1px border, rounded corners, and a tinted intent surface from WPDS (
--wpds-color-bg-surface-{intent}-weak,--wpds-color-stroke-surface-{intent},--wpds-color-fg-content-{intent},--wpds-dimension-padding-md,--wpds-border-radius-lg, etc.). Per-intent colors use locally scoped--wp-components-notice-*variables on the root.Layout —
display: grid: message in row 1 / col 1, dismiss in row 1 / col 2, actions in row 2 / col 1 so padding stays symmetric when actions are present (aligned with UI Notice’s composition).Markup —
.components-notice__actionsis a sibling of.components-notice__contentso vertical centering padding on the message column does not apply to the actions row.Dismiss —
closeSmallicon; neutral interactive colors via--wpds-color-fg-interactive-neutral(and active) on.components-notice__dismissinstead of leaning on legacy button accent-on-hover.Actions —
size="compact"on action buttons (aligned with UI Notice action sizing).Typography &
1lh— Root.components-noticesetsfont-family,font-size, andline-heightfrom WPDS so1lhin the content column’s vertical alignment calc matches the intended body line-height and the actions row inherits the same type scale.Content-only vertical padding — Extra
padding-blockon.components-notice__contentis intentionally applied even whenisDismissible={false}so block height stays consistent with dismissible notices, in line with UI Notice always applying vertical padding on text regions whether or not a close control is shown.Testing instructions
npm run storybook:dev) and check Components / Feedback / Notice (including dismiss on/off, actions, Notice list) and Design System / Components / Notice for a coherent card + intent treatment.InlineNotices+ template validation), block placeholder warnings (components-with-notices-ui), media replace flow error copy, gallery image error notice, list-reusable-blocks import error.Notice, verify you are not selecting.is-dismissibleor.components-notice__content .components-notice__actions; use the patterns described inpackages/components/CHANGELOG.md(Unreleased → Breaking Changes).Screenshots
Acknowledgements
@wordpress/notices:InlineNoticesno longer ships a localNoticestylesheet; it relies on@wordpress/componentsfor notice chrome. Related overrides were also removed in block-editor, block-library (gallery editor), and list-reusable-blocks—see those packages’ CHANGELOGs under Unreleased.useSpokenMessage/ politeness — unchanged.components/Buttonlacks a dedicated neutral variant (same caveat as before).Use of AI tools
Made with Cursor.