WordPress Gutenberg编辑器加载后自动打开面板功能偶发失效咨询

失效原因 #

wp.domReady 仅监听页面DOM节点加载完成，不会等待Gutenberg编辑器的内部状态初始化完成：Gutenberg的面板注册、core/edit-post 数据存储的挂载都是异步执行的，会晚于DOMReady触发时机，当脚本执行dispatch调用时，若编辑器状态还未就绪，调用就会无响应。
另外你当前的脚本依赖数组未声明 wp-edit-post 依赖，可能出现脚本加载完成但edit-post核心模块还未加载的情况，也会导致偶发失效。

修复方案 #

1. 修正PHP脚本依赖 #

在脚本依赖数组中加入 wp-edit-post，保证你的脚本在edit-post核心模块加载完成后再执行：

function ccn_load_editor_script() {
    wp_enqueue_script( 
        'wp-ccn-gutenberg-editor', 
        plugins_url('ccn-gutenberg-editor/build/index.js'), 
        // 新增 wp-edit-post 依赖，确保核心编辑器模块加载完成
        array( 'wp-data', 'wp-blocks', 'wp-element', 'wp-editor', 'wp-edit-post' ), 
        // 开发阶段可保留 wp_rand 防缓存，生产环境建议替换为固定版本号
        wp_rand(), 
        true
    );
}
add_action( 'enqueue_block_editor_assets', 'ccn_load_editor_script' );

2. 调整JS执行逻辑，等待编辑器状态就绪 #

不要直接在domReady回调中调用面板操作，改为通过wp.data.subscribe监听编辑器状态，确认面板注册完成后再执行操作，执行后立即取消监听避免重复触发：

wp.domReady(() => {
    // 注册状态监听器
    const unsubscribe = wp.data.subscribe(() => {
        // 判断目标面板是否已完成注册，代表编辑器状态就绪
        const isPanelReady = wp.data.select('core/edit-post').isEditorPanelEnabled('featured-image');
        if (isPanelReady) {
            // 取消监听，避免后续状态变化重复执行
            unsubscribe();
            // 替换toggle为openEditorPanel，强制打开面板，避免切换时误关闭已打开的面板
            wp.data.dispatch('core/edit-post').openEditorPanel('featured-image');
            wp.data.dispatch('core/edit-post').openEditorPanel('taxonomy-panel-keywords');
            wp.data.dispatch('core/edit-post').openEditorPanel('taxonomy-panel-teachers');
        }
    });
});

补充说明 #

如果是自定义分类法对应的面板，需要确认分类法注册时配置了show_in_rest => true以及show_in_quick_edit => true，否则面板不会被Gutenberg注册，调用打开方法也会无响应。

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