plugin development - Create Element From Dynamic HTML String

admin管理员组

文章数量:1417406

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 years ago.

Improve this question

I'm working on a custom gutenberg block, and in the save method, I have dynamically changing HTML in the form of a string.

element.createElement(
    'div',
    null,
    contentString,
)

The above snippet just outputs the HTML as a string, converting all the symbols to HTML entities (<, >, etc.)

How can I go about writing the actual HTML?

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 years ago.

Improve this question

I'm working on a custom gutenberg block, and in the save method, I have dynamically changing HTML in the form of a string.

element.createElement(
    'div',
    null,
    contentString,
)

The above snippet just outputs the HTML as a string, converting all the symbols to HTML entities (<, >, etc.)

How can I go about writing the actual HTML?

• plugin-development
• block-editor

Share Improve this question asked Aug 6, 2019 at 11:47 SpedwardsSpedwards 7922 silver badges1111 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 8

You can use dangerouslysetinnerhtml, a special HTML attribute in React:

dangerouslySetInnerHTML is React’s replacement for using innerHTML in the browser DOM. In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack. So, you can set HTML directly from React, but you have to type out dangerouslySetInnerHTML and pass an object with a __html key, to remind yourself that it’s dangerous.

• ES5:

  wp.element.createElement( 'div', {
      dangerouslySetInnerHTML: {
          __html: '<b>HTML</b> here'
      }
  } );
  

• JSX+ESNext:

  const createMarkup = ( html ) => { return { __html: html } };
  
  const my_element = <div dangerouslySetInnerHTML={ createMarkup('<b>HTML</b> here') }></div>;
  

Or in Gutenberg, you can use wp.element.RawHTML() which basically does the same thing as the snippets above.

• ES5:

  wp.element.RawHTML( {
      children: '<b>HTML</b> here'
  } );
  

• JSX+ESNext:

  import { RawHTML } from '@wordpress/element';
  
  const my_html = 'some dynamic <b>HTML</b> here!';
  
  const my_element = <RawHTML>{ my_html }</RawHTML>;
  

I haven’t tested it, but you might want to try:

element.createElement(
    'div',
    null,
    {dangerouslySetInnerHTML: {__html: contentString}},
)

本文标签： plugin developmentCreate Element From Dynamic HTML String