How to save a shortcode in a Gutenberg custom block?

by

I am creating a Gutenberg block, and in the save function I am returning a shortcode. When I click on save the page, a message is displayed: “Failed to update”, but when I check the front end it has been saved. What error may be occurring?

save: props => {
    return '[custom-shortcode param_1="value_1" param_2="value_2" /]';
}

1 Answer
1

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