• Skip to primary navigation
  • Skip to main content
Sal Ferrarello
  • About Sal Ferrarello
  • Speaking
  • Connect
    Mastodon GitHub Twitter (inactive)
You are here: Home / Programming / WordPress Gutenberg Notice in JavaScript

WordPress Gutenberg Notice in JavaScript

Last updated on February 20, 2022 by Sal Ferrarello

You can display four types of notices in the WordPress Block Editor (a.k.a. Gutenberg) using JavaScript: error, warning, info, and success. Here is an example of each.

WordPress Gutenberg Error

wp.data.dispatch('core/notices').createErrorNotice(
    'There was an error', 
    {id: 'my-error'}
);

WordPress Gutenberg Warning

wp.data.dispatch('core/notices').createWarningNotice(
    'You are warned',
    {id: 'my-warn'}
);

WordPress Gutenberg Info

wp.data.dispatch('core/notices').createInfoNotice(
    'You are informed',
    {id: 'my-info'}
);

WordPress Gutenberg Success

wp.data.dispatch('core/notices').createSuccessNotice(
    'Success',
    {id: 'my-success'}
);

Why Include an id ?

You’ll notice in each example we include an id as part of the object passed as the second parameter. When a notice is created WordPress checks if a notice already exists with that id, if a notice does already exist, the new notice replaces the old notice.

This is useful when your code that creates the notice is called multiple times. Without the id we’d get multiple copies of our notice when typically we just want one.

This code will display three notices.

wp.data.dispatch('core/notices').createWarningNotice(
    'Be careful1!'
);
wp.data.dispatch('core/notices').createWarningNotice(
    'Be careful2!'
);
wp.data.dispatch('core/notices').createWarningNotice(
    'Be careful3!'
);

This code will display one notice.

Each notice in the following code will replace the one that came before it. Only one notice will ever be displayed.

wp.data.dispatch('core/notices').createWarningNotice(
    'More be careful1!', 
    {id: 'salcode-warn'}
);
wp.data.dispatch('core/notices').createWarningNotice(
    'More be careful2!',
    {id: 'salcode-warn'}
);
wp.data.dispatch('core/notices').createWarningNotice(
    'More be careful3!',
    {id: 'salcode-warn'}
);

More Information about Creating Notices

See WordPress Block Editor Core Notices

Sal Ferrarello
Sal Ferrarello (@salcode)
Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.

Share this post:

Share on TwitterShare on FacebookShare on LinkedInShare on EmailShare on Reddit

Filed Under: Dev Tips, Programming Tagged With: Gutenberg, JavaScript, WordPress

Reader Interactions

Leave a Reply Cancel reply

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

Copyright © 2023 · Bootstrap4 Genesis on Genesis Framework · WordPress · Log in