1

I want some custom html-block like

<table>
  <tr>
    <td>1</td>
  </tr>
</table>

to be rendered in my block, that I register using registerBlockType. Therefore I try to add the html using dangerouslySetInnerHTML, but if I do so, I end up with being unable to select my block in gutenberg, so there possibly is an issue with my code.

( function( blocks, editor, element ) {
    var el = element.createElement;

    blocks.registerBlockType( 'mcb/call-to-action', {
        title: 'My List', // The title of block in editor.
        icon: 'editor-table', // The icon of block in editor.
        category: 'common', // The category of block in editor.
        attributes: {
            content: {
                type: 'string',
                default: 'Collaboratively customize web-enabled supply chains and turnkey collaboration and idea-sharing Assertively cultivate.'
            },
            button: {
                type: 'string',
                default: 'Join Today'
            }
        },      
        edit: function(props) {
            return "Text"; //this works
            //this will make my block disappear from gutenberg:
            //return <div dangerouslySetInnerHTML={{__html: '<strong>strong text</strong>'}} />;
        },          
        save: function( props ) {
            return (
                el( 'div', { className: props.className },
                    el( editor.RichText.Content, {
                        tagName: 'p',
                        className: 'mcb-call-to-action-content',
                        value: props.attributes.content,
                    } ),
                    el( 'button', { className: 'mcb-call-to-action-button' },
                        props.attributes.button
                    )
                )
            );
        },
    } );
} )( window.wp.blocks, window.wp.editor, window.wp.element );

This is the exact part:

edit: function(props) {
    return <div dangerouslySetInnerHTML={{__html: '<strong>strong text</strong>'}} />;
},  
4
  • Is there any reason you can't just return <div><strong>{ yourTextHere }</strong></div>?
    – WebElaine
    Sep 6, 2022 at 15:11
  • @WebElaine It will be displayed as text.
    – UNeverNo
    Sep 6, 2022 at 15:27
  • @UNeverNo You need to return the <div> and <strong> elements with the el() function. Same as the save method. Sep 7, 2022 at 5:51
  • @Jacob Peattie I can't. It's a complex html-block, that I retrieve from database.
    – UNeverNo
    Sep 7, 2022 at 6:59

2 Answers 2

2

Wordpress offers their own implementation called RawHTML. This works:

const htmlToElem = ( html ) => wp.element.RawHTML( { children: html } );
    ...
    edit: function(props) {             
        return htmlToElem("<strong>strong text</strong>");
    },
    ...
0

This way you can do it without a separate build step:

edit: function(props) {
    return element.createElement(element.RawHTML, null, '<strong>strong text</strong>');
},  

However if you do a build step using @wordpress/scripts npm.js package, the equivalent source is:

import { RawHTML } from '@wordpress/element';

//...

edit: function(props) {
  return (
    <RawHTML>
      { '<strong>strong text</strong>' }
    </RawHTML>
  );
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.