Notices in the Block Editor with multiple lines

admin管理员组

文章数量:1287800

The page / 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 / that would help me either.

The page https://developer.wordpress/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/block-editor/reference-guides/data/data-core-notices/ that would help me either.

• block-editor
• notices

Share Improve this question asked Sep 9, 2021 at 12:30 BorjeBorje 12333 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

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