如何在古腾堡中“手动”(以编程方式)插入块?

问题描述 投票:0回答:2

古腾堡的 API 非常晦涩,我不知道如何创建一个块并将其附加到一个帖子中。

我发现

wp.blocks.createBlock('core/paragraph', {content: "blabla"});
它返回一个漂亮的块对象,但不会在帖子中附加任何内容。

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

javascript reactjs wordpress wordpress-gutenberg gutenberg-blocks
2个回答
18
投票
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);

5
投票

也许这个源代码可以帮助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 );

希望有助于解决你的问题,因为它正在做你想要实现的同样的事情

© www.soinside.com 2019 - 2024. All rights reserved.