如何精准判断WordPress主题区块编辑器设置加载完成时机？

算力阿峰

2026-7-20

精准修改WordPress区块编辑器设置的最佳时机方案

原代码依赖区块数量判断，无法精准捕捉设置加载完成的时机，导致多次触发回调。以下是优化后的解决方案：

核心思路

直接监听编辑器设置的初始化状态，而非区块加载状态
使用标志位+取消订阅机制，确保修改操作只执行一次，避免重复触发
设置加载完成后立即修改，完成后停止监听

优化代码示例

let hasUpdatedSettings = false;

function blockEditorSubHandler() {
    const blockEditorSelect = wp.data.select('core/block-editor');
    const blockEditorDispatch = wp.data.dispatch('core/block-editor');

    // 已完成修改则直接返回
    if (hasUpdatedSettings) return;

    const currentSettings = blockEditorSelect.getSettings();
    // 确保编辑器设置已初始化（避免读取未加载的属性）
    if (!currentSettings?.allowedBlockTypes) return;

    // 判断是否需要修改设置
    if (!currentSettings.allowedBlockTypes.includes('foo')) {
        blockEditorDispatch.updateSettings({ allowedBlockTypes: ['foo'] });
        console.log('编辑器设置已更新');
    }

    // 标记为已处理并取消订阅，停止后续回调
    hasUpdatedSettings = true;
    wp.data.subscribe(blockEditorSubHandler, 'core/block-editor').unsubscribe();
}

// 启动监听
wp.data.subscribe(blockEditorSubHandler, 'core/block-editor');