如何移除WordPress Gutenberg按钮的默认样式？

你遇到的是Gutenberg编辑器默认注入的global-styles-inline-css样式，以下几种方法可以彻底解决，不用和!important较劲：

方法1：完全禁用全局内联样式 #

把这段代码加到你主题的functions.php文件里：

// 移除全局内联样式
add_action( 'wp_enqueue_scripts', function() {
    wp_dequeue_style( 'global-styles' );
    wp_deregister_style( 'global-styles' );
}, 100 );

// 移除Block Library的默认样式（可选，若不需要Gutenberg基础块样式则启用）
add_action( 'wp_enqueue_scripts', function() {
    wp_dequeue_style( 'wp-block-library' );
    wp_deregister_style( 'wp-block-library' );
}, 100 );

注意：如果你的主题依赖Gutenberg的部分基础样式，只保留第一个函数即可。

方法2：仅移除按钮相关的全局样式 #

如果你不想完全禁用所有全局样式，只想删掉按钮的冗余代码，可以通过过滤全局样式内容实现：

add_filter( 'global_styles_content', function( $content ) {
    // 移除按钮相关的CSS规则
    $content = preg_replace( '/\.wp-element-button, .wp-block-button__link \{[^}]+\}/', '', $content );
    // 按需移除a标签的关联规则
    $content = preg_replace( '/a:where\(:not\(\.wp-element-button\)\) \{[^}]+\}/', '', $content );
    return $content;
} );

这个方法更精准，只会删除你指定的按钮样式规则，不影响其他全局样式。

方法3：通过主题支持关闭特定样式 #

如果是自定义主题，可添加主题支持关闭Gutenberg的默认颜色、排版等样式，从根源减少内联CSS：

add_action( 'after_setup_theme', function() {
    // 禁用自定义颜色
    add_theme_support( 'disable-custom-colors' );
    // 清空默认颜色调色板
    add_theme_support( 'editor-color-palette', array() );
    // 禁用自定义字体大小
    add_theme_support( 'disable-custom-font-sizes' );
    // 清空默认字体大小设置
    add_theme_support( 'editor-font-sizes', array() );
} );

这种方法会让Gutenberg不再生成相关内联样式规则，适合完全用Tailwind控制样式的场景。

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