这是对可用样式属性的引用theme.json
。请查看 应用样式 文档学习如何将样式应用于主题。
边界
有两种方法用于使用border
样式属性。首先是针对块或元素的所有侧面,其属性中显示了表中的属性:
财产 | 类型 | CSS属性 |
---|---|---|
border.radius | 字符串,对象 | border-radius |
border.color | 字符串,对象 | border-color |
border.style | 字符串,对象 | border-style |
border.width | 字符串,对象 | border-width |
示例用法theme.json
:
{
"version": 2,
"styles": {
"border": {
"color": "#000000",
"style": "solid",
"width": "1px"
}
}
}
第二种方法是专门针对top
,right
,bottom
,和left
侧面:
财产 | 类型 | CSS属性 |
---|---|---|
border.<side>.color | 字符串,对象 | border-<side>-color |
border.<side>.style | 字符串,对象 | border-<side>-style |
border.<side>.width | 字符串,对象 | border-<side>-width |
示例用法theme.json
:
{
"version": 2,
"styles": {
"border": {
"top": {
"color": "#000000",
"style": "solid",
"width": "1px"
}
}
}
}
颜色
这color
样式属性使您可以为块或元素定义默认文本,背景和链接颜色:
财产 | 类型 | CSS属性 |
---|---|---|
color.text | 字符串,对象 | color |
color.background-color | 字符串,对象 | background-color |
color.link | 字符串,对象 | color (应用于嵌套<a> 元素) |
示例用法theme.json
:
{
"version": 2,
"styles": {
"blocks": {
"core/group": {
"color": {
"text": "#000000",
"background": "#ffffff",
"link": "#777777"
}
}
}
}
}
方面
这dimensions
样式属性使您可以为块或元素定义最小高度:
财产 | 类型 | CSS属性 |
---|---|---|
dimensions.minHeight | 字符串,对象 | min-height |
示例用法theme.json
:
{
"version": 2,
"styles": {
"blocks": {
"core/cover": {
"dimensions": {
"minHeight": "50vh"
}
}
}
}
}
筛选
这filter
样式属性使您可以为块或元素定义过滤器。当前,您可以设置默认的Duotone过滤器:
财产 | 类型 | CSS属性 |
---|---|---|
filter.duotone | 字符串,对象 | filter |
示例用法theme.json
:
{
"version": 2,
"styles": {
"blocks": {
"core/image": {
"filter": {
"duotone": "var(--wp--preset--duotone--default-filter)"
}
}
}
}
}
阴影
这shadow
样式属性使您可以为块或元素定义默认的框架样式:
财产 | 类型 | CSS属性 |
---|---|---|
shadow | 字符串,对象 | box-shadow |
示例用法theme.json
:
{
"version": 2,
"styles": {
"blocks": {
"core/heading": {
"shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)"
}
}
}
}
间距
这spacing
样式属性使您可以为块或元素定义默认差距,边距和填充:
财产 | 类型 | CSS属性 |
---|---|---|
blockGap | 字符串,对象 | margin-top ,gap |
margin.<side> | 字符串,对象 | margin-<side> |
padding.<side> | 字符串,对象 | padding-<side> |
您可以定义各个方面(top
,right
,bottom
,left
) 为了margin
和padding
样式属性。
示例用法theme.json
:
{
"version": 2,
"styles": {
"spacing": {
"blockGap": "2rem",
"margin": {
"top": "2rem",
"bottom": "2rem"
},
"padding": {
"left": "2rem",
"right": "2rem"
}
}
}
}
排版
这typography
样式属性使您可以为块或元素定义默认字体和与文本相关的样式:
财产 | 类型 | CSS属性 |
---|---|---|
fontFamily | 字符串,对象 | font-family |
fontSize | 字符串,对象 | font-size |
fontStyle | 字符串,对象 | font-style |
fontWeight | 字符串,对象 | font-weight |
letterSpacing | 字符串,对象 | letter-spacing |
lineHeight | 字符串,对象 | line-height |
textColumns | 细绳 | columns |
textDecoration | 字符串,对象 | text-decoration |
writingMode | 字符串,对象 | writing-mode |
示例用法theme.json
:
{
"version": 2,
"styles": {
"blocks": {
"core/paragraph": {
"typography": {
"fontFamily": "Georgia, serif",
"fontSize": "1.25rem",
"fontStyle": "normal",
"fontWeight": "500",
"letterSpacing": "0",
"lineHeight": "1.6",
"textDecoration": "none"
}
}
}
}
}
CSS
这css
属性使您可以直接编写自定义CSStheme.json
对于块或元素:
财产 | 类型 | CSS属性 |
---|---|---|
css | 细绳 | – |
示例用法theme.json
:
{
"version": 2,
"styles": {
"blocks": {
"core/gallery": {
"css": "--wp--style--gallery-gap-default: 1rem;"
}
}
}
}
深入了解如何使用css
样式属性,阅读 每个块CSStheme.json
在WordPress开发人员博客上。