云策 WordPress 开发者社区

社区新闻

在 WordPress 6.6 中混合搭配样式、色彩与版式

查看官方原文 ↗ 发布于

WordPress 6.6 为那些为分发或客户构建区块主题的用户提供了一系列新功能。其中最令人兴奋的功能之一，就是能够为用户注册自定义的色彩和版式变体以供选择。

最棒的部分是什么？ 你无需学习任何新方法来创建这些变体。它们建立在您可能已经熟悉的现有样式变体系统之上。

在本教程中，您将学习如何修改Twenty Twenty-Four 主题来创建这些色彩和版式变体，从而让您的用户能够混合搭配样式。然后，您就可以开始将这些技术应用到您自己的主题中。

什么是色彩和版式样式变体？

色彩和版式变体是 WordPress 已经发布多个版本的现有全局样式变体系统的子集。此前，主题（或“全局”）样式变体允许您定义可以覆盖任何内容的 theme.json 替代方案，包括色彩、版式、间距等。

但色彩和版式变体的范围仅限于——顾名思义——色彩和版式。

注册后，这些变体会作为新选项出现在外观 > 编辑器 > 样式侧边栏面板及其他位置：

WordPress 站点编辑器，左侧打开了样式面板，显示样式变体、调色板和版式选项。右侧显示网站预览。

基本上，这是为您的用户创建精选色彩和版式预设的基于区块的方式。这绝不是一个新概念（主题开发者多年来一直在构建此类选项），但它是一种提供这些主题选项的标准方法。

全局样式的这一新增功能，基于您主题的设计系统，为您的主题用户提供了更大的灵活性。色彩和版式变体也可以与主题样式变体混合搭配。

关于组织样式变体的说明

在 WordPress 6.6 之前，您只能在主题的 /styles 文件夹中注册完整的主题样式变体。但随着区块样式变体的引入以及新的色彩和版式样式变体，样式变体的类型已增加到四种。

如果您将所有内容都放在同一层级的单个文件夹中，管理起来可能会突然变得困难。

幸运的是，WordPress 在组织 /styles 文件夹时支持子文件夹。这些子文件夹的组织结构可以完全自定义，但我建议采用类似以下的结构：

  • /styles
    • /block 或 /section
    • /color
    • /global 或 /theme
    • /typography

本教程重点介绍色彩和版式变体，因此将使用 /styles/color 和 /styles/typography 文件夹。

如何注册色彩变体

当 WordPress 发现一个仅包含色彩设置或样式的样式变体时，它会自动将其识别为色彩样式变体。基本上，这意味着它会在用户界面中创建一个选项，供用户选择由变体定义的特定色彩设计。

从技术上讲，您并不需要真正“注册”任何东西。您只需创建一个变体并将其放入您的主题中。

那么，让我们构建一个翡翠色调色板，并使其可供用户使用。为此，在 Twenty Twenty-Four 主题（或者如果您愿意，在子主题中）创建一个名为 /styles/color/emerald.json 的新文件：

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"title": "Emerald",
	"settings": {
		"color": {
			"palette": [
				{
					"color": "#ecfdf5",
					"name": "Base",
					"slug": "base"
				},
				{
					"color": "#d1fae5",
					"name": "Base / Two",
					"slug": "base-2"
				},
				{
					"color": "#022c22",
					"name": "Contrast",
					"slug": "contrast"
				},
				{
					"color": "#064e3b",
					"name": "Contrast / Two",
					"slug": "contrast-2"
				},
				{
					"color": "#065f46",
					"name": "Contrast / Three",
					"slug": "contrast-3"
				},
				{
					"color": "#34d399",
					"name": "Accent",
					"slug": "accent"
				},
				{
					"color": "#10b981",
					"name": "Accent / Two",
					"slug": "accent-2"
				},
				{
					"color": "#0f766e",
					"name": "Accent / Three",
					"slug": "accent-3"
				}
			]
		}
	}
}

在这种情况下，代码仅更改调色板。您还可以更进一步，将特定色彩应用到元素或区块。

根据我目前对该功能的经验，最好在 theme.json 中建立一个完善的设计系统，在色彩变体中只更改 settings.color.palette。这样，您需要管理的 JSON 代码就少得多。

除了站点编辑器侧边栏，已注册的色彩变体也会出现在样式用户界面的色彩 > 调色板选项下。在那里，您将看到变体出现在调色板面板下方：

WordPress 站点编辑器，预览中显示主页。右侧侧边栏显示了一系列调色板。

当您或用户选择“翡翠”色彩变体时，它将应用该变体的调色板，覆盖 theme.json（或所选主题样式变体）中定义的调色板。

如何注册版式变体

与色彩变体类似，如果版式变体仅包含版式设置或样式，WordPress 会将其识别为版式变体。当它找到这样的变体 JSON 文件时，会自动在用户界面中创建一个选项，供用户选择版式集。

由于我们在此练习中使用的是 Twenty Twenty-Four，让我们构建一个名为“Instrument + Mono”的版式变体。它将使用主题捆绑的 Instrument Sans 网页字体作为标题，并使用等宽字体堆栈作为正文。

在您的主题中创建一个名为 /styles/typography/instrument-mono.json 的新文件，并将以下 JSON 复制到其中：

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"title": "Instrument + Mono",
	"settings": {
		"typography": {
			"fontFamilies": [
				{
					"fontFace": [
						{
							"fontFamily": "Instrument Sans",
							"fontStyle": "normal",
							"fontWeight": "400 700",
							"src": [
								"file:./assets/fonts/instrument-sans/InstrumentSans-VariableFont_wdth,wght.woff2"
							]
						},
						{
							"fontFamily": "Instrument Sans",
							"fontStyle": "italic",
							"fontWeight": "400 700",
							"src": [
								"file:./assets/fonts/instrument-sans/InstrumentSans-Italic-VariableFont_wdth,wght.woff2"
							]
						}
					],
					"fontFamily": ""Instrument Sans", sans-serif",
					"name": "Instrument Sans",
					"slug": "heading"
				},
				{
					"fontFamily": "ui-monospace, 'Fira Code', 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace",
					"name": "Monospace",
					"slug": "body"
				},
				{
					"fontFamily": "-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif",
					"name": "System Sans-serif",
					"slug": "system-sans-serif"
				},
				{
					"fontFamily": "Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
					"name": "System Serif",
					"slug": "system-serif"
				}
			]
		}
	},
	"styles": {
		"blocks": {
			"core/pullquote": {
				"typography": {
					"fontSize": "var:preset|font-size|large",
					"fontStyle": "normal",
					"fontWeight": "normal",
					"lineHeight": "1.2"
				}
			},
			"core/quote": {
				"typography": {
					"fontFamily": "var:preset|font-family|heading",
					"fontSize": "var:preset|font-size|large",
					"fontStyle": "normal"
				}
			},
			"core/site-title": {
				"typography": {
					"fontWeight": "400"
				}
			},
			"core/navigation": {
				"typography": {
					"fontWeight": "400"
				}
			}
		},
		"elements": {
			"button": {
				"typography": {
					"fontFamily": "var:preset|font-family|heading",
					"fontSize": "var:preset|font-size|small",
					"fontStyle": "normal"
				}
			}
		}
	}
}

如您所见，这段代码比之前的色彩变体更进一步。它不仅定义了 settings.typography.fontFamilies 下的预设，还将特定的版式更改应用到了一些元素和区块上。

已注册的版式变体将出现在样式用户界面的版式 > 预设面板下，如下图所示：

WordPress 站点编辑器，预览中显示主页。右侧侧边栏显示了版式预设，其中一个被选中。

当选择版式变体时，其 JSON 设置和样式将覆盖来自 theme.json 或所选主题样式变体的设置和样式。

目前存在一个问题，即网页字体在站点编辑器中无法正确加载，除非用户保存样式变体并刷新屏幕。目前已知的解决方法是，通过主 theme.json 注册所有字体外观，或者通过自定义代码注入 @font-face CSS 规则。

混合、搭配并创建多种变体

色彩和版式变体与许多经典主题中可用的选项非常相似。主题作者会创建精选的预设，让用户无需自行挑选单个颜色或字体即可快速进行更改。这使得混合搭配变得容易，并且确信不会破坏任何东西。

这种新技术将这种能力带到了区块主题中，为这个长期使用的主题功能创造了对等性和标准。

您创建的变体越多，您的用户为获得他们想要的设计所需做的工作就越少。所以，尽情发挥，创建大量变体，并在此过程中享受乐趣。