自定义Gutenberg区块预览样式缺失问题排查（仅预览无样式，编辑器显示正常）

根据你的描述，用PHP注册的Gutenberg区块预览完全无样式，但编辑器内显示正常，纯JS注册的区块却能正常工作，结合WordPress的区块样式加载机制，我整理了几个可能的原因和对应的解决方法：

1. 区块预览iframe未加载全局样式 #

Gutenberg的区块插入器预览是在独立的iframe中渲染的，这个iframe不会自动继承主编辑器页面通过enqueue_block_editor_assets加载的全局样式。而你之前纯JS注册的区块，大概率是在registerBlockType时关联了样式，或者通过block.json声明了样式配置，让WordPress自动把样式注入到了预览iframe中。

解决方法： #

在你的cover/block.json中添加样式关联字段，告诉WordPress将你的全局样式加载到编辑器（包括预览iframe）和前端：

{
  // 其他区块元数据（名称、描述等）...
  "editorStyle": "my-styles",
  "style": "my-styles"
}

这里的my-styles是你通过wp_enqueue_style注册的样式句柄，WordPress会自动处理样式在编辑器预览iframe、主编辑器和前端的加载逻辑。

2. PHP注册区块时未关联样式元数据 #

当使用register_block_type从block.json注册区块时，WordPress会优先读取block.json中的样式配置来加载资源，而不是仅依赖你手动通过钩子加载的样式。之前纯JS注册的区块应该已经在block.json中配置了这些字段，所以预览能正常显示样式。

解决方法： #

无需移除你现有的wp_enqueue_scripts和enqueue_block_editor_assets钩子，只需要补充block.json中的样式配置即可——两者可以共存，钩子负责主编辑器和前端的样式加载，block.json的配置则补充预览iframe的样式注入。

3. 样式文件路径错误 #

虽然你排除了CSS层级问题，但还是建议先确认样式文件是否真的加载到了预览环境中。打开浏览器控制台的网络面板，切换到区块插入器预览状态，查看是否有index.css的请求，是否返回404错误。

解决方法： #

检查apply_filters( 'get_file_from_dist', 'index.css', true )返回的路径是否为正确的绝对URL。可以临时替换为硬编码的URL测试，比如：

$file_with_path_css = get_template_directory_uri() . '/dist/index.css';

如果样式加载恢复正常，说明过滤器返回的路径存在问题。

4. 服务器端渲染预览的样式缺失 #

你的区块注册时指定了render_callback，如果编辑器预览使用了服务器端渲染（SSR）的内容，即使你加载了样式，也可能因为预览iframe的隔离性导致样式无法生效。不过你提到直接作用于区块的样式也不生效，所以更可能是样式根本没加载到iframe中。

解决方法： #

确保block.json中的editorStyle配置正确，让WordPress自动将样式注入到SSR预览的iframe中。

快速验证步骤 #

1. 先检查block.json是否添加了editorStyle和style字段；
2. 在浏览器控制台查看预览iframe的网络请求，确认index.css是否被加载；
3. 如果路径正确，查看预览iframe的DOM结构，确认样式是否被注入到<head>标签中。

内容的提问来源于stack exchange，提问作者Frizzant