HTML in createNotice with Gutenberg shows [object Object]

Question

I’m playing around with creating a custom notice in Gutenberg, and based on whether the data validates when the post is saved, the notice may include some HTML links.

I ended up only seeing the raw HTML output, so after some searching on Google I found this post on Github suggesting to use RawHTML.

So I put this code together which does create the red notice, but it doesn’t show the actual HTML only [object Object]. So I’m clearly doing something wrong here, but not sure what? Anyone who can point me in the right direction how to make the notices show the raw HTML?

wp.data.dispatch( 'core/notices' ).createNotice(
   'error',
   wp.element.createElement( wp.element.RawHTML, null, 'test' ),
   {
      id: 'wpslupdate', // prevent duplicates
      isDismissible: true
   }
);

user_5792519 · Answer

The notice component has an actions property which enables links to be rendered inside a notice, removing the need to use RawHTML.

options.actions [Array]: User actions to be presented with notice.

A notice can have one or more actions, each action has a label and must specify either a url or onClick function, eg:

wp.data.dispatch('core/notices').createNotice(
    'error', // type of notice
    'Something went wrong..', // message
    {
        id: 'wpslupdate', // prevent duplicates
        isDismissible: true,
        actions: [
            {
                label: 'Option A',
                url: '#link' // styled as plain link
            },
            {
                label: 'Option B',
                onClick: () => { alert('ok') } // styled as a button link
            }
        ]
    }
);

Result:

HTML in createNotice with Gutenberg shows [object Object]

1 Answers