2

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

6

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>
    );
},
1
  • Life saver, thanks!
    – kilinkis
    Apr 22, 2020 at 10:55

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.