How can I allow HTML in Gutenberg UI elements help text?

I know this is not going to make you happy, but — unless you copy the relevant UI component and edit it (so that it would allow a HTML string), and then use it instead — you can’t stop the HTML from being escaped. And I’m pretty sure you know why would/should it be escaped.. 🙂

But if you just want a clickable link to be the “help” text, or for it to have some HTML, then you can pass a WPElement as the help value:

const el = wp.element.createElement;

el( ToggleControl, {
    label: 'Toggle',
    help: el( 'a', { href: 'https://example.com' }, 'This should work..' ),
    ...
} );

And if you really must pass a HTML string, then that’s possible using the dangerouslySetInnerHTML attribute/property. But as the name implies, it’s dangerous, so make sure your HTML is as secure as possible.

So here’s an example:

const el = wp.element.createElement;
const html = ( html ) => { return { __html: html } };

el( ToggleControl, {
    label: 'Toggle',

    // This outputs: <span><a href="#">Foo</a> Bar</span>
    help: el( 'span', {
        dangerouslySetInnerHTML: html( '<a href="#">Foo</a> Bar' )
    } ),

    ...
} );

Or in Gutenberg, you can use wp.element.RawHTML() (which puts the generated element in a div):

const el = wp.element.createElement;
const htmlToElem = ( html ) => wp.element.RawHTML( { children: html } );

el( ToggleControl, {
    label: 'Toggle',

    // This outputs: <div><a href="#">Foo</a> Bar</div>
    help: htmlToElem( '<a href="#">Foo</a> Bar' ),

    ...
} );

Either way, it would be up to you how to pass the HTML from PHP to the above your JS/GB script. But basically, you can use wp_localize_script() to define the HTML list for use in your script.

Related Posts: