WordPress Gutenberg：如何监听PluginSidebar打开以重置设置与状态？

Gutenberg 提供了直接检测 PluginSidebar 开闭状态的官方 API，无需使用 MutationObserver。相关状态与方法位于 core/edit-post 数据模块，而非 core/editor。

核心实现逻辑 #

• 用 wp.data.subscribe() 监听全局状态变化
• 通过 core/edit-post 的 isPluginSidebarOpened() 选择器，精准检测目标侧边栏的开闭状态
• 对比状态前后变化，仅在侧边栏从关闭转为打开时触发初始化逻辑

具体代码示例 #

// 记录侧边栏上一次的状态，用于判断状态切换
let wasSidebarOpen = false;

// 订阅状态更新
const unsubscribe = wp.data.subscribe(() => {
    // 替换为你注册 PluginSidebar 时的唯一标识（slug）
    const targetSidebarSlug = 'your-plugin-sidebar-name';
    const isSidebarOpen = wp.data.select('core/edit-post').isPluginSidebarOpened(targetSidebarSlug);

    // 仅在侧边栏打开瞬间执行初始化
    if (isSidebarOpen && !wasSidebarOpen) {
        // 替换为你的自定义初始化函数
        yourCustomInitFunction();
    }

    // 更新状态记录
    wasSidebarOpen = isSidebarOpen;
});

// 组件卸载时务必取消订阅，避免内存泄漏
// 例如在 React 组件中可放在 useEffect 的清理函数：
// useEffect(() => { return unsubscribe; }, []);

关键注意事项 #

• isPluginSidebarOpened() 必须传入你注册侧边栏时的 name 参数（即 registerPlugin 配置中 pluginSidebar 的名称），确保只监听目标侧边栏
• 对比前后状态是为了避免重复触发，仅响应「打开」动作
• 必须在组件销毁时调用 unsubscribe() 清理订阅，防止内存泄漏

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