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.