以编程方式触发 Wordpress Gutenberg “转换为块”

Posted 2023-02-19

【中文标题】以编程方式触发 Wordpress Gutenberg “转换为块”

【英文标题】：Firing Wordpress Gutenberg "Convert to Blocks" programmatically

【发布时间】：2019-05-09 19:21:04

【问题描述】：

我有几个用 Node.js 编写的机器人，用于自动生成 html 内容并使用 REST API 将它们放入多个 Wordpress 站点。最近 Wordpress 5.0 正式发布，Gutenberg 成为了默认编辑器。所有旧帖子以及机器人生成的帖子都将封装在一个“经典”块中。

正如我们大多数人已经知道的那样，应该添加额外的标记来将 HTML 元素转换为块，并且在 Gutenberg UI 中有一个“转换为块”按钮可以将它们转换为块。是否有任何方便的方法（比如使用内置函数）以编程方式执行与“转换为块”相同的操作，或者我们应该将那些与古腾堡相关的标记一一包装？任何帮助都应该感谢

【参考方案1】：

可能这有点晚了，但如果有人仍在寻找解决方案，这就是你的方法。

此代码假定您的经典块是第一个：

var block = wp.data
      .select("core/editor")
      .getBlocks()[0];

wp.data.dispatch( 'core/editor' ).replaceBlocks(block.clientId, wp.blocks.rawHandler( 
   HTML: wp.blocks.getBlockContent( block ) 
));

如果您想对所有经典块执行此操作，只需迭代整个块并查找块名称core/freeform 以将其转换为：

wp.data.select("core/editor").getBlocks().forEach(function(block, blockIndex)
  if (block.name === "core/freeform")
    wp.data.dispatch( 'core/editor' ).replaceBlocks(block.clientId, wp.blocks.rawHandler( 
       HTML: wp.blocks.getBlockContent( block ) 
    ));    
  
)

【讨论】：

有没有可以用来访问wp 的 npm 包，大概我会从 npm 包中导入它吧？

@MaxCarroll 有几个 WordPress 包 (github.com/WordPress/gutenberg/tree/master/packages) 使用 wp 全局，但根据您的操作方式，您可能不需要它们。该代码似乎使用了“wp-blocks”、“wp-editor”包，这些包被编译到标准的 wordpress 安装中。 developer.wordpress.org/block-editor/packages

这听起来应该正是我想要的，但我不能完全让它工作（即使在将'core/editor'更新为'core/block-editor'之后）。无论当前帖子中有多少块，getBlocks 总是为我返回一个空数组。不知道我做错了什么。过早调用 getBlocks？我也试过把它包装在 wp.domReady(function() ;