Visually align Notice from @wordpress/components with Notice from @wordpress/ui#78231
Merged
Conversation
|
Size Change: +246 B (0%) Total Size: 7.98 MB 📦 View Changed
ℹ️ View Unchanged
|
mirka
reviewed
May 13, 2026
Member
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.
|
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
jameskoster
added a commit
that referenced
this pull request
May 14, 2026
- Remove stale suppressions (npm run lint:js:prune-suppressions). - Reference #78231 on Notice-related Unreleased changelog entries. Co-authored-by: Cursor <cursoragent@cursor.com>
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
jameskoster
added a commit
that referenced
this pull request
May 18, 2026
- Remove stale suppressions (npm run lint:js:prune-suppressions). - Reference #78231 on Notice-related Unreleased changelog entries. Co-authored-by: Cursor <cursoragent@cursor.com>
b15e176 to
d5ec00d
Compare
ciampo
reviewed
May 18, 2026
ciampo
reviewed
May 18, 2026
ciampo
reviewed
May 18, 2026
7f87159 to
5701b76
Compare
jameskoster
added a commit
that referenced
this pull request
May 18, 2026
- Remove stale suppressions (npm run lint:js:prune-suppressions). - Reference #78231 on Notice-related Unreleased changelog entries. Co-authored-by: Cursor <cursoragent@cursor.com>
ciampo
reviewed
May 18, 2026
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>
Replace prose that documented Notice internal class names and sibling DOM structure with a pattern-level guideline and an expanded example. Co-authored-by: Cursor <cursoragent@cursor.com>
MediaReplaceFlow uses global notices, so the unused .block-editor-media-flow__error rules never applied. Co-authored-by: Cursor <cursoragent@cursor.com>
Introduce vertical gaps on NoticeList and a components-inline-notices wrapper in InlineNotices, with editor padding and meta box resize fixes. Co-authored-by: Cursor <cursoragent@cursor.com>
Merge DOM structure notes and avoid recommending internal class selectors. Co-authored-by: Cursor <cursoragent@cursor.com>
Use notices-inline-notices-wrapper class and co-located SCSS instead of components-inline-notices in @wordpress/components. Co-authored-by: Cursor <cursoragent@cursor.com>
Add inlineNoticesClassName to EditorInterface so edit-post can pass edit-post-layout__inline-notices instead of relying on notices internals. Co-authored-by: Cursor <cursoragent@cursor.com>
Avoid components package class selectors; assert dismissibility via role, partition lists via public className props. Co-authored-by: Cursor <cursoragent@cursor.com>
…ies" This reverts commit 5701b76.
The editor-notices class is only used in EditorInterface, so the skeleton-specific selectors are unnecessary. Co-authored-by: Cursor <cursoragent@cursor.com>
42e2d22 to
8c556c8
Compare
Only mount InlineNotices when there are store notices or renderable children, and pass TemplateValidationNotice only when the template is invalid so padding does not leave a gap with no visible notices. Co-authored-by: Cursor <cursoragent@cursor.com>
|
Flaky tests detected in e2d3f86. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/26159449873
|
Contributor
|
Just noticed this change on trunk and it looks like the autosave notice when you reload a post with unsaved (autosaved) drafts is quite large now, and looks a bit off to my eyes when the site has a background color: 
Is the above intentional? Not sure how best to fix it, but for this kind of notice, I'd expect it to all be on one line and either not have any rounding, or be placed on top of the editor canvas visually, rather than having white poke through. (Happy to write up an issue, just wasn't sure if what I was noticing is intended behaviour 🙂) |
Contributor
|
@andrewserong, looking at the "before" screenshot posted by @jameskoster in the PR description, the main differences compare to the previous design are:
The notice content was already on two separate lines. 
I'll let @jameskoster and @WordPress/gutenberg-design folks discuss the matter, as AFAIK we're planning on soon switching to the new |
Contributor
Thank you @ciampo, I can't believe I scrolled right past that! 🤦 This could just be a case of: something looked different to me so I look at that area with fresh eyes and it appears to take up a lot of room to me (especially on a laptop screen). But before the change, I was used to it, so I never noticed it 😄 Not an urgent thing at all then since it's so similar to how things were before. Keen to hear what designers think about how we can make that area a little less prominent, perhaps. |
Contributor
Author
|
Notices in WordPress need an overhaul in general. I'd welcome ideas for the editor context, but would be wary of changing too much without a holistic vision. For instance if the admin bar makes its way into the site editor (per the experiment) then maybe there should be a notice slot directly below: 
Otherwise we risk ending up with one notice experience for the editor and another for the admin which probably isn't where we want to be? |
Contributor
Very good point. Really I mostly wanted to check that everyone was okay with how things currently look in trunk. If so, then it sounds like we don't need to do anything urgent here! I'll keep this in the back of my mind, though, and will open an issue if I have any simpler ideas that don't get tangled with the admin bar. |
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
4 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).Inline notice spacing:
NoticeList: vertical gap between notices in a list (display: flex,flex-direction: column,gap: var(--wpds-dimension-gap-md)on.components-notice-list)—applies everywhereNoticeListis used, includingwithNoticespanels.InlineNotices: wraps pinned and dismissible lists in a.components-inline-noticesstack with the same gap between lists; optionalclassNameon the wrapper; empty lists are not rendered; returnsnullwhen there is nothing to show.className="editor-notices"and adds container padding in the content area and distraction-free header (.editor-noticesuses--wpds-dimension-padding-md).edit-post: meta boxes resize logic measures:scope > .components-inline-noticesinstead of individual.components-notice-listsiblings.No changes to the
Noticecomponent itself for spacing—layout is handled by list/stack wrappers.JSX / API:
isDismissibleand other props behave as before; the structural change is the actions wrapper + removal of theis-dismissibleclass from the root.InlineNoticesgains an optionalclassNameprop for the wrapper.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.
After the visual refresh, inline editor notices (pinned + dismissible stacks at the top of the canvas) still rendered flush against each other and the content edges. Spacing belongs on list/stack containers, not on individual
Noticesurfaces, so multiple cards read as separate messages without double-framing.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.Inline notice stacks (three layers, no
Noticeoverrides):.components-notice-list.components-inline-notices.editor-noticesTesting 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. Confirm Notice list shows vertical spacing between multiple notices.InlineNotices)—confirm gaps between notices, between pinned/dismissible groups, and inset from the content edges; check autosave and template validation notices; try distraction-free mode (notices in the header).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).InlineNotices, note the new optionalclassNameon the wrapper (seepackages/notices/README.md).Screenshots
Acknowledgements
@wordpress/notices:InlineNoticesno longer ships a localNoticestylesheet; it relies on@wordpress/componentsfor notice chrome. It now renders a.components-inline-noticeswrapper with spacing between lists; consumers can passclassNamefor surface-specific inset (the editor useseditor-notices). Related overrides were also removed in block-editor, block-library (gallery editor), and list-reusable-blocks—see those packages’ CHANGELOGs under Unreleased.edit-post: meta boxes height calculation observes the inline notices wrapper instead of bareNoticeListsiblings.useSpokenMessage/ politeness — unchanged.components/Buttonlacks a dedicated neutral variant (same caveat as before).Noticekeeps its own intent surface. No grouped “notice band” background in this PR.Use of AI tools
Made with Cursor.