自定义按钮块不起作用

时间:2021-09-03 作者:Discostu36

我是古腾堡积木的初学者。我想为按钮创建自定义块。它应该有一个按钮文本的输入字段,用户应该能够在两种按钮样式和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);
    }
});

1 个回复
SO网友:Phil

我建议看看现有的Button component works 了解古腾堡是如何做事的。具体来说,它使用<RichText/> component (而不是本地人<input>) 它允许您指定标记名,同时还支持用户输入。

一般来说,我建议不要使用<input> 尽可能使用元素。WordPress提供了ton of components 这可以大大简化您的工作。

对于块样式,您可能需要查看styles attribute 可以添加到块的定义中。它将自动创建用户切换样式所需的UI,并将CSS类输出到块以进行样式设置。它可能与您拥有的不完全匹配(例如。btn btn-primary), 但它将符合;“正确”;古腾堡的做事方式(例如。is-style-primary).

相关推荐

Sliders with buttons

我正在寻找一个滑块插件,它允许我在滑块中插入其他按钮,而不是下一个和上一个数字,我的意思是将用户重定向到不同页面的按钮,等等。。。我会很感激你的信息!当做