Brian Coords 12:45 pm on July 21, 2022
Tags: feature-notifications ( 49 )

[Request for feedback] Feature Notifications Proof of Concept

The goal of the WP Feature Notifications project is to create a new and better way to manage and deliver notifications to the relevant audience. The admin_notices hook has served WordPress well and will continue to do so for the foreseeable future. This project is focused on building a new framework for notifications from the ground up, and potentially providing a tool that encourages consistency in presentation, follows best practices in standards and accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility), and discourages spammy or disruptive interactions in the WordPress adminadmin (and super admin) screens.

The end result will be a RESTful model and APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. to be utilized by coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. but would also enable third-party developers to further extend the functionality. Possibilities could range from pulling in updates from relevant SaaS integrations and hosting platforms, to enabling mobile push or SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. notifications outward from your WordPress website.

After approximately three years of discussion, scaffolding, and design, the WordPress Notifications feature project is ready to begin collecting feedback on a static demo of the previously reviewed designs. We’re inviting users to install the feature pluginFeature Plugin A plugin that was created with the intention of eventually being proposed for inclusion in WordPress Core. See Features as Plugins. on a test environment, view the static mockups, and provide feedback to the team.

How To Install

The pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party zip file can be downloaded from the Releases page of the Github repository, and installed like any other WordPress plugin.

Alternatively, it can be installed via Composer:

First add the repository to your composer.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML.

{
    "type": "vcs",
    "url": "https://github.com/WordPress/wp-feature-notifications"
}

Then install the develop branchbranch A directory in Subversion. WordPress uses branches to store the latest development code for each major release (3.9, 4.0, etc.). Branches are then updated with code for any minor releases of that branch. Sometimes, a major version of WordPress and its minor versions are collectively referred to as a "branch", such as "the 4.0 branch". using the command composer require wordpress/wp-feature-notifications:dev-develop.

How To Test

Once installed and activated, the plugin will display three demo user interface elements for review:

On-page notifications – Similar to the current admin_notices hook, on-page notifications appear at the top of the Dashboard screen.
The Hub – A new “bell” notifications icon on the right-hand side of the admin bar will open the “hub”, a drawer of notifications.
Notification Settings – Users can visit Settings > Notifications or click the link at the bottom of the Hub to see a preliminary draft of a settings table for managing notifications.

It is important to note that this is a static, front-end demo, and the team is mainly looking for overall feedback about the initial direction of these components. For more context on the project, we recommend reviewing the Project Requirements and reviewing the initial Project designs.

Looking Ahead

We look forward to collecting your feedback in the comments below or in our Github issues. If you would like to contribute to the project, we invite you to join the #feature-notifications channel in the Making WordPress Slack for our weekly office hours every Wednesday at 14:00 UTC and are happy to welcome new contributors to the project.

Props @psykro for editing and proofreading and @codekraft and @sephsekla for providing content.

#feature-notifications

Anonymous User 8:03 pm on July 21, 2022

Not sure if the following justifies one or more issues on GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/, so I’ll just comment here.

Generally going in a good direction for me, great work!

Not sure what the idea is when multiple messages appear on-page? Currently they take up the full height of my viewport (15″ MacBook), which can’t be the end goal I suppose? Even with customised notifications settings I would expect scenarios where multiple messages could appear on-page, and I’d very much would like them not to.

The ‘hub’ looks slick and feels like what I’d expect in a modern web app. Scroll behaviour needs a little love, when I’m scrolling down the hub, it first scroll down the rest of the page. Also closing the hub on a small screen currently takes some figuring out. I had to fiddle for a moment to notice it closes when I click outside the hub. A close button would make this more intuitive for me.

Side note: all action buttons in on-page notifications currently take me to GitHub. To avoid unnecessary confusion for testers I suggest changing those to a target within the WordPress adminadmin (and super admin).
- Jonathan Bossenger 1:59 pm on July 22, 2022
  
  Not sure what the idea is when multiple messages appear on-page? Currently they take up the full height of my viewport (15″ MacBook), which can’t be the end goal I suppose? Even with customised notifications settings I would expect scenarios where multiple messages could appear on-page, and I’d very much would like them not to.
  
  It’s worth noting that this demo merely shows all four variants of the “on page” notification for review. In the final implementation, this would only be one on page message.
  
  Definition of an on page notification (from the requirements doc) : a local notification, shown only on a specific page, and contextual to the page content (aka what admin_notices is and should be used for) e.g. “The post has been saved” or “You have updated your PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party X Settings”.
- Jonathan Bossenger 2:00 pm on July 22, 2022
  
  Also, hello @glueckpress 😊
  - Anonymous User 11:12 am on July 23, 2022
    
    Makes sense, thanks and hi, Jonathan! 🙂
gazchap 6:35 am on July 22, 2022

The design blueprints look well thought out, but I have a couple of comments. Note that I haven’t tried the pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party yet.

First, will the different “severityseverity The seriousness of the ticket in the eyes of the reporter. Generally, severity is a judgment of how bad a bug is, while priority is its relationship to other bugs.” of notices still be represented by different colours (red, green, yellow) ? The example with 3 notices on-page has a red bar all down the left.

Also, any plan to allow users to turn off types of notifications in the settings? For example, any marketing notice would be defined as such by the developer and the user could then choose to automatically disable all marketing notices?
- Erik 8:26 pm on July 22, 2022
  
  hi @gazchap,
  First, will the different “severityseverity The seriousness of the ticket in the eyes of the reporter. Generally, severity is a judgment of how bad a bug is, while priority is its relationship to other bugs.” of notices still be represented by different colours (red, green, yellow) ? The example with 3 notices on-page has a red bar all down the left.
  
  Currently dashboard notifications do not show the notification severity and the red dot indicates that they are “unread”. Was discussed here but is still being defined… if you want to join we have a dedicated section on github with an open discussion on the topic.
  
  As far as being able to turn off notifications, yes, a very granular control has been planned
Systasis Computer Systems 1:34 pm on July 22, 2022

As someone who manages more than one, but less than 10 sites, and has one pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party available: I applaud this initiative.
With the plugin installed, I see notification and 3 variants.
—-
Not sure what the hash tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.) in the message source means.
—–
I’ve never been sure what a “just now” timestamp means on pages that don’t use some kind of host/server comm link. Please use absolute time. Anything else is too squishy for adminadmin (and super admin) messages. OTOH, relative timestamps in the notification panel are required.
—–
+5 adopting the bell metaphor. In 5 years, it’ll be something else across mgt. platforms, but it’s nice to see an industry-wide metaphor.
+1 on title, message, action button
—–
+1 on “dismiss”. I think it’s necessary to supply an alternate action to the button, and as a bridge from current behavior. I think it’s required. Does variant #1 expose a timer?
Is there a template for notifications? You know there will be different user requirements for image/text/button alignment.
—–
+1 on #3. I’d like to see either an image or the ringing bell. Maybe a filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output.?
—–
I think the notification settings panel is as good as it’s gonna get.
—–
I’m assuming plugins will be able to register notification sources. Will that be a way to pass out-of-band messages to site admins? I’d like to control the proliferation of “give me some love. now.” messages.
Brian Coords 1:51 pm on July 25, 2022

Not sure what the hash tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.) in the message source means.

The hashtag would only show up if it was provided by the developer who is triggering the notice. They’re actually not in the original designs.

I’m assuming plugins will be able to register notification sources. Will that be a way to pass out-of-band messages to site admins? I’d like to control the proliferation of “give me some love. now.” messages.

The goal of the project is to set up a framework and settings page and then allow plugins/themes to basically ‘opt-in’ and provide as much customization as they think appropriate. Personally I love it when an app let’s you keep ‘important’ messages on but disable ‘marketing’ messages, but at this point, it would be up to the developer to set that up.
Ross Wintle 1:28 pm on July 26, 2022

So good to see progress on this. I will comment on the visual framework, but to be honest people could debate the visuals for weeks and never get anywhere, so while I give feedback as someone who’s not really seen this before, I encourage you to make decisions and move forward!

1. I think the new on-page notifications are too big – this is actually quite problematic on mobile. I like the more modern style (though look out for the possible admin resdesign coming down the line too) but I’d prefer something more like the existing size.

We probably can’t avoid animated images being used, but I really don’t like the animated image being used.

2. Assuming the coloured dots are for severityseverity The seriousness of the ticket in the eyes of the reporter. Generally, severity is a judgment of how bad a bug is, while priority is its relationship to other bugs.? This seems too small to me. Can’t the bars on the left be used for severity colours?

3. I love the Hub, but it needs a close affordance/button. I would also love for:
a) Notification settings for a given source to be available in the hub. e.g. click a button on the notification in the hub and get the chance to disable/enable notifications, without needing to visit the separate settings page. This would enable me to say “I don’t want these notices” but while keeping me in the flow of viewing my notices. Like how the iOSiOS The operating system used on iPhones and iPads. notification center works (see this, this and this)

4. As a future thought, I’d love the unread notifications to appear as pop-up “toasts” before making it into the hub. (Personally, I think the on-page notifications should work like this too, but I suspect I’m too late to contribute that idea, and what we have is fine.)

4b. You could probably easily use JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. to optionally and progressively enhance the unread notifications section in this way.

Hope that helps. I’ll try to keep an eye on the project.
- Brian Coords 6:16 pm on July 26, 2022
  
  I think the new on-page notifications are too big
  
  Agreed. In terms of the image, what maybe we could replace with a smaller inline icon (similar to the hub). This has come up in other comments so I’m opening a discussion on Github.
  
  Assuming the coloured dots are for severityseverity The seriousness of the ticket in the eyes of the reporter. Generally, severity is a judgment of how bad a bug is, while priority is its relationship to other bugs.?
  
  The red dot is meant to mean ‘new/unread’. I believe the left-hand bar is always gray. There is no severity in the current db schema, but this could be open to discussion.
  
  Notification settings for a given source to be available in the hub. e.g. click a button on the notification in the hub and get the chance to disable/enable notifications, without needing to visit the separate settings page
  
  I really like this idea and created a ticket in github.
  
  4. As a future thought, I’d love the unread notifications to appear as pop-up “toasts” before making it into the hub.
  
  All of the notifications (at this point at least) would already exist at page load, but I think any ideas that bring us closer to the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor UIUI User interface are a good step.
Ross Wintle 1:35 pm on July 26, 2022

If it helps, I made an Insta WP template to quickly launch WordPress with the pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party installed.

Sharing this with people might help people try it out and get you more feedback: https://app.instawp.io/launch?t=feature-notifications-010
- Brian Coords 5:42 pm on July 26, 2022
  
  This is amazing. I wonder if this tool can be included in future feedback requests (I know the training team has been using it).
Simon Blackbourn 3:30 pm on July 26, 2022

I really like the hub (like others have said, a close button is needed), but I really don’t like the amount of vertical space the on-page notifications take up, or that images are incorporated.

One of the main aims of this project is to reduce unnecessary visual clutter and the amount of vertical space taken up by notifications. Introducing images to notifications (especially animated ones 😫) is a huge increase in visual clutter. And with this design, just one notification takes up the same vertical space as two or three current adminadmin (and super admin) notices.

I would prefer something like the text on the left, with the CTA button, close link, and date/source all on the right, and no image. This would reduce the height by about 50%.
- Joe Bailey-Roberts 3:39 pm on July 26, 2022
  
  The size concern is a very valid point, thanks for the feedback!
  
  One thing I will say is that the on-page notifications should be both infrequent and important – anything else should be delegated to the hub only. The demo shows a lot at once just to show off the different options, but in practice this would ideally very rarely have more than one visible.
- Brian Coords 5:57 pm on July 26, 2022
  
  All valid points. I have to imagine that pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party developers would really want an image or some “constrained” branding (and would hack their way into making it happen). Then again, if the on-page notifications are only for state changes and not marketing, maybe we don’t need it? Maybe we should instead have the smaller icon next to the title (similar to the hub)?
  
  I also wonder if showing so many variants in the mockup was more distracting than helpful.
Pablo Postigo 4:32 pm on July 26, 2022

Glad to see this initiative finally getting traction. I still haven’t tested the pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party, but I’ve looked at the documentation and talked a bit with Jonathan Bossenger, and I realized that support to snooze notifications is not in the current roadmap.

I think it’d be great to have native support to snooze notifications. Without snoozing, it is virtually impossible to use the notification center with an inbox zero approach.
- Brian Coords 5:52 pm on July 26, 2022
  
  I think it’d be great to have native support to snooze notifications. Without snoozing, it is virtually impossible to use the notification center with an inbox zero approach.
  
  Interesting. Because these aren’t “push” notifications or messages, they aren’t set to be hidden and then ‘trigger’ at a certain time. At this point, ALL notifications are visible, and they’re either read/unread. Where would a ‘snoozed’ message live? I wonder if a mark read/mark unread would be more apt.
  
  Otherwise that may be a concept to come back into in a v2 or via an enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party.
Fabian Todt 8:00 am on August 9, 2022

I’m glad to see an update for this project. 👍
Most of the feedback I have was already mentioned (on-page notifications too big, no severityseverity The seriousness of the ticket in the eyes of the reporter. Generally, severity is a judgment of how bad a bug is, while priority is its relationship to other bugs.-level, close-button for hub, exact time instead of “just now”).

I don’t know if it’s on purpose, but for me the big on-page notifications don’t load at the same time, but staggered/delayed, which results in multiple layout-shifts until all of those are loaded.

Design wise: There’s a notice react component which looks like the current adminadmin (and super admin)-notice styles but also allows for actions (but not buttons).