Notices in the Block Editor with multiple lines

Question

Notices in the Block Editor with multiple lines

Borje

2021年9月11日 08:54

The page https://developer.wordpress.org/block-editor/how-to-guides/notices/ has the following code for adding a notice to the block editor:

( function ( wp ) {
    wp.data.dispatch( 'core/notices' ).createNotice(
        'success', // Can be one of: success, info, warning, error.
        'Post published.', // Text string to display.
        {
            isDismissible: true, // Whether the user can dismiss the notice.
            // Any actions the user can perform.
            actions: [
                {
                    url: '#',
                    label: 'View post',
                },
            ],
        }
    );
} )( window.wp );

This works fine for me and I get my message to display just fine. But I want to display a message with multiple lines where I chose where the line breaks are.

I've tried Post br / published, Post \n published, Post \r\n published but nothing displays the words on separate lines.

can't find any options on https://developer.wordpress.org/block-editor/reference-guides/data/data-core-notices/ that would help me either.

Topic block-editor notices Wordpress

Category Web

Sally CJ · Accepted Answer · 2021年9月11日 08:54

The 3rd parameter for the function accepts a private option named __unstableHTML which if true, then enables HTML in the notice message/content:

createNotice(
    'success',
    'Post published.<br /> Line 2. Should work in WordPress 5.8.',
    {
        __unstableHTML: true, // true = allows HTML; default false
        isDismissible: true,
        actions: [ ... ],
    }
)

However, in the option's description (see wp-includes/js/dist/notices.js, lines 408-412):

/**
 * @typedef {Object} WPNotice Notice object.
 *
 * ...
 * @property {string}  content          Notice message.
 * ...
 * @property {string}  __unstableHTML   Notice message as raw HTML. Intended to
 *                                      serve primarily for compatibility of
 *                                      server-rendered notices, and SHOULD NOT
 *                                      be used for notices. It is subject to
 *                                      removal without notice.
 * ...
 *
 */

So use the option at your very own risks..

And I'm afraid, apart from using that option, there doesn't seem to be any other ways to make the new lines work in notice messages rendered via createNotice(). There's the white-space: pre-wrap trick in CSS, but unfortunately, from what I could tell, \n (and its Unicode version — \u000a) are stripped from the notice message. :(

Notices in the Block Editor with multiple lines

About