间距

间距是网页设计中最复杂的组成部分之一。它涉及将边距、内边距、间隙、行高、字体大小等元素组合成和谐的流程。要做好这一点，需要敏锐的眼光以及对这些组件如何协同工作的基础理解。

theme.json 中的 settings.spacing 属性专门涵盖与边距、内边距和间隙相关的设置。

此手册还提供了有关 字体设置 和将样式 应用于块 的文档，这两者都在管理您整体设计的间距方面发挥作用。

间距设置

settings.spacing 对象具有您可以配置的多个属性：

• blockGap: 是否启用支持该选项的块的块间距。可以是布尔值 (true/false)。默认为 null。如果设置为 null，WordPress 生成的 CSS 也会被禁用。
• margin: 是否启用支持块的边距选项。默认为 false。
• padding: 是否启用支持块的内边距选项。默认为 false。
• customSpacingSize: 是否允许用户为支持的块输入自定义间距值。默认为 true。
• spacingScale: 用于定义自定义间距比例的配置对象。WordPress 定义了一个默认比例，包含七个步骤，每个步骤递增 1.5rem。
• spacingSizes: 一个自定义大小对象的数组，可能会覆盖间距比例或添加到其中。
• units: 用户在选择添加自定义间距时可以选择的可能 CSS 单位的数组。

以下是默认 WordPress theme.json 中的间距设置：

{
	"version": 2,
	"settings": {
		"spacing": {
			"blockGap": null,
			"customSpacingSize": true,
			"margin": false,
			"padding": false,
			"spacingScale": {
				"operator": "*",
				"increment": 1.5,
				"steps": 7,
				"mediumStep": 1.5,
				"unit": "rem"
			},
			"spacingSizes": [],
			"units": [ "px", "em", "rem", "vh", "vw", "%" ]
		}
	}
}

启用或禁用间距选项

正如上一节中的默认设置所指出的那样，有几个设置仅仅是为了启用或禁用用户界面中的元素。在本节中，您将学习如何配置这些内容。

启用块间距（块间隙）

在 WordPress 中，“块间隙”指的是页面上块之间的间距。在大多数情况下，这是块之间的垂直间距。但当块设置为水平弹性布局或网格布局时，它也可以指水平间距。

在流式布局（默认布局）中，块间隙是使用 CSS margin-top 属性应用于兄弟元素的。在弹性或网格布局中，它是使用 CSS gap 属性应用的。

如果未完全禁用此设置（默认情况），WordPress 将自动输出块间隙的 CSS。

您可以在 样式文档 中了解更多关于定义块间隙样式的信息，但了解术语的基本知识应有助于您决定如何与此选项配合使用。

settings.spacing.blockGap 的主要目的是启用或禁用支持它的块的块间距控件的用户界面。您可以通过将其设置为 true 或 false 来实现这一点。

但是，您也可以将其保留为 null（默认值）。这将禁用用户界面。此外，它还会移除 WordPress 生成的块间距 CSS。

除非特殊情况，否则通常不建议将此设置为默认的 null 值。通常，您希望将一致的间距作为设计垂直节奏的一部分。如果设置为 null，您需要通过自定义 CSS 手动处理该问题。

使用下表作为参考，以确定要分配给 settings.spacing.blockGap 的值：

现在尝试配置该设置。打开您的 theme.json 文件并将属性设置为 true：

{
	"version": 2,
	"settings": {
		"spacing": {
			"blockGap": true
		}
	}
}

对于支持该属性的块，您现在应该能看到块间距控件出现。这是 Post Template 块上的外观截图：

由于 WordPress 中布局系统的工作方式，它将输出特定于各个容器的 CSS 来处理嵌套在这些容器内的块之间的间隙。对于截图示例，CSS 如下所示：

.wp-container-17.wp-container-17 > :first-child:first-child {
	margin-block-start: 0;
}
	
.wp-container-17.wp-container-17 > * {
	margin-block-start: var(--wp--preset--spacing--plus-4);
	margin-block-end: 0;
}

当然，ID (17) 和值将根据具体情况有所不同。

启用边距和内边距

边距和内边距设置要简单得多。它们默认都是禁用的，您可以通过在 theme.json 中将它们的值设置为 true 来启用它们：

{
	"version": 2,
	"settings": {
		"spacing": {
			"margin": true,
			"padding": true
		}
	}
}

这将使边距和内边距控件出现在支持块的侧边栏检查器控件中：

当然，您可以自由地将这两个值保留为默认的 false 或根据您的喜好进行配置。

禁用用户定义的间距大小

当启用 blockGap、margin 或 padding 间距设置中的任何一个时，WordPress 将为支持它们的块输出设置这些值的用户界面。默认情况下，用户可以从预设间距大小的列表中进行选择（见下文“间距比例和大小”）或输入自定义值。

在此截图中，您可以看到为按钮块选择了自定义块间距设置：

您可能希望限制用户使用您为主题预定义的间距比例或大小。如果您希望确保整个设计中的间距一致，这通常是个好主意。

为此，您必须将 customSpacingSizes 设置设置为 false。这将禁用编辑器 UI 中的自定义间距选项，但保留用于主题定义大小的控件：

{
	"version": 2,
	"settings": {
		"spacing": {
			"customSpacingSize": false
		}
	}
}

禁用自定义间距大小后，按钮块示例中的块间距选项将仅限于主题的预设大小：

定义允许的间距单位

如果您选择启用上一节中涵盖的 settings.spacing.customSpacingSize 选项，您将需要做出另一个选择：您的主题将允许哪些 CSS 单位值？

默认情况下，WordPress 让用户从可能的 CSS 单位的子集中进行选择（CSS 规范中有数十种）。要选择您想要支持的单位，您必须将它们添加到 theme.json 中的 settings.spacing.units 数组中（显示默认值）：

{
	"version": 2,
	"settings": {
		"spacing": {
			"units": [ "px", "em", "rem", "vh", "vw", "%" ]
		}
	}
}

您当前可以从中选择的允许单位是：

• px
• %
• em
• rem
• vw
• vh
• vmin
• vmax
• ch
• ex
• cm
• mm
• in
• pc
• pt

自 WordPress 6.3 起，允许的单位仅限于上述列表。有一个 开放工单 旨在扩展这些以支持更多现代单位。

间距比例和大小

您应该在 theme.json 文件中配置的最重要的内容之一是您的间距预设。WordPress 将生成这些预设作为 CSS 自定义属性，并在编辑器和前端中加载它们。

大多数设计师都会使用某种标准缩放系统来处理间距，WordPress 为您提供使用任何您选择的系统的灵活性。

有两种方法可以注册您的间距预设：

• spacingScale: 基于您的配置值生成的比例。
• spacingSizes: 完全自定义定义的间距大小。

从技术上讲，您可以同时使用这两种方法，混合搭配它们。但通常建议选择其中一种以简化操作。

间距预设作为块间距、边距和内边距块控件（支持它们的块）的选项出现。这意味着您可以向用户提供特定于您主题的间距选项。您还可以在 theme.json 或自定义 CSS 中的 样式 部分使用这些预设。

WordPress 生成一个默认的间距比例，如下表所示：

这个比例不太可能匹配您的设计。因此，您将希望选择一种方法来覆盖这些默认值。

自定义间距比例

WordPress 允许主题作者通过提供一组配置说明来创建自定义间距比例。比例中的每个步骤都会生成一个自定义 CSS 属性，其标识符为 --wp--preset--spacing--{step}（无论其值如何，步骤都以 10 递增）。

spacingScale 对象具有主题可以配置的五个子设置：

• operator: 用于增加比例的运算符。可用选项为 +（加法）和 *（乘法）。默认值为 *。
• increment: 与 operator 设置结合使用时，用于增加比例的数字。默认值为 1.5。
• steps: 比例中的步骤总数。默认值为 7。
• mediumStep: 比例的中等值。默认值为 1.5。
• unit: 有效的 CSS 间距单位。可用选项为 px、em、rem、vh、vw 和 %。默认值为 rem。

以下示例是一个具有七个步骤的自定义比例，每个步骤递增 0.25rem：

{
	"version": 2,
	"settings": {
		"spacing": {
			"spacingScale": {
				"operator": "+",
				"increment": 0.25,
				"steps": 7,
				"mediumStep": 1,
				"unit": "rem"
			}
		}
	}
}

正如截图所示，您应该看到内边距、边距和块间距控件的范围滑块以设置您注册的值的：

当有七个或更少的间距预设时，界面将显示用于间距控件的范围滑块。但超过七个则显示下拉选择。这适用于此处使用的 spacingScale 方法和下一节中的 spacingSizes 方法。

下表代表您的自定义间距比例（与默认比例进行比较以查看变化）：

当 WordPress 生成 CSS 时，mediumStep 值始终分配给 --wp--preset--spacing--50 预设，比例中的其他预设标识符从该中间数字向上/向下以 10 递增。

间距比例永远不会低于 --wp--preset--spacing--10。对于超过 10 个步骤的比例，比例的底部不会生成预设，因为 mediumStep 始终设置为 --wp--preset--spacing--50。

禁用间距比例

如果您想完全禁用 WordPress 的间距比例，您可以在 theme.json 中将 steps 设置为 0：

{
	"version": 2,
	"settings": {
		"spacing": {
			"spacingScale": {
				"steps": 0
			}
		}
	}
}

这在选择注册完全自定义间距大小时很有用，如下节所述。

自定义间距大小

如果您希望对间距选项进行更精确的控制，您可以构建单独的间距大小，而不是使用 WordPress 间距比例系统。这提供了对每个选项的名称、大小和标识符的控制。

spacingSizes 属性允许您定义大小对象的数组。每个大小对象接受三个值：

• name: 大小的可读标题，可以翻译。
• size: 有效的 CSS 大小。这可以是数字和单位、使用 clamp() 的流体大小或对其他自定义 CSS 属性的引用。
• slug : 大小的标识符，将附加到生成的 CSS 自定义属性：--wp--preset--spacing--{slug}。

以下是在 theme.json 中创建五个步骤的示例比例，每个步骤递增 0.25rem：

{
	"version": 2,
	"settings": {
		"spacing": {
			"spacingSizes": [
				{
					"name": "Step 1",
					"size": "0.25rem",
					"slug": "10"
				},
				{
					"name": "Step 2",
					"size": "0.5rem",
					"slug": "20"
				},
				{
					"name": "Step 3",
					"size": "0.75rem",
					"slug": "30"
				},
				{
					"name": "Step 4",
					"size": "1rem",
					"slug": "40"
				},
				{
					"name": "Step 5",
					"size": "1.25rem",
					"slug": "50"
				}
			]
		}
	}
}

您应该看到内边距、边距和块间距控件的范围滑块以设置您注册的值的，如下所示：

下表代表您的自定义间距大小：

创建流体大小

如果您想使用流体间距，您必须使用 settings.spacing.spacingSizes 方法来控制大小预设。

要使用流体大小，您只需将它们作为 settings.spacing.spacingSizes 下每个大小对象的 size 参数添加即可。支持 clamp()、min()、max() 和其他有效的 CSS 值。

以下是在 theme.json 中作为单独大小注册的七步流体间距比例的示例：

{
	"version": 2,
	"settings": {
		"spacing": {
			"spacingSizes": [
				{
					"name": "Fluid Scale -3",
					"size": "clamp( 0.31rem, 0.11vw + 0.28rem,  0.35rem )",
					"slug": "minus-3"
				},
				{
					"name": "Fluid Scale -2",
					"size": "clamp( 0.47rem, 0.16vw + 0.42rem,  0.53rem )",
					"slug": "minus-2"
				},
				{
					"name": "Fluid Scale -1",
					"size": "clamp( 0.71rem, 0.25vw + 0.63rem,  0.79rem )",
					"slug": "minus-1"
				},
				{
					"name": "Fluid Scale +/- 0 (Base)",
					"size": "clamp( 1.06rem, 0.37vw + 0.95rem,  1.19rem )",
					"slug": "base"
				},
				{
					"name": "Fluid Scale +1",
					"size": "clamp( 1.20rem, 0.85vw + 0.94rem,  1.48rem )",
					"slug": "plus-1"
				},
				{
					"name": "Fluid Scale +2",
					"size": "clamp( 1.34rem, 1.5vw + 0.89rem,  1.86rem )",
					"slug": "plus-2"
				},
				{
					"name": "Fluid Scale +3",
					"size": "clamp( 1.86rem, 3.7vw + -0.05rem,  2.32rem )",
					"slug": "plus-3"
				}
			]
		}
	}
}

这导致以下值，如下表所示：