In the previous tutorial, we have created a form to update user settings. The only problem we had here is that we did not know if the user settings were updated or not. Let’s learn how to use the Notices system from Gutenberg in our headless WordPress application.

This tutorial will follow the code from the past two tutorials:

  1. https://www.ibenic.com/headless-wordpress-logging-with-jwt/
  2. https://www.ibenic.com/headless-wordpress-updating-user-settings/

If you have not done them, be sure to go over them so you can understand where we continue from.

To be able to use and recreate the notices system from Gutenberg, we need to perform some new npm install calls. Be sure you are still in the main app folder (where package.json is) and perform this calls.

For Notices:

npm install @wordpress/notices

We will also create a new component to show notices. We will filter the notices using the lodash so make sure to have that installed as well.

npm install lodash

And in case you don’t have some HOC Gutenberg helper components from the compose package, make sure you have it by calling this:

npm install @wordpress/compose

Since the Notices store is using the @wordpress/data package, we need that also to access them in an easy manner, so let’s install that as well.

npm install @wordpress/data

Now, we’re ready to start.

Adding Notices Store

To add the notices store, open your main App.js file and add this:

We have imported the AppNotices (we will make that right now), and the notices store. Then, we are displaying the AppNotices component at the top of our App.

We the Notices store imported here, we have it registered and can access them from the store.

Displaying Notices

We will now create the component AppNotices that will be used to display the notices that are stored in our core/notices store.

Create the file AppNotices.js inside of src/components and add this:

Those are all the dependencies that we need for this component. Then, let’s create the base component.

This is filtering the notices by their type. We will receive those notices from the store. For rendering the notices, we are using the components NoticeList and SnackbarList.

We are then exporting our component wrapped with the compose. That’s a helper wrapper to access data from the store. In here, we are getting all the notices stored in the store core/notices. And to remove the notices, we are calling the method removeNotice that is a registered method in the notices store.

Notices Functions

To add new notices (to display them), we would need to call methods such as this:

dispatch( 'core/notices' ).createSuccessNotice( message, {
   id: id,
   type: noticeType,
 } ); 

That can be a cumbersome thing to do for every custom notice we have. So, let’s create helper functions. Create a folder src/functions and add the file notices.js. Now, add this:

We are importing the dispatch function from the package @wordpress/data so we can access the store. Then, we are using the function addNotice to add the appropriate notice. The only difference here will be the colors of the notices.

We have also created a method addSnackbar. This notice does not have a styling as it is always the same, so we are using another helper method.

Let’s now use that function to notify when the settings are updated.

Using Notices functions

Open the component Settings.js that we’ve created in the previous tutorial. And add this lines:

We are importing the addSnackbar function here and call it when the user has updated its settings.

The snackbar will not display correctly, so let’s update our App.scss.

Code

The code here is the full version up to this tutorial. It is without any node modules, so you’ll have to run npm install to get every dependency we need.

This part is available only to the members. If you want to become a member and support my work go to this link and subscribe: Become a Member

Conclusion

By using already made stores from Gutenberg, we can achieve the same functionality but with much less code to write or maintain.

Become a Sponsor

Posted by Igor Benic

Web Developer who mainly uses WordPress for projects. Working on various project through Codeable & Toptal. Author of several ebooks at https://leanpub.com/u/igorbenic.

4 Comments

  1. Great post, as always, Igor. Keep up the good work! By the way, while in “Headless WP waters”, did you hear about Frontity? I’m sure you would have something to contribute there … 😉

    Reply

    1. I heard about Frontity and I did try to build something with it. I have in plan to use for some tutorials when covering headless WP.

      First, I needed to understand how it works with their own state and storage of data so I can move on more complex parts 🙂

      Reply

  2. Great stuff!

    Was this article written before the Snackbar component was part of WP Core? https://developer.wordpress.org/block-editor/components/snackbar/

    Reply

    1. Not sure actually, but they might have moved it in a different package if the code does not work currently.

      This approach is not using the WP Core JavaScript since it’s a separate App.

      Reply

Leave a reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.