云策 WordPress 开发者社区

社区新闻

关于方块主题间距你需要知道的一切

查看官方原文 ↗ 发布于

在设计中，间距就是一切。间距太小，文本会显得拥挤且难以阅读；间距太大，元素会感觉像是漂浮在外。与生活中的大多数事情一样，你需要一个平衡点，而在构建网站时，间距在实现这种平衡方面起着至关重要的作用。

传统上，网页设计师在样式表中处理间距。有些设计师会花费数小时精心调整间距，以使一切看起来都恰到好处。然后，当他们添加一个具有不同 x 高度的字体时，可能会全部推倒重来。另一些设计师则会基于一个系统（可能是一个设计框架）进行构建，这个系统非常符合他们的风格，以至于他们将其用于大多数项目。无论哪种方式，通常都意味着直接使用 CSS。

对于区块主题，你将在 theme.json 文件中设置大部分间距（经典/混合主题也可能支持此功能）。如果你是区块主题的新手，切换到 JSON 可能会感觉有点陌生。但一旦你打开文件，你会发现样式规则看起来更像 CSS 规则，而不是你想象的那样；主要区别在于语法。而且，最终，每个样式配置都会映射到输出的 CSS 属性上。

本教程将引导你配置全局间距设置以及 theme.json 中的边距（margin）和内边距（padding）等样式属性。它还将概述一些额外的技巧，例如添加上下文间距和自定义 Spacer 块。

全局设置和样式

主题可以通过其 theme.json 文件定义全局设置和样式。settings.spacing 对象允许你配置用户界面选项，并定义用户可以应用到许多其他位置的预设值。在 styles 对象下，你可以在根级别、元素级别或区块级别使用间距预设。

配置全局设置

theme.json 中的 settings.spacing 键是间距的配置对象。每个选项都允许你做以下两件事之一：

  • 在界面中启用或禁用某个选项
  • 创建一组预设或选项，用户可以在界面中选择或在区块或元素样式中使用

以下是截至 WordPress 6.2 的可用设置完整列表：

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

其中大部分配置对你来说应该很简单。你将在接下来的章节中了解更多关于两个最复杂的设置 spacingScale 和 spacingSizes。

以下是一个 theme.json 示例，为用户启用了所有设置。它还包括一组自定义间距尺寸：

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"spacing": {
			"blockGap": true,
			"margin": true,
			"padding": true,
			"customSpacingSize": true,
			"spacingScale": {
				"steps": 0
			},
			"spacingSizes": [
				{
					"name": "Step 1 - Fixed",
					"size": "0.25rem",
					"slug": "10"
				},
				{
					"name": "Step 2 - Fixed",
					"size": "0.5rem",
					"slug": "20"
				}
			],
			"units": [
				"%",
				"px",
				"em",
				"rem",
				"vh",
				"vw"
			]
		}
	}
}

自定义间距比例

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

CSS 自定义属性 CSS 值
--wp--preset--spacing--20 0.44rem
--wp--preset--spacing--30 0.67rem
--wp--preset--spacing--40 1rem
--wp--preset--spacing--50 1.5rem
--wp--preset--spacing--60 2.25rem
--wp--preset--spacing--70 3.38rem
--wp--preset--spacing--80 5.06rem

如果你的主题启用了对 blockGap、margin 或 padding 设置的支持，你的用户可以从这个值范围中选择。你也可以在 theme.json 文件的 styles 部分或你的样式表中使用这些值——只需引用 CSS 自定义属性即可。

如果 WordPress 中的默认比例不适合你的设计，你也可以配置自定义间距比例。如何配置？ 配置 settings.spacing.spacingScale。它接受以下属性：

  • operator: (字符串) 用于递增比例的操作符，可以是乘法 * 或加法 +。默认为 *。
  • increment: (整数) 用于递增比例的数值。默认值为 1.5。
  • steps: (整数) 比例中的总步数。默认值为 7。
  • mediumStep: (整数) 比例的中间值。默认值为 1.5。
  • unit: (字符串) 有效的 CSS 间距单位（例如 px、em、rem、vh、vw 和 %）。默认值为 rem。

以下 theme.json 示例创建了一个包含七个步长的比例，以 0.25rem 递增：

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"spacing": {
			"spacingScale": {
				"operator": "+",
				"increment": 0.25,
				"steps": 7,
				"mediumStep": 1,
				"unit": "rem"
			}
		}
	}
}

这段代码将创建一个与原始 WordPress 比例大不相同的比例。将默认值与下表中的值进行比较：

CSS 自定义属性 CSS 值
--wp--preset--spacing--20 0.25rem
--wp--preset--spacing--30 0.5rem
--wp--preset--spacing--40 0.75rem
--wp--preset--spacing--50 1rem
--wp--preset--spacing--60 1.25rem
--wp--preset--spacing--70 1.5rem
--wp--preset--spacing--80 1.75rem

虽然 settings.spacing.spacingScale 可以轻松地动态创建比例，但它也有局限性。它确实允许你使用视口单位，但不允许你计算自己的流体尺寸。因此，你可能希望退出间距比例并注册自定义尺寸。

注册自定义间距尺寸

如果你想更精确地控制间距，可以选择注册自定义尺寸，而不是使用比例。

首先在 settings.spacing.spacingSizes 中定义一个预设数组。该数组应包含定义单个尺寸并设置以下属性的对象：

  • name: (字符串) 间距尺寸的人类可读标题，可以翻译成其他语言。
  • size: (字符串) 有效的 CSS 尺寸。可以是数字和单位、使用 clamp() 的流体尺寸，或对另一个自定义 CSS 属性的引用。
  • slug: (字符串) 尺寸的别名，将附加到生成的 CSS 自定义属性：--wp--preset--spacing--{slug}。

以下代码示例注册了五个间距尺寸的混合，包括固定尺寸和流体尺寸。另外，请注意 settings.spacingScale.steps 设置为 0，这会禁用默认的核心比例。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"spacing": {
			"spacingScale": {
				"steps": 0
			},
			"spacingSizes": [
				{
					"name": "Step 1 - Fixed",
					"size": "0.25rem",
					"slug": "10"
				},
				{
					"name": "Step 2 - Fixed",
					"size": "0.5rem",
					"slug": "20"
				},
				{
					"name": "Step 3 - Fixed",
					"size": "0.75rem",
					"slug": "30"
				},
				{
					"name": "Step 4 - Fixed",
					"size": "1rem",
					"slug": "40"
				},
				{
					"name": "Step 5 - Fluid",
					"size": "clamp(1.125rem, 1.25vw + 0.7rem, 1.25rem)",
					"slug": "50"
				}
			]
		}
	}
}

这些选项应作为区块间距、边距和内边距控件的选项出现在支持的区块中，如下图所示：

WordPress 文章编辑器显示一个带有渐变背景的 Cover 块。在侧边栏面板中，区块间距选项设置为流体尺寸。

你可以根据需要注册任意数量的自定义尺寸。但一旦你注册超过七个，用户界面将从范围滑块变为下拉选择字段。

从技术上讲，你可以同时使用间距比例和自定义尺寸。但通常选择其中一种比另一种更不麻烦。不过，有时你可能需要在生成的比例之上再添加一个额外的自定义尺寸。

配置全局样式

在前面的章节中，你学习了如何配置自定义间距选项和预设。这些步骤很重要，因为现在你将使用刚刚构建的内容作为在 theme.json 中样式化区块和元素的基础——也许还可以用于在自定义 CSS 中访问预设。

全局样式入门

theme.json 中的 styles 对象控制根元素、区块和受支持的 HTML 元素的外观。（有关其工作原理的更多信息，请阅读主题手册中的指南。）

现在，你需要知道可以在以下级别添加自定义样式：

  • styles: 在此处应用的任何样式都将直接添加到文档的根元素。
  • blocks: 包含具有自定义样式的区块对象。这些对象也可以包含一个elements对象，用于样式化特定区块内的元素。
  • elements: 包含具有自定义样式的 HTML 元素对象。

这应该像以下 theme.json 示例一样构建：

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"styles": {
		"blocks": {},
		"elements": {}
	}
}

间距对象

当你为根元素、区块或受支持的 HTML 元素设置样式时，必须添加一个 spacing 对象来包含 blockGap、margin 和 padding 属性。

以下是此对象可能的样子示例：

{
	"spacing": {
		"blockGap": "2rem",
		"margin": {
			"top": "1rem",
			"bottom": "1rem"
		},
		"padding": {
			"top": "2rem",
			"bottom": "2rem",
			"right": "1rem",
			"left": "1rem"
		}
	}
}

你添加的值必须是有效的 CSS，并且包含对通过 theme.json 中的 settings.spacing 配置的 CSS 自定义属性的引用。margin 和 padding 都支持设置所有四个边，但 blockGap 样式应该只是一个单一的值。

创建垂直节奏（区块间距）

创建令人愉悦的设计的一个重要部分是使页面的垂直节奏恰到好处。当然，间距只是一个方面；你的排版，特别是行高，也同样重要。本教程假设你知道要应用什么值，并将重点放在如何将这些值添加到你的主题中。

你将学习如何控制区块之间的间距，如下图所示段落之间的空白：

WordPress 文章编辑器，包含几段示例文本。

在传统设计中，你可能会在 CSS 中为所有块级 HTML 元素定义 margin-top，以保持它们之间的间距一致。在 WordPress 中，此属性名为 blockGap。本质上，这两种方法的工作原理相同。

从技术上讲，blockGap 属性根据区块是处于流式布局还是弹性布局，分别映射到 CSS 的 margin-top 和 gap 属性。因此，它字面上就是区块之间的“间隙”。

blockGap 属性在用户界面中显示为区块间距。

默认情况下，WordPress 设置区块间隙为 24px，这在某些设计中可行，但并非所有设计都适用。这很可能是你为每个主题自定义的样式。

假设你的设计默认需要在区块和元素之间有 2rem 的间距。你可以将此添加到 styles 对象的顶层，如以下代码所示：

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"styles": {
		"spacing": {
			"blockGap": "2rem"
		}
	}
}

将间距应用于区块

现在，是时候开始应用你之前注册的一些自定义间距预设了。请记住，你可以使用其 CSS 自定义属性引用预设，该属性将遵循 --wp--preset--spacing--{slug} 命名约定。

假设你想为核心 Pullquote 块使用以下设计：

WordPress 文章编辑器显示一个 Pullquote 块，该块具有黑色上下边框。

由于你有上下边框，你需要在它们和内部文本之间留出一些间距。你可以使用你的一个自定义预设来实现这一点。

以下是你可以用于 Pullquote 块的一组样式示例：

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"styles": {
		"blocks": {
			"core/pullquote": {
				"border": {
					"color": "var( --wp--preset--color--black )",
					"style": "solid",
					"width": "var( --wp--preset--spacing--10 )"
				},
				"spacing": {
					"padding": {
						"top": "var( --wp--preset--spacing--30 )",
						"bottom": "var( --wp--preset--spacing--30 )"
					}
				}
			}
		}
	}
}

为了获得文本和边框之间所需的空白，代码使用间距比例中的一个预设添加了顶部和底部内边距。

你可能已经注意到前面的代码也使用了预设来设置边框宽度。因为预设只是 CSS 自定义属性，当你需要时，你可以在很多地方和很多事情上使用它们。

标题的上下文间距

当你设计正文时，通常会在段落后面的标题上添加间距，然后缩小标题与后面元素之间的空间。根据你的设计，这可能也适用于其他元素。

仅仅在 theme.json 中为标题添加一些额外的上边距并不总是有效，因为 blockGap 设置几乎总是会覆盖垂直边距设置。通常，你所能做的就是编写一些自定义 CSS。

根据你的实际情况，你可能需要调整一些东西。因此，请将下面的示例视为指南，而不是规则。

假设你的 blockGap 设置为 2rem。但是，在正常的“流式”布局中，你想为标题添加 3rem 的上边距，并将兄弟元素的上边距减少到 1rem，这样你的内容看起来就像这样：

WordPress 文章编辑器，包含几段示例文本和内容中间的一个标题，该标题上方有较大的间距。

以下 CSS 可以完成这项工作：

.is-layout-flow * + :is( h1, h2, h3, h4, h5, h6 ),
.wp-block-post-content * + :is( h1, h2, h3, h4, h5, h6 )  {
	margin-top: 3rem;
}

.is-layout-flow :is( h1, h2, h3, h4, h5, h6 ) + *,
.wp-block-post-content :is( h1, h2, h3, h4, h5, h6 ) + * {
	margin-top: 1rem;
}

该代码专门针对 .wp-block-post-content，以便在文章编辑器中工作。这是因为编辑器本身无法知道你的文章内容在前端的布局。在某些情况下，你可能只针对 Post Content 块；在其他情况下，你可能针对其他块。

这段 CSS 没有涵盖一些边缘情况。例如，你可能希望在标题块和 Spacer 块或其他一些块/元素之间使用不同的间距。

根元素内边距感知对齐

在某些设计中，页面的根元素需要水平内边距。但是，当你构建这些设计时，有时需要让区块拉伸到屏幕的整个宽度——超出左右内边距。幸运的是，WordPress 6.1 引入了一个设置，让你可以做到这一点。

从技术上讲，这不仅仅是间距功能——它部分属于布局领域。但是，它确实会影响你在根元素上使用水平间距所做的决策。

如果你想启用感知根元素内边距的对齐方式，可以在 theme.json 中启用 settings.useRootPaddingAwareAlignments，如下所示：

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"useRootPaddingAwareAlignments": true
	},
	"styles": {
		"spacing": {
			"padding": {
				"left": "var( --wp--preset--spacing--40 )",
				"right": "var( --wp--preset--spacing--40 )"
			}
		}
	}
}

当然，只有当你像前面的代码块那样在根元素上设置了左右内边距时，此设置才有意义。

启用此设置后，WordPress 会在幕后施展一些魔法。它不会将内边距应用于根元素，而是向内部容器块添加一个 .has-global-padding 类，将内边距应用于区块本身。并且，当这些容器内部嵌套了一个全宽区块时，它会应用负边距以拉伸到其容器之外。

以下是一个全宽图像，从其带内边距的容器拉伸到屏幕边缘的示例：

在 Web 浏览器中打开的开发者工具，突出显示了屏幕侧面的内边距。这显示了夜晚天空的背景图像如何延伸到内边距之外。

使用 Spacer 块

从技术角度来看，Spacer 块并不是理想的间距方法。它向文档输出添加一个空的 <div>，仅仅是为了创建空白。这打破了所有优秀的网页设计标准，尤其是内容与样式的分离。

然而，它可以说是 WordPress 中最直观的间距工具。从用户体验的角度来看，建议用户在他们需要的地方放置 Spacer 块，比教新用户逐个区块地配置间距要容易得多。

但是，它是一个好的主题开发工具吗？ 也许吧，至少在少数情况下是。

一般来说，在构建主题时，你应该依靠区块间隙、边距和内边距设置来处理间距。但是，在自定义模式或模板部件中部署 Spacer 块是有理由的，用户可能需要自己调整这些部分，而无需太多麻烦。

有时，用户体验胜过纯粹主义者按部就班设计的愿景。

最终，你需要决定在哪里以及何时使用该模块。

因为事实是，用户确实可以访问它。这意味着他们中的一些人会使用它。接下来的几个章节中，你将学习如何通过解决Spacer模块当前限制的变通方法来改善这种体验。

更新：从 Gutenberg 15.6 起，间隔块支持间距预设。本文以下子章节在 WordPress 6.3 发布后可能不再需要。

定制间隔块变体

Spacer 模块的一个缺点是目前不支持主题定义的高度预设。更糟的是，用户选择的自定义高度也没有响应性。

好消息是：有方法可以绕过这些限制。其他新闻：这些变通方法都有局限性。

例如，一种变通方法是用自定义高度注册方块变化。这些高度可以是固定的，也可以是流体的。

在你的主题文件夹里创建一个新文件。然后，添加以下代码用于注册间隔块的小型、中型和大型变体：assets/js/editor.js

wp.domReady( () => {
	wp.blocks.registerBlockVariation( 'core/spacer', {
		name: 'small',
		title: 'Spacer: Small',
		attributes: {
			height: '2rem'
		},
		scope: [ 'block', 'inserter', 'transform' ]
	} );

	wp.blocks.registerBlockVariation( 'core/spacer', {
		name: 'medium',
		title: 'Spacer: Medium',
		attributes: {
			height: 'clamp(2rem, calc(2rem + ((1vw - 0.4rem) * 8.3333)), 4rem)'
		},
		scope: [ 'block', 'inserter', 'transform' ]
	} );

	wp.blocks.registerBlockVariation( 'core/spacer', {
		name: 'large',
		title: 'Spacer: Large',
		attributes: {
			height: 'clamp(4rem, calc(4rem + ((1vw - 0.4rem) * 16.6667)), 8rem)'
		},
		scope: [ 'block', 'inserter', 'transform' ]
	} );
} );

对于小变体，代码使用固定的高度值。中大尺寸的变体用于根据屏幕宽度调整流体尺寸。clamp()

在间隔块侧边栏的高度控制中，某个值会显示为空。但它作为属性保存正确，CSS 也正常工作。clamp()

为了让你的自定义变体出现，请在编辑器中加载该文件，并添加以下主题文件代码：editor.jsfunctions.php

add_action( 'enqueue_block_editor_assets', 'themeslug_editor_scripts' );

function themeslug_editor_scripts() {
	wp_enqueue_script(
		'themeslug-editor',
		get_theme_file_uri( 'assets/js/editor.js' ),
		[ 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' ],
		filemtime( get_theme_file_path( 'assets/js/editor.js' ) ),
		true
	);
}

现在，当你插入间隔块时，你应该会在编辑器中看到自定义变体的下拉菜单，如下图所示：

WordPress 帖子编辑器，屏幕上显示一个带有黑色边框的框。盒子顶部是一只狗的图片，底部是一些演示文字。两者之间放着一个正在调整的间隔块。

变体也应显示在插入器中，并通过斜杠命令使用。如果你想控制变体的可用位置，可以在注册时的参数里操作。scope

响应式间隔块

另一个技巧：你可以用自定义的 CSS 媒体查询限制过高的 Spacer 块。你确实有可能破坏用户的意图，所以在做之前要考虑主题的受众。

你可以把自定义CSS添加到主题的主文件里。但由于你很可能会将代码绑定到特定块，你应该注册一个自定义块样式表，如《利用theme.json和每块样式以实现更高性能的主题》中所述。style.css

在你的主题中创建一个新文件，并添加以下代码：assets/css/blocks/core-spacer.css

@media ( max-width: 48rem ) {
        .wp-block-spacer {
                max-height: 4rem;
        }
}

@media ( max-width: 40rem ) {
        .wp-block-spacer {
                max-height: 2rem;
        }
}

前述代码限制了每个间隔块在中等屏幕尺寸和小屏幕上的最大高度。当然，你应该根据自己的设计调整这些数字。4rem2rem

现在，将这段代码添加到你的文件中，以便在编辑器和前端视图中加载块样式表：functions.php

add_action( 'init', 'themeslug_enqueue_block_styles' );

function themeslug_enqueue_block_styles() {
	wp_enqueue_block_style( 'core/spacer', array(
		'handle' => 'themeslug-block-spacer',
		'src'    => get_theme_file_uri( 'assets/css/blocks/core-spacer.css' ),
		'path'   => get_theme_file_path( 'assets/css/blocks/core-spacer.css' )
	) );
}