欢迎来到本课程，我们将深入探讨如何扩展已注册的区块，并创建区块设置的替代版本。
通过本课程，你将学会：
- 描述区块变体，
- 区分区块变体和区块样式，
- 将 JavaScript 文件添加到你的主题中，以及
- 注册一个区块变体。
什么是区块变体？
区块变体是一种替代区块，你可以使用区块变体 API 将其添加到主题中。你将使用创建变体时所依据区块的已有属性。
你不需要构建过程，因为你可以选择从 functions.php 中加载自定义的 JavaScript 文件，同时传递一些依赖项。
你可以选择将区块变体放置在插件中或主题文件中。
如果你还没有机会查看《WordPress 初学者开发者学习路径》，请务必查看关于《开发 WordPress 插件》的模块。
区块变体与区块样式的对比
区块变体和区块样式有什么区别？
区块变体和区块样式的主要区别在于，区块样式会向区块应用一个 CSS 类，以便以替代方式进行样式设置。
让我们以 Twenty Twenty-Four 主题为例来看一下。
它们有一个带星号的区块样式。你会看到 CSS 类是 style asterisks。
这可以应用于标题，但这不是段落区块可用的区块样式，仅适用于标题区块。
如果你点击插入器并向下滚动，你会看到区块变体的示例。这些是 WordPress 核心自带的，其中每个嵌入都是一个区块变体。
要查看完整代码，你可以在 GitHub 上查看。
如果你想了解更多关于区块变体和区块样式之间的区别，可以参考一个很棒的在线工作坊。
添加 JavaScript
现在，让我们将 JavaScript 文件添加到你的主题中。
你可以将 JavaScript 文件命名为 block-variations，并将其放置在 assets 下的 JS 子文件夹中。
注册区块变体
现在，让我们注册区块变体。
你可以使用 functions.php 文件，打开你的 PHP，使用 enqueue_block_editor_assets 动作钩子，并使用 wp_enqueue_script 函数。
你在这里看到，block-variations.js 文件被调用，并附带了一个依赖项数组。
<?php
function my_theme_enqueue_block_editor_assets() {
wp_enqueue_script(
'my-theme-block-variations',
get_template_directory_uri() . '/assets/js/block-variations.js',
array( 'wp-blocks', 'wp-dom-ready', 'wp-i18n' ),
wp_get_theme()->get( 'Version' ),
true
);
}
add_action( 'enqueue_block_editor_assets', 'my_theme_enqueue_block_editor_assets' );
?>后续步骤
你可以通过参考区块编辑器手册来了解更多关于变体的信息，或者查看主题手册。最后，WordPress.org 的 WordPress 开发者博客上有一篇很棒的博文。