如何在自定义模板中渲染Gutenberg区块并加载对应样式？

哈哈，这个问题我之前也碰到过！你已经成功渲染了区块内容，但样式没跟上，本质是WordPress不会自动给自定义模板加载区块的关联样式，得手动触发相关机制。下面一步步来解决：

1. 先加载核心区块和主题的基础样式 #

WordPress默认在常规文章/页面里会加载核心区块的样式、主题对区块的自定义样式，还有theme.json生成的动态全局样式，但自定义模板里得手动引入。在你的模板代码开头（比如get_header()之前）加上这些代码：

// 加载WordPress核心区块的基础样式
wp_enqueue_style( 'wp-block-library' );
// 加载主题针对区块的自定义样式（如果你的主题用了theme.json或者自定义区块样式）
wp_enqueue_style( 'wp-block-library-theme' );
// 加载theme.json生成的全局动态样式
wp_enqueue_style( 'global-styles' );

2. 加载单个区块的专属样式 #

有些区块（比如第三方插件的区块、自定义开发的区块）有自己独立的样式文件，这时候可以遍历你要渲染的区块，自动加载每个区块的专属样式：

$post_id = 你的文章ID;
$post = get_post($post_id);
$blocks = parse_blocks($post->post_content);

// 收集所有用到的区块名称，去重避免重复加载
$block_names = array();
foreach ($blocks as $block) {
    if (!empty($block['blockName'])) {
        $block_names[] = $block['blockName'];
    }
}
$block_names = array_unique($block_names);

// 为每个区块加载对应的样式
foreach ($block_names as $name) {
    wp_enqueue_block_style($name);
}

wp_enqueue_block_style()这个函数会自动找到并加载该区块注册的前端样式，不管是核心区块还是第三方的都管用。

3. 别忘加wp_head()和wp_footer() #

很多区块的动态内联样式（比如你在编辑器里给区块设置的自定义背景、字体大小）是通过wp_footer()输出的，所以一定要确保你的自定义模板里包含了：

• 在<head>标签里调用wp_head()（一般get_header()里已经包含了，但如果是完全自定义的模板要手动加）
• 在页面末尾调用wp_footer()（get_footer()里通常也有，但要确认）

完整的模板示例 #

把上面的内容整合起来，一个完整的自定义模板大概是这样：

<?php
/**
 * Template Name: 自定义区块模板
 */

// 预加载必要的区块样式
wp_enqueue_style( 'wp-block-library' );
wp_enqueue_style( 'wp-block-library-theme' );
wp_enqueue_style( 'global-styles' );

get_header();

// 替换成你要加载的文章ID
$target_post_id = 123;
$target_post = get_post($target_post_id);
$blocks = parse_blocks($target_post->post_content);

// 加载每个区块的专属样式
$block_names = array();
foreach ($blocks as $block) {
    if (!empty($block['blockName'])) {
        $block_names[] = $block['blockName'];
    }
}
$block_names = array_unique($block_names);
foreach ($block_names as $name) {
    wp_enqueue_block_style($name);
}

// 渲染所有区块
foreach ($blocks as $block) {
    echo render_block($block);
}

get_footer();
?>

额外注意点 #

• 如果你的主题有自己的自定义样式表，记得也加载它，比如wp_enqueue_style('theme-style', get_stylesheet_uri());
• 要是用了第三方区块插件（比如ACF Blocks），如果样式还是没加载，可以检查插件是否需要手动触发样式加载，或者看看插件的文档
• 清除缓存插件的缓存！有时候旧的缓存会导致样式不更新，测试前先清缓存试试

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