欢迎来到本课程
在本课中，我们将深入探讨如何扩展已注册区块，并创建区块设置的替代版本。
学习目标
通过本课程，您将能够：
- 描述区块变体
- 区分区块变体与区块样式
- 将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文件正在被调用，同时还有一些依赖项的数组。
add_action( 'enqueue_block_editor_assets', 'themeslug_enqueue_block_variations' );
function themeslug_enqueue_block_variations() {
wp_enqueue_script(
'themeslug-block-variations',
get_theme_file_uri( 'assets/js/block-variations.js' ),
array(
'wp-blocks',
'wp-dom-ready',
'wp-i18n'
),
wp_get_theme()->get( 'Version' ),
true
);
}
下一步
您可以通过参考区块编辑器手册了解更多关于变体的信息，或者您可以查看主题手册。最后，WordPress.org的WordPress开发者博客上有一篇很棒的博客文章。