javascript 在WordPress gutenberg 编辑器中以编程方式添加内容

ca1c2owp 于 2023-02-28 发布在 Java

关注(0)|答案(1)|浏览(120)

我正在尝试使用JavaScript向WordPress gutenberg 编辑器添加内容。保存并重新加载页面后，我收到此错误。
我使用WP_Remote_Request从另一个API检索内容。它正确检索数据并正确响应。然后，我正确附加并保存它。但是，当我重新加载页面时，我收到此错误。

此块包含意外或无效的内容。

The error screenshot
我正在努力。

let content = `<h1>What is Lorem Ipsum?</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>`

let newBlock = wp.blocks.createBlock( 'core/paragraph', { content: content } );
            let serializedBlock = wp.blocks.serialize( newBlock );
            wp.data.dispatch( 'core/block-editor' ).insertBlock( newBlock, wp.data.select( 'core/block-editor' ).getBlockCount() );
            let parsedBlock = wp.blocks.parse( serializedBlock );
            newBlock = Object.assign( {}, newBlock, parsedBlock );
            wp.data.dispatch( 'core/block-editor' ).replaceBlock( newBlock.clientId, newBlock );
            wp.data.dispatch( 'core/editor' ).savePost();

重新加载后的响应为此块包含意外或无效的内容。

JavaScript

来源：https://stackoverflow.com/questions/75556381/add-content-programmatically-in-wordpress-gutenberg-editor

1条答案

按热度按时间

szqfcxe21#

问题是paragraph block只需要段落内容。变量let content=...还包含一个<h1>..</h1>标题，需要使用heading block单独添加该标题，以便验证段落块。
如果块被正确地添加到编辑器中，则不需要您添加的序列化块的另一个步骤;如果块有效，savePost()将按预期序列化内容，例如：

- 脚本语言**

// Define content of Heading block - content between '<h{1-6}>'
let heading = `What is Lorem Ipsum?`;
let newHeadingBlock = wp.blocks.createBlock( 'core/heading', { content: heading } );

// Define content of Paragraph block - content between '<p>...</p>'
let paragraph = `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`;
let newParagraphBlock = wp.blocks.createBlock( 'core/paragraph', { content: paragraph } );

// Add the new blocks to the Editor with insertBlocks for multiple block in a given order
wp.data.dispatch( 'core/block-editor' ).insertBlocks([newHeadingBlock,newParagraphBlock]);

// Save the post content
wp.data.dispatch( 'core/editor' ).savePost();

如果查看paragraph block.json，您会发现它通过p选择器从HTML中选择内容，而heading block.json使用**h {level}**选择器，这将通过提供块所期望的内容来帮助您避免验证错误。

赞(0）回复(0）举报 2023-02-28

我来回答

javascript 在WordPress gutenberg 编辑器中以编程方式添加内容

1条答案

相关问题

热门标签

最新问答