wordpress - 如何在每个 Gutenberg 块中添加更高级的字段？

Question

有什么方法可以扩展每个 Gutenberg 块中的高级字段部分？我想在每个块中添加更多字段。请帮忙。

Answer 1

新答案：试试这个。我这样做是为了向我的块添加内联样式。我使用 isAdmin 来定义是否为管理员，以防止作者或其他用户在任何地方添加内联样式。在你的 index.js

/**
 * Inline Style component
 *
 * Shows a field for inline style only visible for admins
 * and adds a style attribute to the save content of the block
 */

import './attributes.js';
import './inspector.js';

检查器.js

const { __ } = wp.i18n;
const { select } = wp.data;
const { createHigherOrderComponent } = wp.compose;
const { InspectorAdvancedControls } = wp.blockEditor;
const { TextareaControl } = wp.components;

const withInspectorControls = createHigherOrderComponent((BlockEdit) => {
    return (props) => {

        const { inlineStyle } = props.attributes;
        const isAdmin = select( 'core' ).canUser( 'create', 'users' );

        return (
            <>
                <BlockEdit {...props} />
                { isAdmin ?
                    <InspectorAdvancedControls key="inspector">
                        <TextareaControl
                            label={__('Inline styling', 'custom-blocks')}
                            help={ __('Notice: This inline style will override any other inline style generated by Gutenberg.', 'custom-blocks') }
                            value={inlineStyle}
                            onChange={inlineStyle => props.setAttributes({ inlineStyle })}
                        />
                    </InspectorAdvancedControls>
                : '' }
            </>
        );
    };
}, 'withInspectorControl');

wp.hooks.addFilter('editor.BlockEdit', 'custom-blocks/inline-style/inspector', withInspectorControls);

属性.js：

wp.hooks.addFilter('blocks.registerBlockType', 'custom-blocks/inline-style/attributes', function (settings, name) {
    settings = window.lodash.assign({}, settings, {
        attributes: window.lodash.assign({}, settings.attributes, {
            inlineStyle: {
                type: 'string',
                default: "",
            }
        })
    });
    return settings;
});

wp.hooks.addFilter('blocks.getSaveContent.extraProps','custom-blocks/inline-style/inspector',function(props, name, atts){

    if(atts['inlineStyle']!="")
        return lodash.assign(props, { style: atts['inlineStyle'] });

    return props;
});

旧答案：据我所知，您只能将输入字段添加到高级字段部分的块中。但是，您可以将自定义部分添加到检查器控件。基本上有两种类型的块：核心块和自定义块。

对于自定义块非常简单，看看如何使用面板

对于核心块，您需要使用过滤器：

1. blocks.registerBlockType：这里你需要给你想要改变的块添加属性
2. blocks.getSaveContent.extraProps：这里你必须保存属性
3. editor.BlockEdit: 在这里您可以使用Panel编辑块的检查器控件。