Question

我为社交链接创建了自定义的Gutenberg块，但是我需要添加输入字段，用户可以在其中将URL粘贴到该社交资料。这是我要在其中放置字段的地方（例如，与段落块具有对齐设置一样）：

这是我的代码块：

const { registerBlockType } = window.wp.blocks;
const { __ } = window.wp.i18n;
const { BlockControls, AlignmentToolbar} = window.wp.editor;

registerBlockType('social-block/social', {
    title: __('Social'),
    icon: 'smiley',
    category: 'common',
    attributes: {
        content: {type: 'string'},
        color: {type: 'string'}
    },
    edit: function (props) {

        return React.createElement(
            "div",
            {style: {
                    display: 'flex',
                    justifyContent: 'center'
                }},

            // facebook
            React.createElement(
                'a',
                {
                    'href': '',
                    'rel': 'noopener noreferrer',
                    'target': '_blank'
                },
                React.createElement(
                    'svg',
                    {
                        'xmlns': "http://www.w3.org/2000/svg",
                        'xmlns:xlink': "http://www.w3.org/1999/xlink",
                        'viewBox': "0 0 24 24",
                        'fill': "currentColor",
                        'width': "48px",
                        'height':"48px"
                    },
                    React.createElement(
                        'path',
                        {
                            'fill-rule': "evenodd",
                            'd': "M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm3-11.762h-1.703V9.2c0-.39.278-.48.474-.48h1.202V7.005L13.318 7c-1.838 0-2.255 1.278-2.255 2.096v1.142H10v1.765h1.063V17h2.234v-4.997h1.508L15 10.238z"
                        }
                    )
                ),
            ),
}
});

我尝试实现https://developer.wordpress.org/block-editor/tutorials/block-tutorial/block-controls-toolbars-and-inspector/，但这不是我所需要的行为，有人建议去哪里看或做什么？

Answer 1

首先，我建议您使用ES6语法，因为它将使您的代码更加容易。对于ES6，只要您在WordPress文档中看到任何代码，就可以从摘要顶部选择ESNEXT标签，然后向您显示ES6代码。

现在回答。古腾堡（Gutenberg）为我们提供了两种控件BlockControl和InspectorControl，它们都为您提供了一种操作块的方法，但不同之处在于BlockControl是出现在块顶部的工具栏（其与您共享的链接相同），而InspectorControls则是您想要做的侧边栏设置选项。这是实际的documentation of Inspector Controls，这是古腾堡核心Image block的一个工作示例。

为自定义古腾堡块创建自定义设置

1 个答案: