间距

间距是Web设计中最复杂的部分之一。它涉及将边距，填充，间隙，线高，字体尺寸等组合在一起，以融合和谐流程。做得很好，需要敏锐的眼睛，并且对这些碎片中的每一个如何融合在一起。

这settings.spacing财产中theme.json涵盖与边距，填充和间隙有关的设置。

本手册还提供了有关的文档 排版设置 和 应用样式 到块，这两者都在为整体设计的间距争吵中扮演角色。

间距设置

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

• blockGap： 是否启用 块间距 支持它的块的选项。可以是布尔值（true/false）。默认为null。如果设置为null，则WordPress的生成CSS也将被禁用。
• margin： 是否启用 利润 支持块的选项。默认为false。
• padding： 是否启用 填充 支持块的选项。默认为false。
• customSpacingSize： 是否允许用户为受支持的块输入自定义间距值。默认为true。
• spacingScale： 用于定义自定义间距量表的配置对象。WordPress通过七个步骤定义默认量表，从1.5rem。
• spacingSizes： 可以覆盖间距刻度或添加的自定义大小对象的数组。
• units： 在添加自定义间距时，用户可以从用户可以选择的一系列可能的CSS单元。

这是间距设置看起来像默认的WordPresstheme.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属性到同级元素。在Flex或Grid布局中，使用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
		}
	}
}

对于支持该属性的块，您现在应该看到 块间距 控制出现。这是邮政模板块上的外观的屏幕截图：

由于布局系统在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）和价值会逐案不同。

实现边距和填充

边距和填充设置更加简单。默认情况下它们都被禁用，您可以通过将其值设置为true在theme.json：

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

这将使 利润 和 填充 在其检查员控件中显示的控件显示了侧栏的检查器控件：

当然，您可以随意将这两个都留给false或将它们配置为您的喜好。

禁用用户定义的间距

当任何一个blockGap，margin，或者padding启用了间距设置，WordPress将输出一个用户界面，以设置支持它们的块的块。默认情况下，用户可以从预设间距列表中进行选择（请参阅下面的“间距量表和大小”）或输入自定义值。

在此屏幕截图中，您可以看到有一个自定义 块间距 为按钮块选择的设置：

您可能需要将用户限制为预定义的间距量表或主题的尺寸。如果您想确保在整个设计中确保稳定的间距，这通常是一个好主意。

为此，您必须设置customSpacingSizes设置为false。这会禁用编辑UI中的自定义间距选项，但为主题定义的尺寸提供了控件：

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

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

定义允许的间距

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

默认情况下，WordPress使用户可以从可能的CSS单元的子集中进行选择（CSS规范中有数十个）。要选择要支持的单元，必须将它们添加到settings.spacing.units阵列进theme.json（默认显示）：

{
	"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下一节中的方法。

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

这mediumStep值始终分配给--wp--preset--spacing--50当WordPress生成CSS时，预设量表中的其他预设sl段以10的增量向上/向上延伸。

间距永远不会超过--wp--preset--spacing--10。对于超过10个步骤的秤，量表的底端不会产生预设，因为mediumStep总是设置为--wp--preset--spacing--50。

禁用间距

如果您想完全禁用WordPress的间距量表，则可以设置steps到0在theme.json：

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

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

自定义间距尺寸

如果您需要对间距选项进行更精确的控制，则可以构建单个间距大小，而不是使用WordPress间距量表系统。这提供了对每个选项的名称，大小和sl的控制权。

这spacingSizes属性使您可以定义大小对象的数组。每个大小对象都接受三个值：

• name： 大小的人类可读标题，可以翻译。
• size： 有效的CSS尺寸。这可以是一个数字和单位，使用clamp()，或引用另一个自定义CSS属性。
• slug ： 尺寸的sl，将附加到生成的CSS自定义属性：--wp--preset--spacing--{slug}。

以下是创建五步量表的示例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控制大小预设的方法。

要使用流体尺寸，您只需要添加它们size每个大小对象的参数settings.spacing.spacingSizes。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"
				}
			]
		}
	}
}

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