我是古腾堡积木的初学者。我想为按钮创建自定义块。它应该有一个按钮文本的输入字段,用户应该能够在两种按钮样式和InspectorControl区域中的目标URL之间进行选择。但不知何故,我的代码不起作用。当我在输入字段内且无法访问InspectorControl时,编辑器将刷新。这是我的代码:
const InspectorControls = wp.editor.InspectorControls;
const PanelBody = wp.components.PanelBody;
const PanelRow = wp.components.PanelRow;
const RadioControl = wp.components.RadioControl;
const TextControl = wp.components.TextControl;
wp.blocks.registerBlockType(\'test-blocks/primary-button\', {
title: \'Primary Button\',
icon: \'button\',
category: \'test\',
attributes: {
buttonText: {
type: \'string\'
},
buttonLink: {
type: \'string\'
},
buttonStyle: {
type: \'string\',
default: "btn btn-primary"
}
},
edit: function (props) {
"use strict";
function updateText(event) {
props.setAttributes({
buttonText: event.target.value
});
}
function updateLink(event) {
props.setAttributes({
buttonLink: event.target.value
});
}
function updateStyle(event) {
props.setAttributes({
buttonStyle: event.target.value
});
}
return wp.element.createElement(
"div",
null,
wp.element.createElement(
"a", {
type: "button",
href: "",
class: props.attributes.buttonStyle
},
wp.element.createElement("input", {
type: "text",
value: props.attributes.buttonText,
onChange: updateText
})
),
wp.element.createElement(
InspectorControls,
null,
wp.element.createElement(
PanelBody, {
title: "Button Settings",
initialOpen: true
},
wp.element.createElement(
PanelRow,
null,
wp.element.createElement(RadioControl, {
label: "Button Style",
value: props.attributes.buttonStyle,
options: [{
label: "Primary",
value: "btn btn-primary"
},
{
label: "Secondary",
value: "btn btn-secondary"
}
],
onChange: updateStyle
})
),
wp.element.createElement(
PanelRow,
null,
wp.element.createElement(TextControl, {
label: "Target URL",
value: props.attributes.buttonLink,
onChange: updateLink
})
)
)
)
);
},
save: function (props) {
"use strict";
return wp.element.createElement("a", {
type: "button",
href: props.attributes.buttonLink,
class: props.attributes.buttonStyle
}, props.attributes.buttonText);
}
});