如何用ACF Pro添加Gutenberg区块并生成专属自定义CSS文件

完全可以实现类似Elementor的效果，核心思路是给每个ACF区块分配唯一标识，收集其样式设置，生成独立CSS文件并在前端加载。以下是具体实现步骤：

1. 利用Gutenberg自带的区块唯一ID #

每个Gutenberg区块本身就带有唯一的block['id']属性，无需额外自定义字段，直接用这个ID作为区块的专属选择器标识，比如给区块容器添加类名：.acf-block--<?php echo $block['id']; ?>

2. 收集区块样式规则 #

在ACF区块的渲染模板中，读取高级标签页的样式字段（字体大小、颜色、背景色等），将其转换为对应的CSS规则：

// 初始化样式数组
$block_styles = [];

// 从ACF字段读取样式值并转换
if (!empty($block['font_size'])) $block_styles[] = "font-size: {$block['font_size']}px;";
if (!empty($block['text_color'])) $block_styles[] = "color: {$block['text_color']};";
if (!empty($block['bg_color'])) $block_styles[] = "background-color: {$block['bg_color']};";
if (!empty($block['font_weight'])) $block_styles[] = "font-weight: {$block['font_weight']};";
if (!empty($block['height'])) $block_styles[] = "height: {$block['height']}px;";
if (!empty($block['width'])) $block_styles[] = "width: {$block['width']}%;";

// 拼接为完整的CSS规则字符串
$css_rule = ".acf-block--{$block['id']} { " . implode(' ', $block_styles) . " }";

// 将规则存入全局数组，用于后续生成文件
global $acf_global_styles;
$acf_global_styles[] = $css_rule;

3. 生成并写入CSS文件 #

借助WordPress的save_post钩子，在文章/页面保存时，将收集到的所有区块样式写入专属CSS文件：

add_action('save_post', function($post_id) {
    global $acf_global_styles;
    if (empty($acf_global_styles)) return;

    // 定义CSS文件存储目录（优先用uploads目录，避免权限问题）
    $css_dir = WP_CONTENT_DIR . '/uploads/acf-block-styles/';
    
    // 目录不存在则创建
    if (!file_exists($css_dir)) {
        wp_mkdir_p($css_dir);
    }

    // 拼接所有CSS规则
    $css_content = implode("\n", $acf_global_styles);

    // 定义对应文章的CSS文件名
    $css_file = $css_dir . "post-{$post_id}.css";

    // 使用WordPress文件系统API写入（比直接file_put_contents更安全）
    global $wp_filesystem;
    if (empty($wp_filesystem)) {
        require_once ABSPATH . 'wp-admin/includes/file.php';
        WP_Filesystem();
    }
    $wp_filesystem->put_contents($css_file, $css_content, FS_CHMOD_FILE);
}, 10, 1);

4. 前端加载专属CSS文件 #

通过wp_enqueue_scripts钩子，在对应文章/页面加载时，引入生成的CSS文件：

add_action('wp_enqueue_scripts', function() {
    global $post;
    if (!$post) return;

    $css_file_path = WP_CONTENT_DIR . "/uploads/acf-block-styles/post-{$post->ID}.css";
    $css_file_url = content_url("/uploads/acf-block-styles/post-{$post->ID}.css");

    // 文件存在则加载，用文件修改时间作为版本号避免缓存
    if (file_exists($css_file_path)) {
        wp_enqueue_style(
            "acf-block-styles-{$post->ID}",
            $css_file_url,
            [],
            filemtime($css_file_path)
        );
    }
});

额外优化建议 #

• 清理冗余文件：添加before_delete_post钩子，删除文章时同步删除对应的CSS文件
• 性能优化：如果站点文章量极大，可考虑按分类/模板合并样式文件，或启用CSS压缩
• 权限保障：确保uploads/acf-block-styles目录有写入权限，避免生成失败

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