如何在Gutenberg编辑器中禁用Code Editor选项

有两种可靠的实现方式：

方法一：PHP钩子（官方推荐，根源禁用） #

在主题的functions.php文件或自定义插件中添加以下代码，直接从编辑器设置层面关闭代码编辑功能：

add_filter( 'block_editor_settings_all', 'disable_gutenberg_code_editor' );
function disable_gutenberg_code_editor( $settings ) {
    $settings['codeEditingEnabled'] = false;
    return $settings;
}

这个方法会直接移除代码编辑器的切换入口，同时禁用相关功能，不会被用户通过前端操作绕过。

方法二：JavaScript（前端隐藏+快捷键禁用） #

如果需要通过前端脚本控制，先在主题目录下创建js/custom-gutenberg.js文件，写入以下代码：

wp.domReady( function() {
    // 隐藏代码编辑器切换按钮
    const codeBtn = document.querySelector( '.edit-post-more-menu [aria-label="切换到代码编辑器"]' );
    if ( codeBtn ) codeBtn.style.display = 'none';
    
    // 禁用Ctrl+Shift+M切换快捷键
    document.addEventListener( 'keydown', function( e ) {
        if ( e.ctrlKey && e.shiftKey && e.key === 'M' ) {
            e.preventDefault();
        }
    } );
} );

再在functions.php中注册并加载这个脚本：

add_action( 'enqueue_block_editor_assets', 'load_custom_gutenberg_script' );
function load_custom_gutenberg_script() {
    wp_enqueue_script(
        'custom-gutenberg-script',
        get_template_directory_uri() . '/js/custom-gutenberg.js',
        array( 'wp-dom-ready', 'wp-edit-post' ),
        wp_get_theme()->get( 'Version' ),
        true
    );
}

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