plugin development - Gutenberg Block showing invalid content on edit

admin管理员组

文章数量:1291044

My requirement: I am trying to create a simple gutenberg block which will have a textarea and a dropdown. Once a user has provided the details I want to save it as a shortcode in DB, but when the user come to edit the block it should show the content in textarea and selected item in dropdown.

The issue that I am getting, on create everything is working as expected, but when I come to edit screen the content is getting messed up. Also the dropdown is not showing for existing block.

Here is the code that I have written with the help of this & this article.

const {__} = wp.i18n;
const {RawHTML} = wp.element;
const {registerBlockType} = wp.blocks;
const {PanelBody, SelectControl, TextareaControl} = wpponents;
const {InspectorControls} = wp.editor;

const blockStyle = {
    backgroundColor: '#900',
    color: '#fff',
    padding: '20px',
};
const countries = [
    {label: __('Select a countries', 'txtdomain'), value: ''},
    {label: 'India', value: 'IND'},
    {label: 'United States of America', value: 'USA'},
    {label: 'Sri Lanka', value: 'LKA'}
];

registerBlockType('myplugin/example-01-block', {
    title: 'My Plugin',
    icon: 'editor-code',
    category: 'common',
    attributes: {
        content: {
            type: "string",
            source: "text",
            default: '// Place your text here!',
        },
        country: {
            type: "string",
            default: ""
        },
    },
    example: {},

    edit: (props) => {
        const {
            attributes: {content},
            setAttributes,
            className,
            country
        } = props;

        return (
                <div className={ className }>
                    <InspectorControls>
                        <PanelBody
                            title={ __('My Plugin Settings', 'txtdomain') }
                            >
                            <SelectControl
                                label={ __('Country', 'txtdomain') }
                                value={ country }
                                options={ countries }
                                onChange={ value => setAttributes({country: value}) }
                                />
                        </PanelBody>
                    </InspectorControls>
                
                    <TextareaControl
                        value={ content }
                        onChange={ value => setAttributes({content: value}) }
                        /> 
                </div>
                );
    },
    save: (props) => {
        const {
            attributes: {content, country}
        } = props;
        var myShortcode = '[myshortcode country="' + country + '", text="' + content + '"]';
        return (
                <div>
                    <RawHTML>{ myShortcode }</RawHTML>
                </div>
                );
    }
})

On Create for first time

When editing the created block in next time.

Thank you in advance!

My requirement: I am trying to create a simple gutenberg block which will have a textarea and a dropdown. Once a user has provided the details I want to save it as a shortcode in DB, but when the user come to edit the block it should show the content in textarea and selected item in dropdown.

The issue that I am getting, on create everything is working as expected, but when I come to edit screen the content is getting messed up. Also the dropdown is not showing for existing block.

Here is the code that I have written with the help of this & this article.

const {__} = wp.i18n;
const {RawHTML} = wp.element;
const {registerBlockType} = wp.blocks;
const {PanelBody, SelectControl, TextareaControl} = wpponents;
const {InspectorControls} = wp.editor;

const blockStyle = {
    backgroundColor: '#900',
    color: '#fff',
    padding: '20px',
};
const countries = [
    {label: __('Select a countries', 'txtdomain'), value: ''},
    {label: 'India', value: 'IND'},
    {label: 'United States of America', value: 'USA'},
    {label: 'Sri Lanka', value: 'LKA'}
];

registerBlockType('myplugin/example-01-block', {
    title: 'My Plugin',
    icon: 'editor-code',
    category: 'common',
    attributes: {
        content: {
            type: "string",
            source: "text",
            default: '// Place your text here!',
        },
        country: {
            type: "string",
            default: ""
        },
    },
    example: {},

    edit: (props) => {
        const {
            attributes: {content},
            setAttributes,
            className,
            country
        } = props;

        return (
                <div className={ className }>
                    <InspectorControls>
                        <PanelBody
                            title={ __('My Plugin Settings', 'txtdomain') }
                            >
                            <SelectControl
                                label={ __('Country', 'txtdomain') }
                                value={ country }
                                options={ countries }
                                onChange={ value => setAttributes({country: value}) }
                                />
                        </PanelBody>
                    </InspectorControls>
                
                    <TextareaControl
                        value={ content }
                        onChange={ value => setAttributes({content: value}) }
                        /> 
                </div>
                );
    },
    save: (props) => {
        const {
            attributes: {content, country}
        } = props;
        var myShortcode = '[myshortcode country="' + country + '", text="' + content + '"]';
        return (
                <div>
                    <RawHTML>{ myShortcode }</RawHTML>
                </div>
                );
    }
})

On Create for first time

When editing the created block in next time.

Thank you in advance!

• plugin-development
• shortcode
• block-editor

Share Improve this question asked Jun 15, 2021 at 7:19 Raunak GuptaRaunak Gupta 25933 silver badges1414 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

The main issue in your code is the following part, whereby you set the attribute source to text which means (after the block/post is saved) the editor will read the value from the inner text of the div returned by your save function:

attributes: {
    content: {
        type: "string",
        source: "text", // this shouldn't be "text"
        default: '// Place your text here!',
    },

So if the save function returned an element with the HTML <div>[myshortcode country="IND", text="Hello World!"]</div>, then with the above attribute settings, the content value would be [myshortcode country="IND", text="Hello World!"] which explains why this happened:

So you should just omit the source property there, i.e. do not specify the attribute source, and just let the editor stores the attribute value in the block comment delimiter.

Other Issues in your code

1. wp.editor.InspectorControls is deprecated and use wp.blockEditor.InspectorControls instead. So use const { InspectorControls } = wp.blockEditor;.

2. In your edit function, country should be part of the attributes like so:

   const {
       attributes: {content, country}, // "country" belongs here
       setAttributes,
       className,
       country                         // NOT HERE, so remove this.
   } = props;
   

3. There's an unwanted , (comma) in your shortcode ([myshortcode country="' + country + '", text=...), so you should remove that comma.

本文标签： plugin developmentGutenberg Block showing invalid content on edit