如何通过编程方式手动向Gutenberg编辑器插入区块？

阿华AIGC实验室

2026-5-26

解决Gutenberg插入自定义段落区块的问题

我完全懂你的感受——Gutenberg的API刚上手确实有点晦涩，光创建区块对象只是第一步，关键是要把它注入到编辑器的内容状态里才行。下面给你一步步讲清楚怎么实现点击按钮插入自定义段落的功能：

核心思路

Gutenberg的内容是通过Redux状态管理的，所以你需要用wp.data这个模块来分发动作，把创建好的区块插入到编辑器中。核心方法是wp.data.dispatch('core/editor').insertBlock()。

完整实现代码

// 假设你已经有一个按钮元素，比如通过HTML创建：
// <button id="insert-custom-paragraph">插入自定义段落</button>

document.getElementById('insert-custom-paragraph').addEventListener('click', function() {
    // 1. 创建你的自定义段落区块
    const customParagraphBlock = wp.blocks.createBlock('core/paragraph', {
        content: '这是点击按钮插入的自定义段落内容😎'
    });

    // 2. 将区块插入到编辑器当前光标位置
    wp.data.dispatch('core/editor').insertBlock(customParagraphBlock);
});

额外说明

依赖检查：确保你的脚本已经加载了Gutenberg的核心模块，比如wp-blocks、wp-data、wp-editor。如果是在WordPress插件或主题里注册脚本，要把这些作为依赖项。

插入多个区块：如果需要一次性插入多个区块，可以用insertBlocks方法，比如：

const blocks = [
    wp.blocks.createBlock('core/paragraph', {content: '第一段'}),
    wp.blocks.createBlock('core/paragraph', {content: '第二段'})
];
wp.data.dispatch('core/editor').insertBlocks(blocks);

指定插入位置：insertBlock还支持第二个参数（插入的索引位置）和第三个参数（是否替换当前选中的区块），比如要插入到编辑器最开头：
```
wp.data.dispatch('core/editor').insertBlock(customParagraphBlock, 0);
```