Gutenberg区块编辑器标签页过滤及权限控制问题

1. 先搞懂标签页的注册逻辑 #

第三方插件给自定义文章类型加的区块编辑器标签页，基本都是用区块编辑器的**自定义面板（Editor Panel）**API实现的，不是传统经典编辑器的元框——这就是你之前找元框过滤钩子没用的原因。这类面板一般是通过wp.data.dispatch('core/edit-post').addEditorPanel()这个JS方法注册的。

2. 用JS钩子移除指定面板（安全替代CSS） #

区块编辑器基于React和Redux，得用JS来修改面板列表，步骤如下：

第一步：在主题functions.php里加PHP代码，加载自定义JS #

// 给区块编辑器加载自定义权限限制脚本
add_action('enqueue_block_editor_assets', 'restrict_editor_panel_by_user_role');
function restrict_editor_panel_by_user_role() {
    // 替换成你的自定义文章类型slug，比如'lesson'
    $current_screen = get_current_screen();
    if ($current_screen->post_type !== 'your_custom_post_type') return;

    // 仅对非管理员用户生效（可根据需求调整权限，比如用current_user_can('edit_others_posts')）
    if (!current_user_can('manage_options')) {
        wp_enqueue_script(
            'restrict-editor-panel-script',
            get_theme_file_uri('/js/restrict-editor-panel.js'), // 改成你实际的JS文件路径
            array('wp-edit-post', 'wp-data'), // 依赖区块编辑器核心脚本，必须添加
            wp_get_theme()->get('Version'),
            true
        );
    }
}

第二步：创建对应的JS文件 #

在主题的js/restrict-editor-panel.js中写入以下代码：

const { select, dispatch } = wp.data;

// 等待编辑器完全加载后执行
wp.domReady(() => {
    // 订阅面板状态变化，确保能获取到完整面板数据
    const unsubscribe = select('core/edit-post').subscribe(() => {
        const allPanels = select('core/edit-post').getEditorPanels();
        // 找到标题为"Settings"的面板，若想更可靠，建议用面板ID匹配（见下文）
        const settingsPanel = allPanels.find(panel => panel.title === 'Settings');
        
        if (settingsPanel && !select('core/edit-post').isEditorPanelRemoved(settingsPanel.name)) {
            // 移除目标面板
            dispatch('core/edit-post').removeEditorPanel(settingsPanel.name);
            unsubscribe(); // 只执行一次，避免重复触发
        }
    });
});

3. 更稳定的匹配方式：用面板ID替代标题 #

通过标题匹配可能因为插件翻译或标题修改失效，最好去第三方插件源码里找注册面板时用的唯一ID。比如插件里可能有这样的代码：

wp.data.dispatch('core/edit-post').addEditorPanel({
    name: 'plugin-lesson-settings-panel', // 这就是面板的唯一ID
    title: 'Settings',
    icon: 'admin-settings',
    render: () => { /* 面板内容 */ }
});

这时把JS里的panel.title === 'Settings'改成panel.name === 'plugin-lesson-settings-panel'，就能避免标题变化导致的失效问题。

4. 额外防护：限制REST API数据访问 #

如果Settings面板对应了自定义元字段，为了彻底防止非管理员修改数据，还可以用PHP过滤REST API返回的内容：

add_filter('rest_prepare_your_custom_post_type', 'block_settings_meta_for_non_admins', 10, 3);
function block_settings_meta_for_non_admins($response, $post, $request) {
    if (!current_user_can('manage_options')) {
        // 替换成Settings面板对应的元字段键名
        unset($response->data['meta']['your_settings_meta_key']);
    }
    return $response;
}

为啥CSS隐藏不安全？ #

CSS只是视觉层面隐藏，用户随便打开浏览器开发者工具就能移除隐藏规则，照样能操作面板；甚至可以直接通过REST API修改对应数据。上面的方法是从功能层面移除面板+限制数据访问，才是真正安全的做法。

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