求助：如何为角色禁用WordPress Gutenberg的代码编辑器与HTML编辑功能？

我之前刚好解决过类似的需求，Gutenberg的这两个功能确实不像经典编辑器那样有现成的开关，不过通过钩子和前端脚本就能搞定，给你分步骤说：

这个功能是控制整个编辑器在可视化和纯代码模式之间切换的，我们可以通过block_editor_settings_all过滤器来关闭它：

add_filter( 'block_editor_settings_all', 'disable_gutenberg_top_code_editor' );
function disable_gutenberg_top_code_editor( $settings ) {
    // 把代码编辑功能设为禁用状态
    $settings['codeEditingEnabled'] = false;
    return $settings;
}

把这段代码加到主题的functions.php文件里，或者自定义插件中（更推荐后者，避免主题更新导致代码丢失）。

这个是每个块右键或工具栏里的“编辑HTML”选项，需要用前端JS来移除，因为Gutenberg的块菜单是前端渲染的。这里给你两种实现方式：

方式一：内联脚本（无需单独建JS文件） #

直接把JS代码嵌入到编辑器页面，更方便：

add_action( 'enqueue_block_editor_assets', 'disable_block_html_edit_inline' );
function disable_block_html_edit_inline() {
    // 加载依赖的Gutenberg脚本
    wp_enqueue_script(
        'disable-block-html-edit',
        '',
        array( 'wp-blocks', 'wp-edit-post', 'wp-data', 'wp-hooks' ),
        null,
        true
    );

    // 编写移除HTML编辑选项的脚本
    $inline_js = <<<JS
wp.domReady( function() {
    // 移除顶部的"以HTML编辑"面板
    wp.data.dispatch( 'core/block-editor' ).removeEditorPanel( 'editor-post-html' );
    
    // 过滤块工具栏，移除"编辑HTML"按钮
    wp.hooks.addFilter(
        'editor.BlockToolbar',
        'my-custom/disable-html-edit',
        ( toolbarProps, blockProps ) => {
            toolbarProps.children = toolbarProps.children.filter(
                item => item.props.name !== 'core/edit-html'
            );
            return toolbarProps;
        }
    );
} );
JS;

    wp_add_inline_script( 'disable-block-html-edit', $inline_js );
}

方式二：单独JS文件（适合复杂自定义） #

如果以后还要加其他前端自定义，可以单独建JS文件：

1. 在主题目录下新建disable-block-html-edit.js，内容如下：

wp.domReady( function() {
    // 移除顶部HTML编辑面板
    wp.data.dispatch( 'core/block-editor' ).removeEditorPanel( 'editor-post-html' );

    // 遍历所有块类型，移除HTML编辑控制
    wp.blocks.getBlockTypes().forEach( blockType => {
        if ( blockType?.edit?.props?.controls?.html ) {
            delete blockType.edit.props.controls.html;
        }
    } );

    // 过滤工具栏，确保移除所有编辑HTML按钮
    wp.hooks.addFilter(
        'editor.BlockToolbar',
        'my-custom/disable-html-edit',
        ( toolbarProps ) => {
            toolbarProps.children = toolbarProps.children.filter(
                item => item.props.name !== 'core/edit-html'
            );
            return toolbarProps;
        }
    );
} );

2. 在functions.php中加载这个JS文件：

add_action( 'enqueue_block_editor_assets', 'enqueue_disable_html_edit_script' );
function enqueue_disable_html_edit_script() {
    wp_enqueue_script(
        'disable-block-html-edit',
        get_stylesheet_directory_uri() . '/disable-block-html-edit.js',
        array( 'wp-blocks', 'wp-edit-post', 'wp-data', 'wp-hooks' ),
        filemtime( get_stylesheet_directory() . '/disable-block-html-edit.js' ),
        true
    );
}

• 测试前记得备份functions.php文件，避免语法错误导致网站崩溃；
• 如果用子主题，建议把代码加到子主题的functions.php里，这样父主题更新不会影响；
• 代码生效后，刷新编辑器页面就能看到效果了。

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