Notices escape HTML tags

[jsmoriss]

Gutenberg escapes HTML when displaying notices:

function wpssoCreateNotices() {

        var ajaxNoticesData = {
                action: 'wpsso_get_notices_json',
                _ajax_nonce: sucomGutenbergL10n._ajax_nonce,
        }

        jQuery.getJSON( ajaxurl, ajaxNoticesData, function( data ) {

                jQuery.each( data, function( noticeType ) {

                        jQuery.each( data[noticeType], function( noticeNum ) {

                                var noticeMsgHtml = data[noticeType][noticeNum];

                                if ( noticeType == 'upd' ) {
                                        createSuccessNotice( noticeMsgHtml );
                                } else if ( noticeType == 'inf' ) {
                                        createInfoNotice( noticeMsgHtml );
                                } else if ( noticeType == 'err' ) {
                                        createErrorNotice( noticeMsgHtml );
                                } else if ( noticeType == 'warn' ) {
                                        createWarningNotice( noticeMsgHtml );
                                }
                        } );
                } );
        } );
}

[aduth]

This is expected behavior. The notices actions accept a WordPress element or plain-text string. If you must provide unescaped HTML, you can use the wp.element.RawHTML element:

createSuccessNotice( createElement( RawHTML, null, '<script>alert( "My unsafe HTML" );</script>' ) );

[jsmoriss]

@aduth Awesome, but this seems to trigger an error:

TypeError: e.replace is not a function[Learn More]
index.js:12:37980
s
http://adm.surniaulula.com/wp-content/plugins/gutenberg/editor/build/index.js:12:37980
a
http://adm.surniaulula.com/wp-content/plugins/gutenberg/editor/build/index.js:12:38259
CREATE_NOTICE
http://adm.surniaulula.com/wp-content/plugins/gutenberg/editor/build/index.js:17:50131
this.wp.editor</e.exports</</</</<
http://adm.surniaulula.com/wp-content/plugins/gutenberg/editor/build/index.js:12:48332
ct/tt[t]</<
http://adm.surniaulula.com/wp-content/plugins/gutenberg/data/build/index.js:1:47522
wpssoCreateNotices/</</<
http://adm.surniaulula.com/wp-content/plugins/wpsso/js/gutenberg-admin.js:74:6
each
http://adm.surniaulula.com/wp-admin/load-scripts.php:2:2879
wpssoCreateNotices/</<
http://adm.surniaulula.com/wp-content/plugins/wpsso/js/gutenberg-admin.js:63:4
each
http://adm.surniaulula.com/wp-admin/load-scripts.php:2:2929
wpssoCreateNotices/<
http://adm.surniaulula.com/wp-content/plugins/wpsso/js/gutenberg-admin.js:61:3
i
http://adm.surniaulula.com/wp-admin/load-scripts.php:2:27444
fireWith
http://adm.surniaulula.com/wp-admin/load-scripts.php:2:28213
y
http://adm.surniaulula.com/wp-admin/load-scripts.php:4:22719
c
http://adm.surniaulula.com/wp-admin/load-scripts.php:4:26925

The first notice is displayed correctly, as HTML, then there are no more notices displayed (because of that error, I assume).

FYI - some relevant code:

var createElement = wp.element.createElement;
var RawHTML = wp.element.RawHTML;
var noticeElement = createElement( RawHTML, null, data[noticeType][noticeNum] );

createWarningNotice( noticeElement );

[aduth]

The error should be more graceful, but this is an issue of wp.a11y.speak being passed the element and not being able to interpret it.

A simple workaround is to pass an object as the second argument, with a spokenMessage string property that is used for announcing the notice to screen readers.

[adamsilverstein]

Are the notices actions documented anywhere or is there an existing issue to add that?

[aduth]

Are the notices actions documented anywhere or is there an existing issue to add that?

No, though to notices specifically, I don't know that it's ultimately desirable for the notices state to live in the editor module, since it's a generally useful feature. Instead, I'd see notices being independent, and editor merely renders its exposed data-bound component. I created an issue at #6388 .

Documentation of actions and selectors in general is still an open task. I created an issue at #6389.