在 DOM 中显示 wordpress Gutenberg 编辑器块

Question

wordpress 的古腾堡编辑器使用由 HTML 注释标记的块，即

<!-- wp:heading --><h2>My Heading block</h2><!-- /wp:heading -->

。

我可以使用 API 将这样的块注入到文章中，并且它可以工作。但由于某种原因，即使我激活了 Chrome 中的显示注释部分，我也看不到 DOM 中的注释。有没有办法查看完整的块，包括标记这些块的 HTML 注释？

对于上下文：我编写了一个 python 库来以编程方式创建内容，但是稀疏的文档使得很难找到正确的语法。因此，我也对评论感兴趣，这些评论提供了更好的文档或内容的良好链接，以了解这些块的详细外观。我现在找到的最好的就是这个教程。

Answer 1

所讨论的HTML注释是块的保存标记，它是从编辑器保存帖子/页面时从静态块内容创建的。

查看已保存的实际标记（如果您想复制/粘贴块代码）的最简单方法是在编辑器中创建新的帖子/页面并添加所需的块，然后将 Editor 模式更改为 Code Editor （

Ctrl

+

Shift

+

Alt

+

M

）。 注意：此方法最适合静态块 - 动态块通常只存储属性，有时不存储任何内容，因为它们是动态渲染的。

为了更好地理解块在前端渲染的过程，请通读函数 do_blocks() 以及它如何使用 parse_blocks() 和 render_block() （虽然它是在 PHP 中，但仍然可以对你有帮助）。

考虑到您使用 Python 进行编程，我建议使用 JavaScript REST API 来实现块类型来获取所有必需的块属性，以编程方式构造有效块，例如：

GET /wp/v2/block-types/<namespace>

$ curl https://example.com/wp-json/wp/v2/block-types/<namespace>

其他参数和示例可以在文档中找到。