WordPress Gutenberg编辑器功能禁用指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00057/article/details/148414969

WordPress Gutenberg编辑器功能禁用指南

gutenberg The Block Editor project for WordPress and beyond. Plugin is available from the official repository. 项目地址: https://gitcode.com/gh_mirrors/gu/gutenberg

前言

在WordPress Gutenberg编辑器的实际使用中，我们经常需要根据项目需求或用户体验考虑，对编辑器功能进行定制化调整。本文将全面介绍如何禁用Gutenberg编辑器中的特定功能，帮助开发者和管理员打造更符合需求的编辑环境。

一、限制可用区块

1.1 白名单方式

通过白名单方式可以只允许特定区块出现在插入器中。这种方式适合需要严格控制可用区块的场景，比如企业内容管理系统。

// 示例：只允许段落和标题区块
function example_allowed_block_types( $allowed_block_types, $editor_context ) {
    return array(
        'core/paragraph',
        'core/heading'
    );
}
add_filter( 'allowed_block_types_all', 'example_allowed_block_types', 10, 2 );

1.2 黑名单方式

黑名单方式则更适合只需要禁用少量特定区块的情况，保留其他所有区块。

// 示例：禁用媒体库和画廊区块
function example_disallowed_block_types( $block_types ) {
    $block_types = array_diff( $block_types, array(
        'core/media-text',
        'core/gallery'
    ));
    return $block_types;
}
add_filter( 'allowed_block_types_all', 'example_disallowed_block_types' );

二、定制标题级别选项

Gutenberg提供了精细控制标题级别的能力，这对于保持网站内容结构一致性特别有用。

2.1 通过区块属性控制

可以直接在区块标记中指定可用的标题级别：

<!-- wp:heading {"level":3,"levelOptions":[3,4,5]} -->
<h3>示例标题</h3>
<!-- /wp:heading -->

2.2 全局设置标题级别

通过过滤器可以全局设置标题级别的默认选项：

function modify_heading_levels( $args, $block_type ) {
    if ( 'core/heading' === $block_type ) {
        $args['attributes']['levelOptions']['default'] = [ 3, 4, 5 ];
    }
    return $args;
}
add_filter( 'register_block_type_args', 'modify_heading_levels', 10, 2 );

三、禁用核心模式目录

WordPress核心自带一些预设模式，如需禁用：

function disable_core_patterns() {
    remove_theme_support( 'core-block-patterns' );
}
add_action( 'after_setup_theme', 'disable_core_patterns' );

四、禁用区块变体

某些"区块"实际上是核心区块的变体，例如行(ROW)和堆叠(STACK)实际上是组(GROUP)区块的变体。

4.1 禁用特定变体

// disable-variations.js
wp.domReady( () => {
    wp.blocks.unregisterBlockVariation( 'core/group', 'group-row' );
});

4.2 在主题中加载脚本

function enqueue_disable_variations() {
    wp_enqueue_script(
        'disable-variations',
        get_template_directory_uri() . '/disable-variations.js',
        array( 'wp-dom-ready' ),
        wp_get_theme()->get( 'Version' ),
        true
    );
}
add_action( 'enqueue_block_editor_assets', 'enqueue_disable_variations' );

五、禁用区块样式

某些区块包含预设样式，如图片区块的"圆角"样式。

// disable-block-styles.js
wp.domReady( () => {
    wp.blocks.unregisterBlockStyle( 'core/image', 'rounded' );
});

同样需要在主题中加载此脚本。

六、禁用代码编辑器

代码编辑器允许查看和编辑原始区块标记，但可能带来风险：

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

七、禁用富文本格式选项

可以禁用特定的富文本格式选项：

// disable-formats.js
wp.domReady( () => {
    wp.richText.unregisterFormatType( 'core/image' );
    wp.richText.unregisterFormatType( 'core/language' );
    // 其他需要禁用的格式
});