如何移除Gutenberg核心区块InspectorControls中不需要的面板

方案1：修改区块supports配置（推荐） #

如果要移除的是核心自带的特性面板（颜色、排版、边框、间距等），直接修改区块的supports属性即可，这是性能最优的方案，从根源上禁止面板渲染。

wp.hooks.addFilter(
    'blocks.registerBlockType',
    'my-plugin/customize-block-supports',
    ( settings, blockName ) => {
        // 只处理核心区块，可根据需求调整匹配规则
        if ( blockName.startsWith( 'core/' ) ) {
            return {
                ...settings,
                supports: {
                    ...settings.supports,
                    // 设为false即可移除对应面板
                    color: false, // 颜色面板
                    typography: false, // 排版面板
                    border: false, // 边框面板
                    spacing: false, // 间距面板
                }
            };
        }
        return settings;
    }
);

方案2：过滤InspectorControls子元素 #

如果要移除的是没有对应supports开关的自定义面板（第三方插件添加的面板、核心无配置开关的面板），可以用editor.BlockEdit过滤器处理BlockEdit的输出元素，过滤掉不需要的面板。

const { createHigherOrderComponent } = wp.compose;
const { InspectorControls } = wp.blockEditor;
const { PanelBody } = wp.components;

const removeUnwantedPanels = createHigherOrderComponent( ( BlockEdit ) => {
    return ( props ) => {
        const blockEditOutput = <BlockEdit { ...props } />;
        // 定义要移除的面板特征，可按标题、class等属性匹配
        const removeRule = [
            { type: 'title', value: '高级' },
            { type: 'class', value: 'block-editor-block-inspector__advanced' }
        ];

        // 递归过滤子元素
        const filterPanels = ( element ) => {
            if ( !element ) return element;
            // 处理侧边栏控件容器
            if ( element.type === InspectorControls ) {
                return wp.element.cloneElement( element, {},
                    wp.Children.map( element.props.children, ( child ) => {
                        if ( child?.type === PanelBody ) {
                            // 匹配移除规则
                            const shouldRemove = removeRule.some( rule => {
                                if ( rule.type === 'title' ) return child.props.title === rule.value;
                                if ( rule.type === 'class' ) return child.props.className?.includes( rule.value );
                                return false;
                            } );
                            if ( shouldRemove ) return null;
                        }
                        // 递归处理嵌套元素
                        if ( child?.props?.children ) {
                            return wp.element.cloneElement( child, {}, filterPanels( child.props.children ) );
                        }
                        return child;
                    } )
                );
            }
            // 处理其他嵌套子元素
            if ( element.props?.children ) {
                return wp.element.cloneElement( element, {},
                    wp.Children.map( element.props.children, filterPanels )
                );
            }
            return element;
        };

        return filterPanels( blockEditOutput );
    };
}, 'removeUnwantedPanels' );

wp.hooks.addFilter(
    'editor.BlockEdit',
    'my-plugin/remove-unwanted-panels',
    removeUnwantedPanels
);

注意事项 #

• 上述代码需要作为编辑器专属脚本加载，注册时要声明wp-compose、wp-element、wp-block-editor、wp-components、wp-hooks作为依赖，否则会运行报错。
• 匹配面板时优先使用class、id等固定属性，比匹配标题兼容性更高，不会受多语言翻译影响。

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