这是对可用样式属性的引用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"
		}
	}
}

第二种方法是专门针对toprightbottom,和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-topgap
margin.<side>字符串,对象margin-<side>
padding.<side>字符串,对象padding-<side>

您可以定义各个方面(toprightbottomleft) 为了marginpadding样式属性。

示例用法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开发人员博客上。

By zhuon

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注