My requirement: 我正在尝试创建一个简单的古腾堡积木，它将具有textarea 和adropdown. 一旦用户提供了详细信息，我想将其另存为shortcode 在DB中，但当用户来编辑块时，它应该在中显示内容textarea 和中的选定项目dropdown.

The issue 我得到的是，在创建时，一切都按预期进行，但当我开始编辑屏幕时，内容变得一团糟。此外，不会显示现有块的下拉列表。

下面是我在的帮助下编写的代码this &；this 文章

const {__} = wp.i18n;
const {RawHTML} = wp.element;
const {registerBlockType} = wp.blocks;
const {PanelBody, SelectControl, TextareaControl} = wp.components;
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>
                );
    }
})

下次编辑创建的块时。

提前感谢您！