Skip to content

Improve snackbar success notice UI with green accent and larger size. #70487

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: trunk
Choose a base branch
from

Conversation

Ta5r
Copy link

@Ta5r Ta5r commented Jun 20, 2025

What?

Part of #34306

  • Improves the visual prominence of success notifications in the editor by:
  • Increasing the snackbar size and padding
  • Adding a green accent border for success messages

Why?

  • Helps users more easily recognize successful post actions (like publishing or updating), enhancing clarity and feedback

How?

  • Overrides .components-snackbar styles and adds .is-success border and padding rules, aligned with WordPress design tokens.

Testing Instructions

  1. Open the block editor in WordPress.
  2. Create a new post or page and enter some content.
  3. Click Publish or Update.
  4. Snackbar should appear with increased size and padding.
  5. A green left border should appear, indicating success.
  6. Snackbar should include clear text like “Post published.”
  7. If a post link is included in the snackbar, a "View" button should appear.

Testing Instructions for Keyboard

  1. Press Tab repeatedly to navigate through the block editor.
  2. After publishing a post, continue tabbing:
  3. Snackbar should receive focus if it's the next interactive item.

Screenshots or screencast

Before After
Screenshot 2025-06-20 at 6 37 04 PM Screenshot 2025-06-20 at 6 45 06 PM

…d larger size

- Enlarges the snackbar for better visibility
- Adds a green left border to indicate successful publish
- Ensures visual consistency and accessibility for success notifications
@github-actions github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Jun 20, 2025
Copy link

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @Ta5r! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

@Ta5r Ta5r marked this pull request as ready for review June 20, 2025 13:34
@Ta5r Ta5r requested a review from ajitbohra as a code owner June 20, 2025 13:34
Copy link

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Ta5r <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@t-hamano t-hamano added [Type] Enhancement A suggestion for improvement. [Package] Components /packages/components Needs Design Feedback Needs general design feedback. labels Jun 21, 2025
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR!

Rather than simply submitting the approach proposed in the issue as a PR, let's first understand the issue and carefully discuss what is missing and what should be done. For example, the following points:

  • It has been four years since the issue was submitted. Is this issue still valid?
  • Do we need variations other than green, such as yellow, red, etc.?
  • Ideally, wouldn't we need a status prop like the Notice component?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository Needs Design Feedback Needs general design feedback. [Package] Components /packages/components [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants