WordPress自定义主题添加按钮字号后布局异常、前端不生效求助

问题根源 #

1. 全局配置丢失：你直接用新代码替换了主题原有的theme.json，导致原本的布局、字体族、边距等全局配置被覆盖，所以整篇文章样式异常。
2. 变量未正确生成：仅在按钮块内定义字号预设时，WordPress可能无法正确生成对应的CSS全局变量，导致前端var(--wp--preset--font-size--medium)无法解析，字号设置不生效。

解决步骤 #

1. 保留原有主题配置，追加按钮字号设置

不要完全替换theme.json，在原有配置基础上添加按钮块的字号规则，示例如下：

{
  "version": 2,
  "settings": {
    // 保留主题原有的全局配置（如下示例为常见配置，需替换为你主题的实际内容）
    "typography": {
      "fontSizes": [
        { "slug": "small", "size": "1rem", "name": "Small" }
      ],
      "fontFamilies": [{"fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif", "name": "System Font"}],
      "lineHeight": 1.6
    },
    "layout": {
      "contentSize": "800px",
      "wideSize": "1200px"
    },
    // 追加按钮块的字号配置
    "blocks": {
      "core/button": {
        "typography": {
          // 用__experimentalAdd追加新字号，不覆盖原有选项
          "__experimentalAdd": {
            "fontSizes": [
              { "slug": "medium", "size": "1.5rem", "name": "Medium" }
            ]
          }
        }
      }
    }
  },
  // 保留主题原有的样式配置
  "styles": {
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--system-font)"
    }
  }
}

如果你的主题不支持__experimentalAdd，可以将新字号合并到全局预设中，再让按钮块继承：

{
  "version": 2,
  "settings": {
    "typography": {
      "fontSizes": [
        { "slug": "small", "size": "1rem", "name": "Small" },
        { "slug": "medium", "size": "1.5rem", "name": "Medium" }
      ],
      // 保留原有字体族、行高等配置
    },
    "layout": {/* 保留原有布局配置 */},
    "blocks": {
      "core/button": {
        "typography": {
          "fontSizes": true // 继承全局所有字号选项
        }
      }
    }
  }
}

2. 强制确保前端字号生效

如果上述配置后前端仍不生效，可在theme.json的styles部分直接为按钮块的中等字号类添加硬编码样式：

{
  "version": 2,
  "settings": {/* 上述配置内容 */},
  "styles": {
    "blocks": {
      "core/button": {
        ".has-medium-font-size": {
          "typography": {
            "fontSize": "1.5rem"
          }
        }
      }
    }
  }
}

验证操作 #

1. 保存修改后的theme.json，刷新WordPress后台编辑器。
2. 检查文章布局是否恢复，按钮块是否显示Small和Medium两个字号选项。
3. 选择Medium字号后，查看前端页面按钮的字体大小是否变为1.5rem。

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