你是否曾在用现代 WordPress 建站时，希望 WordPress 能提供一个可以使用的网格布局类型？

有时，你只需要一些等宽的列，它们能根据你设定的规则自然地流动成行。也许就像我最近完全在区块编辑器中构建的这个“角色卡片”模式：

使用行和列块可以实现类似效果，但它们并非理想方案。这种情况下你真正需要的是 CSS 网格布局。

好消息是！网格布局支持首次出现在 Gutenberg 15.5 中，并随 WordPress 6.3 正式发布。

它只是默认被隐藏了——我们现在不会让这成为阻碍，对吧？

一旦我学会了如何启用网格支持，它让我的主题设计工作变得简单得多。在本文中，我将分享如何获得这种超能力，以便你能用更少的工作量制作出像这样的定价表模式布局：

除了列表标记的几个自定义块样式外，该设计完全基于 WordPress 现有的网格支持构建。直接在编辑器中完成。

如何启用网格支持

首先，让我定义一下“网格支持”的含义。具体来说，我指的是为内置的 Group 块启用 CSS 网格布局支持。就像基于 flexbox 的 Row 和 Stack 变体一样，你将学习如何注册一个 Grid 变体。

最简单的方法是安装 Gutenberg 插件。然后，进入 WordPress 管理后台的 Gutenberg > Experiments 屏幕，打开 Grid variation for Group block 选项。

这是测试该变体的好方法，但在向公众分发主题或在生产站点上使用时用处不大。而且，这会让本教程变得毫无用处，对吧？

相反，我们将构建自己的自定义 Grid 变体。

如果你正在构建自定义块，可以按照 WordPress 6.3 的布局更新开发说明中的指示来使用网格布局支持。

在编辑器中加载 JavaScript 文件

首先，在你的主题的 assets/js 文件夹中创建一个空的 block-variations.js 文件。你可以使用任何你喜欢的命名约定——只需确保更新代码中对文件的任何引用。

现在，通过标准的 wp_enqueue_script() 函数，在 enqueue_block_editor_assets 钩子上加载此文件，将以下代码添加到你的 functions.php 文件中：

add_action( 'enqueue_block_editor_assets', 'themeslug_editor_assets' );

function themeslug_editor_assets() {
	wp_enqueue_script(
		'themeslug-block-variations',
		get_parent_theme_file_uri( 'assets/js/block-variations.js' ),
		array( 
			'wp-blocks', 
			'wp-dom-ready',
			'wp-i18n'
		),
		wp_get_theme()->get( 'Version' ),
		true
	);
} 

注意依赖数组，它列出了几个 WordPress 脚本。你将在下一步的 JavaScript 代码中使用它们：

• wp-blocks：此包包含所需的与变体相关的函数。
• wp-dom-ready：你将使用它来确保你的代码仅在 DOM 加载完成后执行。
• wp-i18n：此包用于获取国际化函数。

构建 Grid 变体

对于这一步，了解如何构建块变体是有用的——但不是必需的。老实说，它只是几小段代码，所以你总是可以复制粘贴它们。

打开你的 assets/js/block-variations.js 文件。首先要做的是从依赖项中提取函数并赋值给几个常量：

const { getBlockVariations, registerBlockVariation } = wp.blocks;
const { __ } = wp.i18n;
const domReady = wp.domReady;

注册此特定变体时，我们希望避免与当前 Gutenberg 插件或未来 WordPress 中的 Grid 变体发生冲突。为避免任何潜在问题，你需要按顺序做两件事：

• 等待 DOM 准备就绪后再运行你的代码。
• 通过在已注册变体数组中搜索来检查该变体是否已存在。

这两件事确保 WordPress 和 Gutenberg 都能优先注册该变体，并且你的代码将具有向前兼容性。

有了这些检查，你只需要调用标准的 registerBlockVariation() 函数。

将以下代码添加到你的 assets/js/block-variations.js 文件中：

domReady(() => {
	const variations = getBlockVariations('core/group');

	if (! variations.some(variation => 'group-grid' === variation.name)) {
		registerBlockVariation('core/group', {
			name: 'group-grid',
			title: __('Grid', 'themeslug'),
			icon: 'grid-view',
			description: __('Arrange blocks in a grid.', 'themeslug'),
			attributes: {
				layout: {
					type: 'grid' 
				}
			},
			scope: [ 'block', 'inserter', 'transform' ],
			isActive: (blockAttributes) =>
				blockAttributes.layout?.type === 'grid',
		});
	}
});

现在保存文件并测试它：进入文章编辑器并添加一个新的 Group 块。你应该会看到一个新的 Grid 布局选项：

现在我们可以开始有趣的部分了。

因为我们是从主题注册这个变体，所以我展示了如何在不使用额外工具的情况下用纯 JavaScript 实现。但我强烈建议按照主题手册中设置构建过程的说明操作。对于像这个变体这样的一次性任务，你不需要它，但如果你使用大量 JavaScript，它会派上用场。

使用 Grid 变体

现在你对使用 Grid 变体构建出色的东西感到兴奋，请允许我稍微抑制一下你的热情。

重要的是要理解，当前 WordPress 的网格布局支持在开箱即用时是有限的。CSS 网格是一个庞大的规范，而核心实现目前只以一种方式使用 grid-template-columns。

基本上，你可以基于你定义的最小宽度创建等宽的列。每列会自动填充可用空间，并在空间不足时自然地流动到下一行。

这无疑是一个强大的功能，但它也只是 CSS 网格可能实现的功能的一小部分。

看看我在编辑器中安排的这个两行四列的团队网格示例：

注意在 UI 中设置的这两点：

• 最小列宽 设置为 15rem。此值确保布局中的每一列会自然地收缩和增长以填充可用空间，但不会低于 15rem 的最小值。
• 工具栏中的对齐选项设置为 全宽。在足够大的屏幕上，网格可以容纳所有八列。如果你想限制这一点，需要设置一个特定的宽度。

如果你对 CSS 感兴趣，WordPress 会输出类似这样的代码：

.wp-container-core-group-is-layout-0 {
	grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
}

这是一个相对简单的实现，但它以最少的 CSS 开销覆盖了许多用例。

Grid 变体的一个优点是用户体验感觉比其他实现自然得多。归根结底，它只是一个 Group 块，你可以用它制作任何东西的网格。把任何你想要的块放进去。

试试像这样的布局，它包含一个 Image 和一个带有 Quote 和 Gallery 的 Stack：

正如我之前所说，其中一些功能可以通过现有的核心块（如 Columns）实现。但我发现使用 Grid 变体创建这类布局的体验要容易得多，在编辑器中需要的点击次数也少得多。

仅通过文字和截图很难传达这是一种多么简洁的体验。所以你必须亲自尝试一下。

顺便说一下，我展示的所有示例在平板电脑和手机等较小屏幕尺寸上都能正常响应，没有问题。

扩展网格支持

正如我在上一节提到的，WordPress 目前只支持基本的等宽列实现。虽然这对某些人来说可能感觉有限，但对另一些人来说，这是探索 CSS 网格可能性的机会。我希望你属于后者。

让我们看一个例子，你甚至无需为 Group 块启用网格支持就可以尝试。

你知道 WordPress 已经为其 Post Template 块内置了支持吗？ 这是我用核心中可用的工具构建的一个示例。我只需要添加一个自定义块样式，就能让第一篇文章拉伸到整列宽度：

想自己试试吗？将这段代码放入你的 functions.php 来创建一个“Featured”样式：

add_action( 'init', 'themslug_register_block_styles' );

function themeslug_register_block_styles() {
	register_block_style( 'core/post-template', [
		'name'  => 'featured',
		'label' => __( 'Featured', 'themeslug' ),
		'inline_style' => '.wp-block-post-template-is-layout-grid.is-style-featured  .wp-block-post:first-child {
			grid-column: 1 / -1;
		}'
	] );
}

在编辑器中，为 Post Template 块选择 Grid 选项和你新的 Featured 样式。我将把其余的设计布局留给你。目标是展示你可以通过像块样式这样基本的主题开发工具来操作网格。

当然，你可以将其提升到新的水平，并在 UI 中构建自定义控件，如超越块样式系列中所述。无论你决定做什么，都请享受其中的乐趣！