How to save a shortcode in a Gutenberg custom block?

What you are looking for is RawHTML to render on the front end.

To use a player shortcode in the post you can use the code below remember that the edit function needs to mirror the markup for the save function for Gutenberg to validate the block.

Include RawHTML:

const { RawHTML } = wp.element;

Save & Edit Functions:

edit: function( props ) {
    return (
        <div>
            <RawHTML></RawHTML>
        </div>
    );
},
save: function( props ) {
    var myShortcode="[custom-shortcode param_1="value_1" param_2="value_2" /]";
    return (
        <div>
            <RawHTML>{ myShortcode }</RawHTML>
        </div>
    );
},

Leave a Comment