通过主题自定义核心块样式变化。

每次版本，WordPress中的全局样式都可以使您越来越轻松，更轻松地做。由于WordPress 6.2，您可以在theme.json – 或直接从站点编辑器中的样式接口。

这意味着您可以比以往任何时候都使用CSS更少的主题。

甚至 创建和编辑自定义块样式 从样式的接口中，网站编辑器可能会在WordPress 6.3的板岩上。但是，让我们专注于今天的可能性，而现在还没有超越自己。

这theme.json本文中显示的代码是指 块样式 作为“变化”（“块样式变化”的简短），但此功能不应与 块变化 或者 全球样式的变化。这是WordPress中不幸的命名惯例。这篇文章将这些称为“块样式”，以避免混乱。

自定义核心块样式

让我们从这种内置按钮块样式开始： 大纲。假设您正要为主题设计按钮，它将看起来像这样：

核心轮廓风格具有自己独特的设计，具有2px固体边框，圆角和大量的填充物。但这不是您现在所追求的。

假设您想要一个较厚的边框，方形的角和更紧密的间距。也许您甚至感到异想天开，决定抛出有趣的盒子阴影，如下所示：

在WordPress 6.2之前，您需要写一些CSS，也许是在 特定于块的样式表，进行您想要的更改。

但是，从6.2开始，您可以在中编辑样式属性theme.json – 您会更改按钮块的默认样式的同一位置。

这个示例theme.json代码专门针对轮廓样式 – 具有自定义边框，阴影和间距样式：

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"styles": {
		"blocks": {
			"core/button": {
				"variations": {
					"outline": {
						"border": {
							"color": "var( --wp--preset--color--black )",
							"radius": "0",
							"style": "solid",
							"width": "3px"
						},
						"shadow": "var( --wp--preset--shadow--outlined )",
						"spacing": {
							"padding": {
								"top": "0.5rem",
								"bottom": "0.5rem",
								"left": "1.5rem",
								"right": "1.5rem"
							}
						}
					}
				}
			}
		}
	}
}

这outlinedShadow Prest由WordPress注册，可用于任何主题。您也可以使用natural，deep，sharp，crisp，或 自定义影子预设。

在大多数情况下，块样式的支持应该让您将更多的自定义代码保留在theme.json文件。虽然在样式应该居住的地方肯定有不同的思想流派，但将其安置在标准中的一个令人信服的好处theme.json文件是用户自定义。

下面的屏幕截图证实您对大纲样式进行的自定义也出现在样式接口中：

您的主题用户可以看到样式的来源并根据需要进行调整。将您的样式规则放在自定义CSS文件中时，将丢失此好处。

可用的核心块样式

由于此功能仅适用于WordPress 6.2中的核心块样式，因此您仅限于自定义这些块及其样式：

• core/button：outline
• core/image：rounded
• core/quote：plain
• core/site-logo：rounded
• core/separator：wide，dots
• core/social-links：logos-only，pill-shape
• core/table：stripes
• core/tag-cloud：outline

还有更多

如果您认为这一切都限制了您现在使用的限制，那将是个好消息。还有更多！最后，块风格似乎是要引起应有的关注。

目前，请关注这两个潜在的增强，因为 WordPress 6.3开发周期 向前移动：

自定义CSS和元素样式支持

自定义块样式的当前缺点theme.json是您只能添加块支持的设计工具。

通常，这是版式，颜色，边框，阴影和间距。其他任何东西，您都回到了自定义样式表中 – 至少在此之前 CSS的增强 降落在WordPress中。该拉的请求还增加了对样式嵌套元素的支持。

即使这样，您仍然可以使用核心设计工具来探讨块样式 – 只是不要指望他们能处理每种情况。

自定义块样式支持

为了完善该功能，WordPress需要支持自定义块样式。这是一个 公开票提议支持，但它需要一个补丁。如果有兴趣的人可以合并对此的拉请请求，那么您将能够削减更多的自定义CSS。

该票还提议在theme.json，因此您甚至可以减少PHP或JavaScript（取决于您喜欢注册的块样式）。

道具 @玛丽鲍姆，@韦尔奇，和 @Mburridge 用于反馈和审查。