古腾堡块 CSS 不适用于模板部件编辑器中的预览

Question

我正在尝试为我的 WordPress 主题添加对模板部件的支持。

我有一个带有样式表和脚本的块，一切正常。但是，在模板部件编辑器（设计 -> 模板部件）中，我的样式已加载但不适用于我的块。

我已经将以下 CSS 添加到我的块的样式表中以进行测试：

* {
    outline: 1px solid red !important;
}

编辑页面时（页面->（某些页面）->编辑），每个元素都有红色边框。

然而，在模板部件编辑器中，它看起来像这样：

在这里，红色边框适用于所有元素除了预览区域中的元素 - 这意味着我的预览根本没有样式。

但这只会影响预览，在普通网站上，一切都是正确的样式。

我还使用

enqueue_block_assets

钩子添加自定义样式标签，此样式也不适用于模板部件预览框（但它适用于其他任何地方）。

我做错了什么？

更新

我创建了一个插件，它做同样的事情 - 而且它有效。进行更多测试，当块位于主题内时，它似乎不起作用。

// It works when I do this
register_block_type(ABSPATH . "/wp-content/plugins/<plugin_name>/header");

// But not when I do this
register_block_type(ABSPATH . "/wp-content/themes/<theme_name>/blocks/header");

// (both header folders are the exact same (plugin & theme))

但我需要在主题中包含块，而不是插件。我怎样才能做到这一点？

Answer 1

预览区实际上在一个

<iframe>

里面，里面有内联样式和加载的主题&块样式，它优先于你添加的

* {...}

样式，例如：

编辑画布

<iframe name="editor-canvas" tabindex="0" srcdoc="<!doctype html><style>html{height:auto!important;}body{margin:0}</style>...</iframe>

如果您只想添加不影响前端的特定于编辑器的样式，您正在寻找的钩子是 enqueue_block_editor_assets。

Answer 2

已修复，缺少以下行：

add_editor_style(/* url to block css */);

古腾堡块 CSS 不适用于模板部件编辑器中的预览

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

更新

2个回答

最新问题

古腾堡块 CSS 不适用于模板部件编辑器中的预览

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

更新

2个回答

最新问题

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