云策 WordPress 开发者社区

社区新闻

为 WordPress 6.9 中的手风琴块添加样式

查看官方原文 ↗ 发布于

手风琴块即将正式登陆 WordPress。如果你像我一样是一名主题设计师，可能已经在放烟花了。砰！啪！万岁！

如果你也像我一样，可能已经在摆弄这个块的设计，创建很酷的自定义样式了。如果你还没开始，也没关系。这正是本指南的目的。

在本教程中，我们将一起学习如何自定义手风琴块的输出，使其与你正在设计的任何主题相匹配。

在 WordPress 6.9 发布前测试手风琴块，请安装最新版本的 Gutenberg 插件或 WordPress 6.9 Beta。同时，请关注在 6.9 发布周期最后阶段对该块所做的任何更改。

一个用例：常见问题解答

每当我为 WordPress 测试新块时，我都会开始思考我会在哪些场景中使用它。我立刻想到了常见问题解答页面。

在本教程中，你将学习如何为手风琴块及其嵌套块添加样式，以便你或你的用户可以快速构建一个像这样的常见问题解答页面：

一个常见问题解答网页，包含四个带有问题和答案的手风琴列表。

这是一个个人主题项目的截图，所以你的颜色、排版和其他样式元素可能会看起来不同。但这就是重点：构建适合你设计的东西。

如果你现在没有自己的主题可以摆弄，可以使用 Twenty Twenty-Five。

要构建你的常见问题解答页面，首先通过 WordPress 管理后台的 页面 → 添加页面 屏幕创建一个新页面。然后添加一个手风琴块，它会自动插入一个嵌套的手风琴项目、手风琴标题和手风琴面板。

继续添加几个你自己的项目。或者，如果你喜欢简单的方法，可以复制 这个 GitHub Gist 中的块标记 并将其粘贴到编辑器的内容区域。

查看默认的手风琴设计

如果你从上一步将块添加到编辑器中，你可能已经注意到你的常见问题解答页面看起来与之前完成设计的截图大不相同：

WordPress 块编辑器查看一个常见问题解答页面，其中包含一个未设置样式的、带有多个问题和答案的手风琴。

这是一个手风琴的极简实现，我喜欢这种方法。这意味着我不必像有时为核心块设置样式那样，进行那么多特异性战斗。对于像你我这样的人来说，这几乎是一张空白画布，我们可以随意挥洒。

手风琴块不是一个单一的块。实际上有四个具有嵌套结构的块：

  • 手风琴： 嵌套手风琴项目的主要容器块。
  • 手风琴项目： 手风琴块的直接子块，包含手风琴标题和手风琴面板块。
  • 手风琴标题： 一个包裹着用于打开/关闭手风琴面板的 <button> 元素的 <h3> 标签。
  • 手风琴面板： 一个容器块，你可以在其中插入自定义块，例如段落、图像等。

也值得看看它生成的标记，如下所示。请注意，我删减了一些与设计无关的属性。

<div class="wp-block-accordion is-layout-flow wp-block-accordion-is-layout-flow">
	<div class="wp-block-accordion-item is-layout-flow wp-block-accordion-item-is-layout-flow is-open">
		<h3 class="wp-block-accordion-heading">
			<button aria-expanded="true" class="wp-block-accordion-heading__toggle">
				<span class="wp-block-accordion-heading__toggle-title">Heading Text</span>
				<span class="wp-block-accordion-heading__toggle-icon" aria-hidden="true">+</span>
			</button>
		</h3>
		<div class="wp-block-accordion-panel is-layout-flow wp-block-accordion-panel-is-layout-flow">
			<!-- Custom Blocks Here. -->
		</div>
	</div>
</div>

仅使用 theme.json 就可以获得一些不错的设计，但要真正将其提升到一个新的水平，你可能需要使用自定义 CSS。在接下来的部分中，我将引导你了解我如何处理所有内容的样式设置。

为手风琴及其嵌套块设置样式

要为手风琴及其子块设置样式，你需要从 theme.json 中的 styles.blocks 对象开始。它看起来类似于这样：

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

在接下来的步骤中，你不需要为包装手风琴块本身添加任何样式（你只设置嵌套块的样式）。但如果你需要，你可以在 theme.json 中定位 styles.blocks.core/accordion。

为手风琴项目块设置样式

要为手风琴项目块设置样式，你需要定位 styles.blocks.core/accordion-item。在之前的截图中，这是设计中样式最多的部分，因为它充当了每个嵌套元素的包装器。

将此代码添加到 theme.json 中的 styles.blocks 对象：

"core/accordion-item": {
	"border": {
		"color": "#d5dae2",
		"style": "solid",
		"width": "1px",
		"radius": "12px"
	},
	"color": {
		"background": "#f6f7f9",
		"text": "#343b46"
	},
	"shadow": "0 10px 15px -3px #80000080, 0 4px 6px -4px #80000080",
	"spacing": {
		"blockGap": "0"
	}
}

这会添加边框、颜色、阴影和间距样式。本教程中的示例代码使用了几个硬编码的 CSS 值，但在实际项目中，你应该在 theme.json 样式中引用预设。

WordPress 编辑器中的手风琴块，每个项目都有灰色背景和边框。

为手风琴标题块设置样式

手风琴项目包装器样式就位后，是时候处理手风琴标题了，使其看起来像提议的常见问题解答设计。

如果你还记得我之前分享的 HTML 输出，你可能已经注意到这个块是一个 <h3> 元素。这意味着应用于标题或特别是 <h3> 元素的任何样式也将应用于此块。在下面的代码中，我覆盖了主题的标题排版以重置它，但你的主题可能需要更多样式。

将此代码添加到 theme.json 中的 styles.blocks 对象：

"core/accordion-heading": {
	"css": "&__toggle { padding: var(--wp--preset--spacing--40) var(--wp--style--block-gap); }",
	"typography": {
		"fontFamily": "inherit",
		"fontSize": "inherit",
		"fontStyle": "inherit",
		"fontWeight": "500",
		"lineHeight": "inherit",
		"textTransform": "inherit"
	}
}

代码包含 css 属性，该属性为嵌套的切换按钮添加了一些内边距。在 theme.json 中没有其他方法可以定位此元素。我也不希望内边距在手风琴标题块本身上，因为我希望按钮拉伸其整个宽度和高度。

要了解更多关于 theme.json 中 css 属性的信息，请查看这篇关于如何使用它的教程。

WordPress 编辑器中的手风琴块，每个项目都有灰色背景和边框。标题周围有间距，但内容没有。

非常接近了！

为手风琴面板块设置样式

通过 theme.json 设置样式的最后一步是为手风琴面板块添加内边距，以便在内容和容器边缘之间留出一些呼吸空间。

将此代码添加到 theme.json 中的 styles.blocks 对象：

"core/accordion-panel": {
	"spacing": {
		"padding": {
			"top": "var(--wp--style--block-gap)",
			"bottom": "var(--wp--style--block-gap)",
			"left": "var(--wp--style--block-gap)",
			"right": "var(--wp--style--block-gap)"
		}
	}
}
WordPress 编辑器中的手风琴块，每个项目都有灰色背景和边框，并且嵌套项目周围有内边距。

这与原始截图并非 100% 完全匹配，但已经非常接近了。现在我们需要走出 theme.json。

使用 CSS 进行微调

设计的主要缺失部分是当切换按钮悬停/聚焦或手风琴面板打开时，应用不同的背景颜色。

WordPress 编辑器中的手风琴块，每个项目都有灰色背景和边框。切换按钮有更深的灰色背景。

在这种情况下，你将使用块样式表来处理样式。首先，创建一个名为 block-accordion.css 的文件，并将其放在主题的 /assets 文件夹中（或你偏好的自定义样式表位置）。

然后，通过将此代码添加到主题的 functions.php 文件来加载该样式表：

add_action( 'init', 'themeslug_enqueue_block_styles' );

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

如果你问为什么为手风琴块而不是手风琴标题创建样式表，这是个好问题——毕竟切换按钮是手风琴标题中的一个元素。在这种情况下，我更喜欢将所有内容放在一个样式表中，因为每个与手风琴相关的块总是会一起加载。另外，我稍后会在本教程中介绍一些其他样式，所以一个样式表更容易管理。

在 block-accordion.css 文件中，添加此 CSS：

/* Add toggle button background on open/hover/focus. */
.wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle,
.wp-block-accordion-heading__toggle:hover,
.wp-block-accordion-heading__toggle:focus {
	background: #eceff2; /* Use a preset here. */
}

瞧！你现在有了一个样式漂亮的手风琴块。

上面的代码在面板打开或切换按钮悬停/聚焦时将背景颜色更改为更深的灰色。但你可以再稍微调整一下。

你可以像上一步那样将这些自定义样式放在 theme.json 的 css 属性中，但一旦添加了超过几行 CSS，这种方法就会变得有点笨拙。

通过块样式变体为用户提供设计选择

网页设计中关于手风琴的一个有趣之处在于，你可以用多种方式为其设置样式。你可以做的事情真的没有限制。

让我们逐步注册一个名为 极简 的手风琴块样式变体。最终设计将如下所示：

一个常见问题解答网页，带有手风琴样式的问题和答案。每个项目都有一个 + 或 x 图标指示其状态和一个圆形灰色背景。

创建样式变体 JSON 文件

WordPress 6.6 引入了通过 JSON 实现的块样式变体，使得为任何块创建自定义样式比以往任何时候都更容易。使用这种技术，你将学习如何为手风琴块构建样式变体。

在主题的 styles 文件夹中创建一个名为 accordion-minimal.json 的新文件（或者如果你愿意，可以在子文件夹中，例如 styles/block）。

我更喜欢在单个块样式变体的 slug 前加上块名。这让我更容易知道它们属于哪个块。它还减少了自定义 CSS，因为我可以直接引用类，而无需同时定位块。例如，.is-style-accordion-minimal 比 .wp-block-accordion.is-style-minimal 更简洁。

将以下代码添加到你的 accordion-minimal.json 文件中：

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"title": "Minimal",
	"slug": "accordion-minimal",
	"blockTypes": [ "core/accordion" ],
	"styles": {
		"css": "& .wp-block-accordion-item { margin-top: 0; } & > :first-child { border-top: none; }",
		"spacing": {
			"blockGap": "0"
		},
		"blocks": {
			"core/accordion-item": {
				"border": {
					"radius": "0",
					"bottom": {
						"width": "0"
					},
					"left": {
						"width": "0"
					},
					"right": {
						"width": "0"
					}
				},
				"color": {
					"background": "transparent"
				},
				"shadow": "none"
			},
			"core/accordion-panel": {
				"spacing": {
					"padding": {
						"top": "0",
						"left": "0",
						"right": "0"
					}
				}
			}
		}
	}
}

本质上，这只是重置了主题默认块设计中的许多样式。但我想指出 css 属性：

"css": "& .wp-block-accordion-item { margin-top: 0; } & > :first-child { border-top: none; }",

这做了两件事：

  • 移除手风琴项目的上边距。你可能会认为 spacing.blockGap 应该能做到这一点。理论上是的，但目前有一个错误阻止它应用于块样式变体。
  • 移除第一个子元素（手风琴项目）的上边框以创建“分隔线”效果。

我喜欢将这些样式保留在 JSON 文件中，而不是放在单独的 CSS 文件中，因为它们与 JSON 中定义的其他样式直接相关。

添加自定义 CSS

尽管这比第一个设计更简约，但它有大量的切换和切换图标样式。而且没有好的方法可以通过 JSON 定位这些项目。这意味着你需要使用一点自定义 CSS。

打开你的 assets/block-accordion.css 文件并向其中添加以下代码：

/* Reset heading toggle padding. */
.is-style-accordion-minimal .wp-block-accordion-heading__toggle {
	padding-left: 0;
	padding-right: 0;
}

/* Reset heading toggle background on open/hover/focus. */
.is-style-accordion-minimal .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle,
.is-style-accordion-minimal .wp-block-accordion-heading__toggle:hover,
.is-style-accordion-minimal .wp-block-accordion-heading__toggle:focus {
	background: transparent;
}

/* Define toggle icon design. */
.is-style-accordion-minimal .wp-block-accordion-heading__toggle-icon {
	background: #f6f7f9; /* Use a preset here. */
	display: inline-block;
	padding: 0.5rem;
	line-height: 1;
	text-align: center;
	border-radius: calc(infinity * 1px);
}

/* Define the toggle icon background on open/hover/focus. */
.is-style-accordion-minimal .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon,
.is-style-accordion-minimal .wp-block-accordion-heading__toggle:hover