How to save a shortcode in a Gutenberg custom block?

admin管理员组

文章数量:1429066

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" /]';
}

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" /]';
}

• shortcode
• block-editor

Share Improve this question edited Mar 28, 2019 at 21:51 Eduilson Rodrigues da Silva asked Mar 28, 2019 at 21:22 Eduilson Rodrigues da SilvaEduilson Rodrigues da Silva 3366 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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>
    );
},

本文标签： How to save a shortcode in a Gutenberg custom block