feat(components): standardize wp-admin snackbars, bottom-centered - #447
Merged
Conversation
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
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/components30.6+), so the back-end side becomes mostly deletion of bespoke CSS rather than new styling.Three surfaces were affected:
WizardSnackbarinnewspack-components): dropped the bespokebottom-leftpositioning and the success/error/warning colored borders. The component is now just the wizard-storeonRemoveglue around core'sSnackbar; its notices render inside a centered container.bottom: 16px; left: 50%; translateX(-50%)container with the shared mixin.bottom: 24px; left-paddedcontainer 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
Snackbarannounces on mount viaspeak()(@wordpress/a11y); we map notice severity to itspolitenessso error notices announce assertively and everything else announces politely. This applies to wizard snackbars (WizardSnackbarmaps the noticetype) and Story Budget (maps the@wordpress/noticesstatus); the advertising wizard only emits success confirmations, so it stays polite.Closes DSGNEWS-185.
How to test the changes in this Pull Request:
pnpm --filter newspack buildandpnpm --filter newspack-story-budget build, then load the local site.SnackbarList) and stay centered.#wp-a11y-speak-assertive/#wp-a11y-speak-politelive regions in the DOM), confirm an error notice is announced assertively while success/info notices announce politely.Other information: