WordPress主题区块CSS在模板部件编辑器预览中不生效问题

问题复盘 #

在主题内注册自定义区块时，页面编辑器和网站前端样式正常，但模板部件编辑器（Design -> Template parts）的预览区域无法应用区块样式；将完全相同的区块移至插件中注册则一切正常。

解决方案 #

1. 修正区块注册路径写法 #

不要硬编码ABSPATH拼接路径，改用WordPress主题专用函数获取路径，避免路径解析错误导致的样式上下文问题：

// 子主题使用
register_block_type( get_stylesheet_directory() . '/blocks/header' );

// 父主题使用
register_block_type( get_template_directory() . '/blocks/header' );

2. 确保block.json样式配置正确 #

在区块的block.json文件中，明确用file:前缀指定样式文件的相对路径，让WordPress自动处理样式的加载逻辑：

{
  "apiVersion": 3,
  "name": "theme/header",
  "title": "Header Block",
  "style": "file:./style.css",
  "editorStyle": "file:./editor.css",
  // 其他区块配置...
}

3. 针对模板部件编辑器强制加载样式 #

如果上述方法无效，通过钩子检测当前编辑器环境，手动为模板部件编辑器加载区块样式：

add_action( 'enqueue_block_editor_assets', function() {
    $screen = get_current_screen();
    // 判断是否处于模板部件编辑器页面
    if ( $screen && 'wp_template_part' === $screen->post_type ) {
        wp_enqueue_style(
            'theme-header-block-editor-style',
            get_stylesheet_directory_uri() . '/blocks/header/editor.css',
            array( 'wp-edit-blocks' ), // 依赖编辑器基础样式，确保优先级
            filemtime( get_stylesheet_directory() . '/blocks/header/editor.css' ) // 自动更新版本号
        );
        wp_enqueue_style(
            'theme-header-block-front-style',
            get_stylesheet_directory_uri() . '/blocks/header/style.css',
            array(),
            filemtime( get_stylesheet_directory() . '/blocks/header/style.css' )
        );
    }
} );

4. 提升样式优先级适配预览区域 #

模板部件预览区域有专属的CSS类.wp-block-template-part-preview，可以给区块样式添加该前缀，确保样式能覆盖编辑器的默认隔离规则：

/* 示例：针对预览区域调整样式优先级 */
.wp-block-template-part-preview .your-block-class {
    /* 你的样式规则 */
    outline: 1px solid red !important;
}

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