如何创建基于Core Block且带扩展功能的自定义Gutenberg块？

要实现保留核心块（如core/paragraph、core/group）原有功能，同时添加额外渲染内容和自定义配置的自定义块，你可以通过复用核心块基础配置+重写关键逻辑的方式实现，具体操作如下：

1. 调整块元数据（block.json） #

在你的extended-block.json中添加自定义控制属性，并复用核心块的基础配置项：

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "test/extended-core-block",
  "title": "扩展核心块",
  "category": "layout",
  "icon": "admin-customizer",
  "description": "基于核心块的扩展，支持自定义配置并在末尾添加test文本",
  "attributes": {
    // 自定义控制属性：开关控制test文本显示
    "showTestText": {
      "type": "boolean",
      "default": true
    },
    // 复用核心块的属性（以core/group为例）
    "align": {
      "type": "string"
    },
    "backgroundColor": {
      "type": "string"
    },
    "textColor": {
      "type": "string"
    }
  },
  "supports": {
    // 复用核心块的支持配置
    "align": true,
    "color": {
      "text": true,
      "background": true
    },
    "typography": true
  }
}

2. 修改块注册代码 #

通过getBlockType获取核心块的原生配置，复用其逻辑并扩展自定义功能：

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

// 选择要扩展的核心块（替换为core/paragraph即可扩展段落块）
const targetCoreBlock = getBlockType('core/group');

registerBlockType( metadata, {
    edit: ( { attributes, setAttributes } ) => {
        const { showTestText, testTextColor, ...coreAttrs } = attributes;
        const blockProps = useBlockProps({
            className: "test_extended",
            style: {
                backgroundColor: coreAttrs.backgroundColor,
                color: coreAttrs.textColor
            }
        });

        return (
            <div { ...blockProps }>
                {/* 自定义配置面板 */}
                <InspectorControls key="settings">
                    <Panel>
                        <PanelBody title={ __( "扩展设置", "test" ) } initialOpen={ true }>
                            <PanelRow>
                                <ToggleControl
                                    label={ __( "显示末尾test文本", "test" ) }
                                    checked={ showTestText }
                                    onChange={ (val) => setAttributes({ showTestText: val }) }
                                />
                            </PanelRow>
                            <PanelRow>
                                <label>{ __( "Test文本颜色", "test" ) }</label>
                                <ColorPicker
                                    color={ testTextColor || '#000000' }
                                    onChange={ (color) => setAttributes({ testTextColor: color }) }
                                />
                            </PanelRow>
                        </PanelBody>
                    </Panel>
                </InspectorControls>

                {/* 渲染核心块的原生编辑内容 */}
                <InnerBlocks
                    allowedBlocks={ targetCoreBlock.supports.innerBlocks ? undefined : [] }
                />

                {/* 编辑模式预览test文本 */}
                { showTestText && (
                    <span className="test-extended__suffix" style={{ color: testTextColor }}>
                        test
                    </span>
                ) }
            </div>
        );
    },

    save: ( { attributes } ) => {
        const { showTestText, testTextColor, ...coreAttrs } = attributes;
        const blockProps = useBlockProps.save({
            className: "test_extended",
            style: {
                backgroundColor: coreAttrs.backgroundColor,
                color: coreAttrs.textColor
            }
        });

        return (
            <div { ...blockProps }>
                {/* 保存核心块的原生内容 */}
                <InnerBlocks.Content />
                {/* 保存时添加自定义test文本 */}
                { showTestText && (
                    <span className="test-extended__suffix" style={{ color: testTextColor }}>
                        test
                    </span>
                ) }
            </div>
        );
    }
} );

针对core/paragraph扩展的适配修改 #

如果要扩展core/paragraph，只需替换编辑和保存逻辑中的核心块内容渲染部分：

// 扩展core/paragraph时的edit函数片段
<RichText
    tagName="p"
    value={ coreAttrs.content }
    onChange={ (newContent) => setAttributes({ content: newContent }) }
    placeholder={ __( '输入段落内容...', 'test' ) }
/>

// 扩展core/paragraph时的save函数片段
<RichText.Content
    tagName="p"
    value={ coreAttrs.content }
/>

关键要点 #

• 复用核心逻辑：通过getBlockType获取核心块的原生配置，避免重复编写对齐、颜色等基础功能代码
• 自定义属性扩展：在block.json中添加自定义属性，用于控制额外内容的显示样式和状态
• 编辑器体验一致性：保留核心块的原生编辑组件，仅在其基础上添加自定义配置和预览内容
• 前端渲染兼容：保存时先输出核心块的原生内容，再追加自定义内容，确保前端显示符合预期

内容的提问来源于stack exchange，提问作者Mateusz