以下信息仅基于 WordPress 文档，方便参考。在撰写本文时，全局样式 (theme.json) 和用户界面自定义功能正在积极开发中。当然，所有这些都仍处于积极开发阶段。如果您发现某些内容已更改或不正确，请在评论中告诉我！
设置
{
"version": 2,
"settings": {
"border": {},
"color": {},
"typography": {},
"layout": {},
"spacing": {},
"outline": {},
"appearanceTools": true | false,
"useRootPaddingAwareAlignments": true | false
}我们将从设置配置开始，在这里我们将它分解成多个表格，分别用于排版、颜色、自定义和间距。
请记住，这些“顶级”样式应用于<body>元素。回顾一下我们正在处理的语法可能会有所帮助
- CSS 自定义属性：
--wp--preset--{preset-category}--{preset-slug} - CSS 类：
.has-{preset-slug}-{preset-category}
边框
border 部分允许在编辑器 UI 中控制边框。
{
"version": 2,
"settings": {
"border": {
"color": true,
"radius": true,
"style": true,
"width": true
}
}| JSON 属性 | 其作用 | CSS 等效项 |
|---|---|---|
settings.border.color | 启用边框颜色控制。 | border-color |
settings.border.radius | 启用边框半径控制。 | border-radius |
settings.border.style | 启用边框样式控制。 | border-style |
settings.border.width | 启用边框宽度控制。 | border-width |
颜色
color 部分设置主题的颜色调色板、渐变和双色调效果。
{
"version": 2,
"settings": {
"color": {
"palette": {
"slug": "",
"color": "",
"name": "",
},
"gradients": [
{
"slug": "",
"gradient": "",
"name": ""
}
],
"duotone": {
"slug": "",
"color": "",
"name": "",
}
"link": true | false
}
}
}
}| JSON 属性 | 其作用 | CSS 自定义属性 |
|---|---|---|
settings.color.pallete.color | 定义可在整个主题中使用的颜色值。 | --wp–preset--color--{slug} |
settings.color.gradients.color | 定义可在整个主题中使用的渐变模式。 | --wp–preset--gradient--{slug} |
settings.color.duotone | 定义可在整个网站中使用的双色调效果。 | –-wp–preset--duotone--{slug} |
settings.color.link | 启用设置以在站点编辑器中更改主题的默认链接颜色。 | –-wp–preset-–color-–link |
排版
{
"version": 2,
"settings": {
"styles": {
"typography": {
"dropCap": true | false,
"customFontSize": true | false,
"fluid": "<undefined>" | false,
"fontSizes": [
{
"fluid": {
"min": "",
"max": ""
},
"slug": "",
"size": "",
"name": ""
},
],
"fontFamilies": [
{
"fontFamily": "",
"name": "",
"slug": "",
"fontFace": ""
},
],
"lineHeight": true | false,
"fontStyle": true | false,
"letterSpacing": true | false,
"textDecoration": true | false,
"textTransform": true | false,
}
}
}| JSON 属性 | 其作用 | CSS 自定义属性 |
|---|---|---|
settings.typography.fontSizes | 定义整个网站的字体大小。 | --wp--preset--font-size--{slug} |
settings.typography.fontFamilies | 定义整个网站的排版字体使用。 | --wp--preset--font-family--{slug} |
settings.typography.lineHeight | 定义整个网站使用的行高。 | --wp--preset--line-height--{slug} |
settings.typography.fontStyle | 定义整个网站使用的字体样式。 | --wp--preset--line-height--{slug} |
settings.typography.fontWeight | 定义整个网站使用的字体粗细。 | --wp--preset--font-weight--{slug} |
settings.typography.letterSpacing | 定义整个网站使用的字母间距。 | --wp--preset--letter-spacing--{slug} |
settings.typography.textDecoration | 定义整个网站使用的文本装饰。 | –wp-preset–text-decoration–{slug} |
settings.typography.textDecoration.line | 定义整个网站使用的链接文本装饰线。 | --wp-preset--text-decoration--line |
settings.typography.textDecoration.style | 定义整个网站使用的链接文本装饰线样式。 | --wp-preset--text-decoration--style--{slug} |
settings.typography.textDecoration.color | 定义整个网站使用的链接文本装饰颜色。 | --wp–preset--text-decoration--color--{slug} |
settings.typography.textDecoration.thickness | 定义整个网站使用的链接文本装饰线粗细。 | --wp–preset--text-decoration--thickness--{slug} |
settings.typography.textTransform | 定义整个网站使用的文本转换类型（大写、小写）。 | --wp--preset--text-transform--{slug} |
间距
这些设置启用/禁用站点编辑器中边距和填充的间距控制，并允许您设置要支持的 CSS 单位。
"styles": {
"spacing":{
"padding": true,
"margin": true,
"units": [ "px", "em", "rem", "vh", "vw", "%" ]
}
}站点和块编辑器包含滑块表单输入，允许您按预定义值的比例设置间距。我们可以使用spacingScale属性自定义该比例
{
"version": 2,
"settings": {
"spacing": {
"spacingScale": {
"operator": "+",
"increment": <number>,
"steps": <number>,
"mediumStep": <number>,
"unit": ""
}
}
}
}| JSON 属性 | 其作用 | 示例 |
|---|---|---|
settings.spacing.operator | 确定控件是向上扩展还是向下扩展。 | + |
settings.spacing.increment | 确定每次步骤间距变化多少。 | 0.25 |
settings.spacing.steps | 确定比例上可用步骤的数量。 | 6 |
settings.spacing.mediumStep | 设置范围比例的中点。 | 1.5 |
settings.spacing.unit | 设置数字值的 CSS 长度单位。 | rem |
关于间距，我们还可以做的一件事是创建可以在整个主题中使用的 CSS 自定义属性
{
"version": 2,
"settings": {
"spacing": {
"spacingSizes": [
{
"size": "",
"slug": "",
"name": ""
}
]
}
}
}| JSON 属性 | 其作用 | 示例 |
settings.spacing.spacingSizes.size | 设置自定义大小值，包括单位。 | 3.5rem |
settings.spacing.spacingSizes.slug | 在 CSS 自定义属性名称中使用的 slug。 | medium |
settings.spacing.spacingSizes.name | 在站点和块编辑器 UI 中提供该尺寸的标签。 | 中等 |
生成的 CSS 自定义属性语法为：--wp-preset--spacing--<slug>
布局
{
"version": 2,
"settings": {
"layout": {
"contentSize": "",
"wideSize": "",
"type": "",
}
}
}| JSON 属性 | 其作用 | 生成的 CSS 属性 |
|---|---|---|
settings.layout.contentSize | 设置页面和文章的默认内容容器的最大宽度。 | --wp--style--global--content-size |
settings.layout.contentWide | 设置页面和文章的“宽”内容容器的最大宽度。 | --wp--style--global--wide-size |
settings.layout.type | 确定容器是default还是constrained。 |
外观工具
{
"version": 2,
"settings": {
"appearanceTools": true | false,
}将其设置为true是启用以下设置的简写方式
{
"version": 2,
"settings": {
"border": {
"color": true,
"radius": true,
"style": true,
"width": true
},
"color": {
"link": true
}
"spacing": {
"margin": true,
"padding": true,
"blockGap": true,
},
"typography": {
"lineHeight": true
}
}
}根填充感知对齐
{
"version": 2,
"settings": {
"useRootPaddingAwareAlignments": true | false
}将其设置为true是启用以下设置的简写方式
{
"version": 2,
"settings": {
"spacing": {
"margin": true,
"padding": true
},
}
}样式
这里的理念是，样式按**顶层样式**（在<body>上设置样式）、**全局样式**（在全局元素（如标题）上设置样式）和**区块样式**（在特定区块上设置样式）进行组织。
{
"version": 2,
"styles": {
// Top-level styles
// etc.
// Global-level styles
"elements": { },
// Block-level styles
"blocks": { }
}
}顶层样式
{
"version": 2,
"styles": {
// Top-level styles
"border": [],
"color": [],
"spacing": [],
"typography": [],
"filter": "",
"shadow": "",
"outline": []
}
}| 属性 | 样式 | CSS 等效项 | 其他属性 |
|---|---|---|---|
边框 | 颜色 | border-color | |
圆角 | border-radius | ||
样式 | border-style | ||
宽度 | border-width | ||
顶部 | 顶部边框 | color、style、width | |
右侧 | 右侧边框 | color、style、width | |
底部 | 底部边框 | color、style、width | |
左侧 | 左下角 | color、style、width | |
颜色 | 背景 | 背景颜色 | |
渐变 | 背景图片 | ||
文本 | 颜色 | ||
间距 | 区块间距 | gap（在 Flexbox 和 Grid 容器中） | |
外边距 | 外边距 | bottom、left、right、top | |
内边距 | 内边距 | bottom、left、right、top | |
排版 | 字体系列 | font-family | |
字体大小 | font-size | ||
字体样式 | font-style | ||
字体粗细 | font-weight | ||
字母间距 | letter-spacing | ||
行高 | line-height | ||
文本修饰 | text-decoration | ||
文本转换 | text-transform | ||
滤镜 | 双色调 | 滤镜 | |
阴影 | box-shadow | ||
轮廓 | 颜色 | 轮廓颜色 | |
偏移量 | 轮廓偏移量 | ||
样式 | 轮廓样式 | ||
宽度 | 轮廓宽度 |
全局样式
{
"version": 2,
"styles": {
"elements": {
"buttons": {
"border": {
"radius": ""
},
"color": {
"background": "",
"text": ""
},
"heading": {},
"h1": { },
"h2": { },
"h3": { },
"h4": { },
"h5": { },
"h6": { },
"link": {
"border": { },
"color": { },
"spacing": { },
"typography": { }
}
}
}
}
}
}| JSON 属性 | 作用 | 使用位置 |
|---|---|---|
styles.elements.buttons | 定义按钮元素属性（例如，border、color等），以便在整个网站中使用。 | 按钮 |
styles.elements.heading | 定义所有标题（<h1>到<h6>）元素的样式，以便在整个网站中使用。 | <h1>到<h6>（全部） |
styles.elements.h1到styles.elements.h6 | 分别定义标题区块的<h1>到<h6>元素的样式，以便在整个网站中使用。 | <h1>到<h6>（分别） |
styles.elements.link | 定义链接<a>元素的样式，以便在整个网站中使用。 | <a> |
styles.elements.cite | 定义blockquote.cite、quote.cite类的样式，以便在整个网站中使用。 | 引用、摘录 |
styles.elements.caption | 分别定义图片和表格区块的<figcaption>和<caption>元素的样式，以便在整个网站中使用。 | 图片、表格 |
styles.elements.spacing.padding | 设置标题、行、区块和段落区块的内边距，以便在整个网站中使用。 | 标题、行、区块、段落 |
styles.elements.typography | 设置标题和段落区块的默认排版样式，以便在整个网站中使用。 | 标题、段落 |
全局级样式：交互元素
{
"version": 2,
"styles": {
"elements": {
"button": {
"color": {
"background": " ",
"text": " "
}
":hover": {
"color": {
"background": " ",
"text": " "
}
},
":focus": {
"color": {
"background": " ",
"text": " "
}
},
":active": {
"color": {
"background": " ",
"text": " "
}
},
":visited": {
"color": {
"background": " ",
"text": " "
}
}
}
}
}
}注意：我们可以使用设置预设中任何已预定义的 JSON 属性（如排版、轮廓、阴影等）来向任何全局 JSON 元素添加样式。
| JSON 属性 | 样式 | 作用 | CSS 等效项 |
|---|---|---|---|
styles.elements.color | 背景 | 定义链接背景颜色，以便在整个网站中使用。 | a:link { background-color } |
| 文本 | 定义链接文本颜色，以便在整个网站中使用。 | a:link { color } | |
styles.elements.:hover | 背景 | 定义悬停状态链接背景颜色，以便在整个网站中使用。 | a:hover { background-color } |
| 文本 | 定义悬停状态链接文本颜色，以便在整个网站中使用。 | a:hover { color } | |
styles.elements.:focus | 背景 | 定义焦点状态链接背景颜色，以便在整个网站中使用。 | a:focus { background-color } |
| 文本 | 定义焦点状态链接文本颜色，以便在整个网站中使用。 | a:focus { color } | |
styles.elements.:active | 背景 | 定义活动状态链接背景颜色，以便在整个网站中使用。 | a:active { background-color } |
| 文本 | 定义活动状态链接文本颜色，以便在整个网站中使用。 | a:active { color } | |
styles.elements.:visited | 背景 | 定义已访问状态链接背景颜色，以便在整个网站中使用。 | a:visited { background-color } |
| 文本 | 定义已访问状态链接文本颜色，以便在整个网站中使用。 | a:visited { color } |
自定义
此表显示了您可以使用theme.json文件的“自定义”部分创建的自定义属性示例。自定义部分生成的 CSS 自定义属性使用以下语法：--wp--custom--<variable-name>
| JSON 属性 | 语法 | 生成的自定义属性 |
|---|---|---|
settings.custom.spacing.padding | --wp--custom--{padding} | --wp--custom--padding |
settings.custom.typography | --wp--custom--{typography} | --wp--custom--typography |
settings.custom.fontWeight | --wp--custom--{font-weight} | --wp--custom--front-weight |
settings.custom.lineHeight | --wp--custom--{line-height} | --wp--custom--line-height |
settings.custom.someColor | --wp--custom--{some-color} | --wp--custom--some-color |
settings.custom.someParagraph | --wp--custom--{some-paragraph} | --wp--custom--some-paragraph |
区块级样式
所有全局级styles（包括elements）都可用于自定义单个区块的 CSS，以覆盖全局自定义。区块级样式比顶层样式（全局）具有优先级。
{
"version": 2,
"styles": {
// Top-level styles
// etc.
// Global-level styles
"elements": { },
// Block-level styles
"blocks": {
"core/<BLOCKNAME>": {
// Define or overwrite any global styles
"typography": {
"fontSize": " ",
"fontWeight": "",
"lineHeight": "",
"letterSpacing": "",
"textDecoration": "",
"textTransform": ""
},
// Define or overwrite any global elements styles
"elements": {
"link": {
"typography": {
"textDecoration": ""
},
"color": {
"text": " ",
"background-color": ""
},
":hover": {
"typography": {
"textDecoration": ""
},
"color": {
"text": "",
"background-color": ""
},
},
":focus": {
"typography": {
"textDecoration": ""
},
"color": {
"text": " ",
"background-color": ""
},
},
":active": {
"typography": {
"textDecoration": ""
},
"color": {
"text": " ",
"background-color": ""
},
},
":visited": {
"typography": {
"textDecoration": ""
},
"color": {
"text": "",
"background-color": ""
},
},
},
},
},
// Additional blocks
"core/<BLOCKNAME>": {
"typography": { },
// etc.
}
}
}
}| JSON 属性 | 样式 | 作用 |
|---|---|---|
.styles.core.<BLOCKNAME>.typography | font-size | 仅定义或覆盖此区块的全局字体大小。 |
font-weight | 仅定义或覆盖此区块的全局字体粗细。 | |
line-height | 仅定义或覆盖此区块的全局字体高度。 | |
letter-spacing | 仅定义或覆盖此区块的全局字母间距。 | |
text-decoration | 仅定义或覆盖此区块的全局文本修饰。 | |
text-transform | 仅定义或覆盖此区块的全局文本转换。 | |
.styles.core.<BLOCKNAME>.elements.link.typography | text-decoration | 仅定义或覆盖此区块的全局链接排版。 |
.styles.core.<BLOCKNAME>.elements.link.color` | 背景颜色 | 仅定义或覆盖此区块的全局链接背景颜色。 |
颜色 | 仅定义或覆盖此区块的全局链接文本颜色。 | |
.styles.core.<BLOCKNAME>.elements.link.:hover.typography | text-decoration | 仅定义或覆盖此区块的悬停链接状态的全局文本修饰。 |
.styles.core.<BLOCKNAME>.elements.link.:hover.color | 背景颜色 | 仅定义或覆盖此区块的悬停链接状态的全局背景颜色。 |
颜色 | 仅定义或覆盖此区块的悬停链接状态的全局背景颜色。 | |
.styles.core.<BLOCKNAME>.elements.link.:active.typography | text-decoration | 仅定义或覆盖此区块的活动链接状态的全局文本修饰。 |
.styles.core.<BLOCKNAME>.elements.link.:active.color | 背景颜色 | 仅定义或覆盖此区块的活动链接状态的全局背景颜色。 |
颜色 | 仅定义或覆盖此区块的活动链接状态的全局背景颜色。 | |
.styles.core.<BLOCKNAME>.elements.link.:focus.typography | text-decoration | 仅定义或覆盖此区块的焦点链接状态的全局文本修饰。 |
.styles.core.<BLOCKNAME>.elements.link.:focus.color | 背景颜色 | 仅定义或覆盖此区块的焦点链接状态的全局背景颜色。 |
颜色 | 仅定义或覆盖此区块的焦点链接状态的全局背景颜色。 | |
.styles.core.<BLOCKNAME>.elements.link.:visited.typography | text-decoration | 仅定义或覆盖此区块的已访问链接状态的全局文本修饰。 |
.styles.core.<BLOCKNAME>.elements.link.:visited.color | 背景颜色 | 仅定义或覆盖此区块的已访问链接状态的全局背景颜色。 |
颜色 | 仅定义或覆盖此区块的已访问链接状态的全局背景颜色。 |
有关区块级 CSS 自定义的使用案例示例，您可以参考最新的Twenty Twenty-Three 主题以及主题目录中的其他近期区块主题。
总结
恭喜你完成了这份关于 WordPress 块主题 CSS 和设置的完整指南！我们从简要介绍开始，将 WordPress 块主题与“经典”PHP 模板系统进行了比较。然后，我们谈到了 JSON，有趣的是，我们正是用它在 WordPress 块主题中“编写” CSS 的。
然后是theme.json，这是定义所有这些样式的实际文件，就像经典 PHP 主题中的style.css一样。该文件被严格地划分为若干部分，用于切换 WordPress 设置并在整个块主题中全局定义 CSS。
一旦我们完成了块主题设置和样式的定义，WordPress 样式引擎就会接管，将我们的 JSON 处理成一套组织良好的 CSS 样式，并在主题中使用。
在定义和管理 WordPress 中的样式方面，块主题的差异之大令人惊讶！所有这些都还在积极开发中，我们可能会看到theme.json中添加了新的功能和选项。
发现有什么新内容或变化了吗？请在评论中告诉我！