如何强制Gutenberg自定义ACF区块始终显示预览模式？

你遇到的问题根源是：在编辑器里切换区块模式（预览/编辑）后，这个选择会被保存到区块属性中，直接覆盖了block.json里的默认配置。要实现每次访问都强制显示预览模式，可以从以下两个层面处理：

1. 后端强制（覆盖保存的模式设置） #

在主题的functions.php或者自定义插件中添加以下代码，通过ACF钩子强制指定区块的渲染模式：

add_filter('acf/load_block', function($block) {
    // 替换成你的区块slug，比如你的区块名称是acf/hero
    if ($block['name'] === 'acf/hero') {
        $block['mode'] = 'preview';
    }
    return $block;
});

这段代码会在区块加载时，强制把模式重置为preview，不管之前保存的是什么状态，确保前端和编辑器打开时都用预览模式。

2. 编辑器端锁定（防止用户切换模式） #

如果想彻底禁止用户在编辑器里切换到编辑模式，可以添加一段JavaScript代码，监听区块属性变化，自动把模式切回预览：

document.addEventListener('DOMContentLoaded', () => {
    wp.data.subscribe(() => {
        const blocks = wp.data.select('core/block-editor').getBlocks();
        blocks.forEach(block => {
            if (block.name === 'acf/hero' && block.attributes.mode !== 'preview') {
                wp.data.dispatch('core/block-editor').updateBlockAttributes(block.clientId, {
                    mode: 'preview'
                });
            }
        });
    });
});

把这段代码放到你的区块自定义JS文件里，或者通过后台脚本加载到编辑器页面，就能阻止用户手动切换到编辑模式。

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