如何为Gutenberg特定区块调用unregisterFormatType隐藏粗体按钮

要实现仅对core/pullquote区块禁用粗体按钮，同时保留其他区块的功能，不能用全局的wp.richText.unregisterFormatType（它会影响所有区块），也无需修改核心区块源码，推荐使用Gutenberg官方提供的editor.BlockEdit钩子来针对性修改区块的富文本配置，具体实现如下：

实现思路 #

通过editor.BlockEdit过滤器拦截Pullquote区块的编辑组件，修改其内部RichText元素的allowedFormats属性，移除core/bold格式类型，从底层禁止该区块内的加粗功能，同时隐藏对应的编辑器按钮。

具体代码实现 #

1. 创建自定义JavaScript文件 #

在你的主题目录下新建js/custom-pullquote.js文件，写入以下代码：

wp.hooks.addFilter(
    'editor.BlockEdit',
    'theme/remove-pullquote-bold-format',
    (BlockEdit, props) => {
        // 仅处理Pullquote区块
        if (props.name !== 'core/pullquote') {
            return BlockEdit;
        }

        // 用高阶组件包装，修改RichText的允许格式
        const ModifiedBlockEdit = wp.compose.createHigherOrderComponent((OriginalComponent) => {
            return (componentProps) => {
                // 递归处理子元素，找到并修改RichText组件
                const modifyRichTextProps = (children) => {
                    if (children.type === wp.blockEditor.RichText) {
                        // 获取默认允许的格式列表，或使用区块原有的配置
                        const defaultFormats = wp.richText.getDefaultFormatTypeNames();
                        const originalFormats = children.props.allowedFormats || defaultFormats;
                        // 移除粗体格式
                        const filteredFormats = originalFormats.filter(format => format !== 'core/bold');
                        // 返回修改后的RichText组件
                        return wp.element.cloneElement(children, {
                            allowedFormats: filteredFormats
                        });
                    }
                    if (children.props && children.props.children) {
                        return wp.element.cloneElement(children, {
                            children: wp.element.Children.map(children.props.children, modifyRichTextProps)
                        });
                    }
                    return children;
                };

                return wp.element.createElement(OriginalComponent, {
                    ...componentProps,
                    children: modifyRichTextProps(componentProps.children)
                });
            };
        }, 'removeBoldFromPullquote');

        return wp.element.createElement(ModifiedBlockEdit, props);
    }
);

2. 在主题中注册并加载脚本 #

在主题的functions.php文件中添加以下代码，确保脚本只在区块编辑器环境中加载：

function enqueue_pullquote_custom_editor_script() {
    wp_enqueue_script(
        'custom-pullquote-editor-script',
        get_stylesheet_directory_uri() . '/js/custom-pullquote.js',
        array('wp-blocks', 'wp-element', 'wp-editor', 'wp-compose', 'wp-hooks'),
        wp_get_theme()->get('Version'),
        true
    );
}
add_action('enqueue_block_editor_assets', 'enqueue_pullquote_custom_editor_script');

方案优势 #

• 规范可控：通过官方钩子修改区块配置，彻底禁止该区块内的加粗操作（包括快捷键触发），而非仅用CSS隐藏按钮。
• 无核心修改：无需扩展或修改核心区块源码，不会影响WordPress的核心更新兼容性。
• 精准影响：仅针对core/pullquote区块生效，其他区块的粗体功能完全不受影响。

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