如何在WordPress编辑器中添加自定义按钮样式？

你不需要修改WordPress核心的button/block.json文件（核心文件更新会覆盖你的修改，且不符合主题开发规范），可以通过两种官方推荐的方式给按钮区块添加自定义样式：

方法1：使用PHP函数注册区块样式 #

在主题的functions.php文件（或单独的区块配置文件）中添加以下代码，直接注册新的按钮样式：

function mytheme_register_custom_button_styles() {
    // 注册「圆角填充」样式
    register_block_style(
        'core/button',
        array(
            'name'         => 'rounded-filled',
            'label'        => __( '圆角填充', 'mytheme' ),
            'inline_style' => '.wp-block-button.is-style-rounded-filled .wp-block-button__link { border-radius: 24px; background-color: #2563eb; color: #fff; padding: 0.75rem 1.5rem; }',
        )
    );

    // 注册「渐变轮廓」样式
    register_block_style(
        'core/button',
        array(
            'name'         => 'gradient-outline',
            'label'        => __( '渐变轮廓', 'mytheme' ),
            'inline_style' => '.wp-block-button.is-style-gradient-outline .wp-block-button__link { border: 2px solid; border-image: linear-gradient(to right, #60a5fa, #a855f7) 1; background: transparent; color: #60a5fa; padding: 0.75rem 1.5rem; }',
        )
    );
}
add_action( 'init', 'mytheme_register_custom_button_styles' );

• name：样式的唯一标识，会自动生成is-style-{name}的CSS类
• label：编辑器样式面板中显示的名称
• inline_style：直接内嵌样式代码，也可以用style_handle关联主题已注册的样式表

方法2：使用theme.json配置（推荐） #

如果你用的是基于theme.json的现代WordPress主题，直接在主题根目录的theme.json中添加样式定义：

{
  "version": 2,
  "styles": {
    "blocks": {
      "core/button": {
        "variations": [
          {
            "name": "rounded-filled",
            "label": "圆角填充",
            "className": "is-style-rounded-filled"
          },
          {
            "name": "gradient-outline",
            "label": "渐变轮廓",
            "className": "is-style-gradient-outline"
          }
        ]
      }
    }
  }
}

然后在主题的style.css（或独立的CSS文件）中编写对应的样式：

/* 圆角填充按钮样式 */
.wp-block-button.is-style-rounded-filled .wp-block-button__link {
    border-radius: 24px;
    background-color: #2563eb;
    color: #fff;
}

/* 渐变轮廓按钮样式 */
.wp-block-button.is-style-gradient-outline .wp-block-button__link {
    border: 2px solid;
    border-image: linear-gradient(to right, #60a5fa, #a855f7) 1;
    background: transparent;
    color: #60a5fa;
}

效果验证 #

添加完成后，进入WordPress编辑器，选中按钮区块，在右侧「区块」面板的「样式」下拉菜单中，就能看到你新增的自定义样式选项，选择后即可应用对应的样式。

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