如何在区块主题中禁用WordPress核心样式编辑器UI？

我正尝试解决在编辑器中禁用区块主题样式UI的问题。我希望自行定义这些样式（通过主题和区块样式），因此想要完全隐藏样式界面，避免给站点管理员造成混淆。

我已尝试使用各种add_theme_support和remove_theme_support调用，在block.json文件的styles键中传入空对象等方法，但均未成功。

解决方案 #

方法1：通过过滤器移除编辑器样式设置 #

在主题的functions.php文件中添加以下代码，直接过滤编辑器核心设置，移除样式相关UI的基础支持：

add_filter( 'block_editor_settings_all', function( $settings ) {
    // 清空预设样式列表
    $settings['styles'] = array();
    // 禁用自定义样式相关选项
    $settings['disableCustomColors'] = true;
    $settings['disableCustomFontSizes'] = true;
    $settings['disableCustomGradients'] = true;
    $settings['disableCustomSpacing'] = true;
    // 移除区块样式切换入口
    $settings['showBlockStyles'] = false;
    return $settings;
} );

方法2：用自定义脚本强制隐藏UI元素 #

如果过滤器无法完全屏蔽样式UI，可以添加前端脚本直接隐藏对应元素：

1. 在主题目录创建js/block-editor-hide-styles.js，写入以下内容：

wp.domReady( function() {
    // 隐藏区块样式选择面板
    const stylePanel = document.querySelector('.editor-block-styles');
    if (stylePanel) stylePanel.remove();
    // 隐藏工具栏中的样式切换按钮
    const styleToggle = document.querySelector('.block-editor-block-styles__toggle');
    if (styleToggle) styleToggle.remove();
} );

2. 在functions.php中注册并加载该脚本：

add_action( 'enqueue_block_editor_assets', function() {
    wp_enqueue_script(
        'hide-block-styles-ui',
        get_template_directory_uri() . '/js/block-editor-hide-styles.js',
        array( 'wp-dom-ready' ),
        wp_get_theme()->get('Version'),
        true
    );
} );

方法3：移除特定区块的样式支持 #

如果不需要全局禁用，仅针对部分区块隐藏样式UI，可以用remove_block_support：

// 移除段落区块的样式支持
remove_block_support( 'core/paragraph', 'styles' );
// 移除按钮区块的样式支持
remove_block_support( 'core/button', 'styles' );
// 移除图片区块的样式支持
remove_block_support( 'core/image', 'styles' );

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