Skip to content

feat(components): standardize wp-admin snackbars, bottom-centered - #447

Merged
thomasguillot merged 4 commits into
mainfrom
dsgnews-185-wp-admin-snackbars
Jul 8, 2026
Merged

feat(components): standardize wp-admin snackbars, bottom-centered#447
thomasguillot merged 4 commits into
mainfrom
dsgnews-185-wp-admin-snackbars

Conversation

@thomasguillot

@thomasguillot thomasguillot commented Jun 29, 2026

Copy link
Copy Markdown
Contributor

All Submissions:

Changes proposed in this Pull Request:

PR 2 of 2 in the snackbar audit, covering the wp-admin (back-end) snackbars. PR #445 covered the front-end (newspack-ui / my-account) side.

Standardizes every wp-admin snackbar onto a single neutral style: positioned at the bottom, 24px from the edge, visually centered, with no border. This adopts core's snackbar-container() mixin (from @wordpress/base-styles, shipped alongside the snackbar-centering change in @wordpress/components 30.6+), so the back-end side becomes mostly deletion of bespoke CSS rather than new styling.

Three surfaces were affected:

  • Wizard snackbars (WizardSnackbar in newspack-components): dropped the bespoke bottom-left positioning and the success/error/warning colored borders. The component is now just the wizard-store onRemove glue around core's Snackbar; its notices render inside a centered container.
  • Advertising placements wizard: replaced its hand-rolled bottom: 16px; left: 50%; translateX(-50%) container with the shared mixin.
  • Story Budget notices: replaced its bottom: 24px; left-padded container with the shared mixin so its notices center too.

Accessibility: removing the colored borders dropped the success/error/warning visual signal, so that semantic distinction now lives in the screen-reader announcement instead. Core's Snackbar announces on mount via speak() (@wordpress/a11y); we map notice severity to its politeness so error notices announce assertively and everything else announces politely. This applies to wizard snackbars (WizardSnackbar maps the notice type) and Story Budget (maps the @wordpress/notices status); the advertising wizard only emits success confirmations, so it stays polite.

Closes DSGNEWS-185.

How to test the changes in this Pull Request:

  1. pnpm --filter newspack build and pnpm --filter newspack-story-budget build, then load the local site.
  2. Trigger a wizard snackbar (e.g. save settings in any Newspack wizard, or toggle a placement in Advertising > Ad Placements). Confirm the snackbar appears at the bottom of the viewport, horizontally centered, ~24px from the bottom edge, with no colored border.
  3. In Advertising > Ad Placements, enable/disable a placement and confirm its confirmation snackbar is bottom-centered (previously bottom-left of center via a bespoke transform).
  4. In Story Budget, create a budget (or any action that emits a notice) and confirm the snackbar is bottom-centered.
  5. Trigger an error-type wizard notice and confirm it still appears and auto-dismisses (it now shares the neutral style rather than a red border).
  6. With multiple notices at once, confirm they stack vertically with an 8px gap (matching core's SnackbarList) and stay centered.
  7. Confirm the WP admin menu/admin bar do not overlap the snackbar.
  8. Accessibility: with a screen reader (or by watching the #wp-a11y-speak-assertive / #wp-a11y-speak-polite live regions in the DOM), confirm an error notice is announced assertively while success/info notices announce politely.

Other information:

  • Have you added an explanation of what your changes do and why you'd like us to include them?
  • Have you written new tests for your changes, as applicable?
  • Have you successfully run tests with your changes locally?

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Status] Approved Pull request has been approved

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants