在核心区块的基础上创建新的古腾堡区块

Question

我想创建一个自定义古腾堡块，但它应该是一个核心块，末尾有附加文本。 这只是示例，但假设我想要一个像核心/段落一样工作的新块，但它会在末尾呈现额外的“测试”字符串。

import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import {
    Panel,
    PanelBody,
    PanelRow
} from '@wordpress/components';
import {
    useBlockProps,
    InnerBlocks,
    InspectorControls
} from '@wordpress/block-editor';
import metadata from '../../config/extended-block.json';

registerBlockType( metadata, {
    edit: ( { attributes, setAttributes } ) => {
        const blockProps = useBlockProps( {
            className: "test_extended",
            style: {
              /* some styles based on attributes */
            }
        } );

        return <div { ...blockProps }>
            <InspectorControls key="settings" group="styles">
                <Panel>
                    <PanelBody title={ __( "atribute name", "test" ) } initialOpen={ false }>
                        <PanelRow>
                            <fieldset>
                                {/* Some controls for changing attributes, color pallete or something */}
                            </fieldset>
                        </PanelRow>        
                    </PanelBody>
                </Panel>
            </InspectorControls>
            <div className='test_extended'>
                <InnerBlocks /> 
            </div>
        </div>
    },

    save: ( {attributes} ) => {
        const blockProps = useBlockProps.save( {
            className: "test_extended",
            style: {
            /* some styles based on attributes */
            }
        } );
        return <div {...blockProps}>
            <div className='test_extended'>
                <InnerBlocks /> 
            </div>
        </div>
    }
} );

这是我用来构建和注册新古腾堡块的代码。 如果测试/扩展块就像核心/段落或核心/组但有一些附加选项，我该怎么办？

Answer 1

首先，npm 包

@wordpress/create-block

可以帮助你搭建一个注册区块的 WordPress 插件。

https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/

如果您想向块添加一些附加设置，请使用 InspectorControls。

在这里你可以找到一个简单的例子：

https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar/

我希望这就是您正在寻找的。