如何“手动”（以编程方式）在古腾堡中插入一个块？

Posted 2023-02-19

【中文标题】如何“手动”（以编程方式）在古腾堡中插入一个块？

【英文标题】：How to "manually" (programmatically) insert a block in Gutenberg?

【发布时间】：2018-10-08 12:02:41

【问题描述】：

Gutenberg 的 API 非常晦涩难懂，我不知道如何在帖子中创建和附加块。

我找到了wp.blocks.createBlock('core/paragraph', content: "blabla");，它返回一个漂亮的块对象，但不向帖子附加任何内容。

我想通过单击按钮插入一个包含一些自定义内容的简单段落。

【参考方案1】：

var content = "Test content";
var el = wp.element.createElement;
var name = 'core/paragraph';
// var name = 'core/html';
insertedBlock = wp.blocks.createBlock(name, 
    content: content,
);
wp.data.dispatch('core/editor').insertBlocks(insertedBlock);

【参考方案2】：

也许这个源代码可以帮助https://github.com/WordPress/gutenberg/blob/master/editor/components/inserter/index.js

查看文件末尾的部分

onInsertBlock: ( item ) => 
        const  insertionPoint, selectedBlock  = ownProps;
        const  index, rootUID, layout  = insertionPoint;
        const  name, initialAttributes  = item;
        const insertedBlock = createBlock( name,  ...initialAttributes, layout  );
        if ( selectedBlock && isUnmodifiedDefaultBlock( selectedBlock ) ) 
            return dispatch( 'core/editor' ).replaceBlocks( selectedBlock.uid, insertedBlock );
        
        return dispatch( 'core/editor' ).insertBlock( insertedBlock, index, rootUID );
    ,

更具体

return dispatch( 'core/editor' ).insertBlock( insertedBlock, index, rootUID );

希望可以帮助您解决问题，因为它正在做您想要实现的相同的事情