在 WordPress rest API 中公开默认的 gutenberg 块样式

Question

我们正在使用 WordPress REST API 来支持静态站点。从我们不使用 WordPress 主题的意义上说，该站点是“无头”的；我们依赖于通过 REST API.

公开的内容

一些默认的 Gutenberg 块 - 例如 Buttons 块 - 具有与它们关联的散列 class 名称的样式，这些名称似乎没有在 API 中公开。如果 class 名称是可预测的，这将是种好的，但由于它们不是，我们无法在我们这边提供样式。

如果我们做渲染主题中的块，样式会在页脚中渲染

这是 WordPress 主题中默认按钮块的样式块示例

其余 API 端点公开 content.rendered 中的标记（包括 class 名称）但没有样式

这是使用 Gutenberg 和 WordPress REST API 的预期行为吗？如果是这样，通过 API 上的自定义字段（因为缺少更好的术语）公开样式的正确解决方案是否正确？

Answer 1

每次解析块时，类名中的唯一 ID（哈希）都会随机生成，即使直接调用 REST API 也是如此。不幸的是，REST API 中的内容标记中没有像 .alignleft 这样的内联样式属性。作为 REST API，不包含特定于样式的信息是有道理的；这使数据和数据的呈现分开。它还通过包含在 WordPress 主题之外很少使用的 style-specific 信息来防止 API 膨胀。

在您的场景中，如果您希望设置生成的 HTML 内容的样式而不用担心唯一 ID，我建议使用 css 部分选择器，例如：

div[class*="wp-container-"] .wp-block-button{
    ...
}

或者，正如您提到的，可以扩展 REST API 以包含样式。虽然我还没有为样式构建一个工作示例，但是当引入块时，我最终扩展了 REST API 以包含额外的元数据。我建议查看 render_block_data 来处理将样式添加到内容中的问题。

例如。对于按钮块，数据库中存储的序列化内容为：

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">Hello</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

通过使用parse_blocks()，您可以将所有块属性获取到一个数组中，并以这种方式获取样式信息。如果您只添加生成的类名而不是内联样式，我认为这种方法是 do-able。我很想知道您是否找到更好的方法...

在 WordPress rest API 中公开默认的 gutenberg 块样式

Expose default gutenberg block styles in WordPress rest API

wordpress

wordpress-theming

wordpress-rest-api

wordpress-gutenberg