在样式化区块时，如果可能，您应该始终通过 theme.json 的 styles 属性进行样式设置。这可以确保您的样式在系统中具有最佳的兼容性，能够与默认 WordPress 样式、插件添加的样式以及用户自定义样式协同工作。

但有时您确实需要跳出 theme.json 所能轻松实现的范围。对于这些情况，您应该使用 WordPress 内置的区块样式表系统。

在本文中，您将学习如何注册每个区块的样式表，但请记住，在大多数情况下，theme.json 应该是首选的样式设置方式。

为什么要使用区块样式表？

区块样式表的主要用例是当您需要添加太多 CSS 代码到 styles.blocks.{blockname}.css 中时。此属性允许您添加自定义 CSS，但它仅在代码量很少时才理想。这是因为您将失去语法高亮功能，并且必须将所有内容放在一行（JSON 不支持换行）。

您可能也想将所有的自定义 CSS 放入主题的主 style.css 文件中。对于某些用例来说这可能没问题，但区块样式表系统通常能提供更好的性能，因为它仅在页面中使用该区块时才加载其 CSS。在前端，它还会将此代码内联到 <head> 区域中。

为各个区块创建单独的样式表也有助于大型和更复杂的项目，这些项目有许多不同区块的自定义 CSS。文件的分离使得组织和管理工作代码变得更加容易。

创建区块样式表

要创建自定义区块样式表，您必须执行三个步骤：

  1. 确定组织方案和命名规则。
  2. 编写您的自定义 CSS。
  3. 注册您的自定义区块样式表。

组织和命名区块样式表

在注册区块样式表之前，您首先需要知道将存储自定义区块样式表的文件夹。您可以将其放在任何位置（没有标准位置），下面的代码将假设您将区块样式表放在主题的 /assets/blocks 文件夹中。

您还应该决定如何命名 CSS 文件。同样，没有标准的命名约定，但一个好的选择是使用区块命名空间和 slug，格式如下：{namespace}-{slug}.css。使用此命名约定，core/group 区块的样式表将变为 core-group.css。

以下是几个核心区块的 CSS 文件的示例结构：

  • assets/
    • blocks/
      • core-group.css
      • core-image.css
      • core-media-text.css

向区块样式表添加 CSS

要样式化核心区块，您需要知道的最重要信息是其 CSS 类。这是根据区块的命名空间和 slug 自动生成的，格式为 .wp-block-{namespace}-{slug}。

以下是一个示例，样式化命名空间和 slug 为 super/duper 的区块看起来像这样：

.wp-block-super-duper {
	/* custom CSS goes here. */
}

核心 WordPress 区块是此命名规则的例外。它们的命名空间是 core，但这并不包含在任何核心区块的 CSS 类中。相反，它们使用 .wp-block-{slug} 格式。

第三方区块开发人员有可能更改输出的 CSS 类，因此本指南对于第三方区块可能并不总是适用。在这些情况下，您需要在源代码中查找区块的 CSS 类。

假设您想为核心 Image 区块添加一些自定义样式，该区块的命名空间和 slug 为 core/image。您需要针对 .wp-block-image 类。

让我们尝试创建一个渐变背景，这实际上充当了 Image 块内 <img> 元素的伪边框。目标是创建一个看起来像这样的样式：

WordPress 编辑器显示棕榈树的图片，带有橙色到红色的渐变边框。

首先，在您的主题中创建一个 /assets/blocks/core-image.css 文件。然后，将此 CSS 代码添加到其中：

.wp-block-image img {
	padding: 1rem;
	background: linear-gradient(-60deg,#ff5858,#f09819);
}

由于此样式表尚未注册，您的自定义样式在编辑器或前端中尚不会显示。

注册区块样式表

要注册您的区块样式表，您将使用 wp_enqueue_block_style() 函数。在注册区块样式表时，您还应在 init 钩子上执行代码。

wp_enqueue_block_style() 函数接受两个参数：

  • $block_name: 区块名称，包括命名空间和 slug（例如，core/image）。
  • $args: 传递给 wp_register_style() 的参数数组：
    • handle: 样式表的唯一句柄。
    • src: 样式表的源 URL。
    • path: 样式表的路径（需要在 <head> 中内联 CSS）。
    • deps: 此样式表依赖的已注册样式表句柄数组。
    • ver: 自定义样式表版本号。
    • media: 已定义该样式表的媒体类型。

要为核心 Image 区块注册您的自定义样式表，请将此代码添加到您的 functions.php 文件中：

add_action( 'init', 'themeslug_enqueue_block_styles' );

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

您还可以为 wp_enqueue_block_style() 调用配置额外的参数，但上述内容是 WordPress 在站点的 <head> 区域中内联您的 CSS 代码所需的最小内容。

若要深入了解区块样式表，请查看 WordPress 开发者博客上的 利用 theme.json 和每个区块的样式来构建性能更好的主题。