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

[thomasguillot]

All Submissions:

• Have you followed the Newspack Contributing guidelines?
• Does your code follow the WordPress coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

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?

[adekbadek]

Just some nits ;)

[Copilot]

Pull request overview

This PR standardizes wp-admin snackbars across Newspack admin surfaces by switching bespoke fixed-position styling to WordPress core’s shared snackbar-container() layout and by mapping notice severity to Snackbar’s screen-reader politeness (assertive for errors, polite otherwise).

Changes:

• Replaces custom snackbar positioning CSS with @wordpress/base-styles snackbar-container() for wizard snackbars, the advertising placements wizard, and Story Budget notices.
• Removes wizard snackbar “severity border” styling and introduces a shared snackbar list container for bottom-centered stacking.
• Adds accessibility improvements by mapping error notices to politeness="assertive" (wizard snackbars + Story Budget).

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
plugins/newspack-story-budget/src/style.scss	Updates Story Budget notice container to use core snackbar-container() and standardized stacking gap.
plugins/newspack-story-budget/src/app/index.js	Sets Snackbar politeness based on notice status (assertive for errors).
plugins/newspack-plugin/src/wizards/advertising/style.scss	Replaces custom fixed positioning with core snackbar-container() for placements wizard snackbars.
packages/components/src/wizard/index.js	Wraps wizard notices in a shared .newspack-wizard__snackbar-list container for standardized positioning/stacking.
packages/components/src/wizard/components/WizardSnackbar.js	Removes visual severity styling concerns; maps wizard notice type to Snackbar politeness while keeping wizard-store removal behavior.
packages/components/src/wizard/components/style.scss	Adds snackbar list container styling using core mixin + standardized gap.

[github-actions]

Hey @thomasguillot, good job getting this PR merged! 🎉

Now, the needs-changelog label has been added to it.

Please check if this PR needs to be included in the "Upcoming Changes" and "Release Notes" doc. If it doesn't, simply remove the label.

If it does, please add an entry to our shared document, with screenshots and testing instructions if applicable, then remove the label.

Thank you! ❤️