如何通过theme.json为WordPress核心区块链接设置:hover和:active样式？

具体配置方法 #

针对core/cover区块内的链接，你可以在elements.link下添加states字段，嵌套hover和active状态的样式配置，示例代码如下：

{
  "styles": {
    "blocks": {
      "core/cover": {
        "color": {
          "text": "#333"
        },
        "elements": {
          "link": {
            "color": {
              "text": "#0066cc"
            },
            "states": {
              "hover": {
                "color": {
                  "text": "#004080"
                }
              },
              "active": {
                "color": {
                  "text": "#002040"
                }
              }
            }
          }
        }
      }
    }
  }
}

除了颜色，states内还支持配置排版（typography）、边框（border）等theme.json支持的所有样式属性，配置逻辑和常规元素样式一致。

theme.json配置样式的优势 #

• 集中管理：所有区块、元素的样式都统一在theme.json中维护，无需分散编写多个CSS文件，降低维护成本
• 编辑器与前端样式统一：配置的样式会同步应用到后台区块编辑器和前端页面，避免编辑器预览与前端显示不一致的问题
• 层级清晰：支持全局、区块、元素三级样式配置，局部样式可按需覆盖全局样式，逻辑明确
• 官方规范兼容：作为WordPress区块主题的官方推荐配置方式，后续版本兼容性更有保障

权威参考资料 #

• WordPress官方文档中的theme.json专属章节，包含完整的配置属性说明、层级结构解析
• WordPress核心代码库中的theme.json schema定义文件，直接反映官方支持的所有可配置项（包括支持的状态类型、样式属性）

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