Gutenberg编辑器：如何根据区块类型调整排版选择器字号（editor-font-sizes）

针对你遇到的「编辑器自动添加行内字号样式覆盖自定义类样式」的问题，核心思路是让编辑器仅添加字号类名，不生成行内font-size样式，这样就能通过CSS分别控制段落和标题的不同字号。下面是具体实现方法：

方法一：通过PHP过滤器修改编辑器字号配置 #

这种方法不需要额外编写JS，直接在主题的functions.php中添加代码即可：

1. 保留原有的editor-font-sizes主题支持配置，同时添加过滤器移除字号的size属性：

// 原有的字号配置
add_theme_support( 'editor-font-sizes', [
    [
        'name' => esc_html__( 'Small', 'str' ),
        'shortName' => __( 'S', 'str' ),
        'size' => 18,
        'slug' => 'small',
    ],
    [
        'name' => esc_html__( 'Medium', 'str' ),
        'shortName' => __( 'N', 'str' ),
        'size' => 21,
        'slug' => 'medium',
    ],
    [
        'name' => esc_html__( 'Large', 'str' ),
        'shortName' => __( 'L', 'str' ),
        'size' => 29,
        'slug' => 'large',
    ],
] );

// 过滤编辑器设置，移除字号的size属性，避免生成行内样式
add_filter( 'block_editor_settings_all', 'custom_remove_font_size_inline_style' );
function custom_remove_font_size_inline_style( $settings ) {
    if ( isset( $settings['fontSizes'] ) ) {
        foreach ( $settings['fontSizes'] as &$size ) {
            // 将size设为false，编辑器就不会生成行内font-size样式
            $size['size'] = false;
        }
    }
    return $settings;
}

2. 在编辑器样式表（editor-styles.css）中，针对段落和标题分别定义字号样式：

/* 段落字号 */
p.has-font-size-small {
    font-size: 18px;
}
p.has-font-size-medium {
    font-size: 21px;
}
p.has-font-size-large {
    font-size: 29px;
}

/* 标题字号（示例，可根据需求调整） */
h1.has-font-size-small {
    font-size: 24px;
}
h1.has-font-size-medium {
    font-size: 32px;
}
h1.has-font-size-large {
    font-size: 48px;
}

h2.has-font-size-small {
    font-size: 22px;
}
h2.has-font-size-medium {
    font-size: 28px;
}
h2.has-font-size-large {
    font-size: 36px;
}

/* 其他标题标签同理扩展 */

方法二：通过JavaScript拦截行内样式生成 #

如果你更倾向于用JS处理，可以在编辑器中过滤区块的style属性，移除自动添加的font-size行内样式：

1. 在主题中创建editor-scripts.js文件，添加以下代码：

wp.hooks.addFilter(
    'block.attributes.style',
    'your-theme/clean-font-size-style',
    ( style, blockType, attributes ) => {
        // 当区块设置了字号且存在行内样式时，移除font-size部分
        if ( attributes.fontSize && style ) {
            style = style.replace(/font-size:\s*\d+px;\s*/g, '');
            // 如果移除后样式为空，返回null避免生成空的style属性
            return style || null;
        }
        return style;
    }
);

2. 在functions.php中加载编辑器脚本和样式：

add_action( 'enqueue_block_editor_assets', 'custom_enqueue_editor_assets' );
function custom_enqueue_editor_assets() {
    // 加载编辑器样式
    wp_enqueue_style( 'custom-editor-styles', get_template_directory_uri() . '/editor-styles.css', array(), wp_get_theme()->get('Version') );
    // 加载编辑器脚本
    wp_enqueue_script( 'custom-editor-scripts', get_template_directory_uri() . '/editor-scripts.js', array( 'wp-blocks', 'wp-hooks' ), wp_get_theme()->get('Version'), true );
}

3. 同样在editor-styles.css中添加段落和标题的字号样式（同方法一的CSS代码）。

验证效果 #

完成上述配置后，在编辑器中选择字号时，区块只会添加.has-font-size-[slug]的类名，不会再生成行内的font-size样式，此时你的自定义CSS就能正常生效，实现段落和标题的字号差异化。

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