My requirement: 我正在尝试创建一个简单的古腾堡积木,它将具有textarea
和adropdown
. 一旦用户提供了详细信息,我想将其另存为shortcode 在DB中,但当用户来编辑块时,它应该在中显示内容textarea
和中的选定项目dropdown
.
The issue 我得到的是,在创建时,一切都按预期进行,但当我开始编辑屏幕时,内容变得一团糟。此外,不会显示现有块的下拉列表。
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>
);
}
})
首次创建时
提前感谢您!