块样式变体（简称块样式）允许您为各个块创建替代样式。注册的样式显示在用户界面中，允许用户在默认样式和任何替代样式之间快速切换。
不幸的是，许多功能在名称中使用了术语“变体”。这有时会令人困惑。需要注意的是，块样式的变化与全球风格变化和块变化.
通常，您会看到块样式变体被称为“块样式”，正如本文中所述，但这也不应与块样式表。这两个功能可以一起使用，但它们不是一回事。
在幕后，块样式只不过是添加到块包装元素中的CSS类，其名称为.is样式-{name}。这允许您添加自定义CSS以某种方式更改块的设计。
在这个屏幕截图中，您可以看到在样式面板和核心四舍五入选项被选中：
这里所发生的一切是，核心WordPress和主题都为Image块注册了块样式，并且用户已经选择了其中一种样式。然后将该注册样式的CSS应用于块。
最终，块样式只是向块中添加类并使用CSS进行自定义的标准方法。
用户一次只能将一种样式应用于块。它们无法使用标准设计工具组合它们。如果需要允许更多选项，可以考虑构建自定义设计工具。阅读超越块样式WordPress开发者博客上的教程系列，了解如何操作。
大多数主题作者都想用PHP注册块样式。如果您需要或想通过JavaScript使用它们，请跳到“基于JavaScript的块样式”部分。
要注册块样式，请使用寄存器块样式（）PHP函数。函数的签名如下所示：
寄存器块样式（字符串$block_name，数组$style_properties)：布尔
该函数接受两个参数并返回真的或假，取决于注册是否成功：
$块名称:块的名称，包括名称空间和slug（例如。，核心/图像).$样式属性:可用于配置样式的参数数组：
名称: （必需）唯一标识符/段塞，用于生成类（例如。，is-style-{name}).标签: （必需）可翻译的人可读标签。内联样式:使用样式时要打印的内联CSS。样式句柄:用于为样式加载已注册样式表的句柄。is_default（默认）:是否应选择样式作为块的默认样式（默认为假).
样式句柄 当前有一个bug其中它只在编辑器中对样式表进行排队，而不在前端。在该链接票证被寻址之前，不建议使用它。
让我们尝试创建一个块样式，使图像块具有“手绘”外观，以便在编辑器中选择时它看起来像这样：
要注册此块样式，需要通过寄存器块样式（）函数并将其作为回调添加到初始化挂钩。
将以下代码添加到主题函数.php文件进行测试：
add_action（'init'，'themeslug_register_block_styles'）；函数主题lug_register_block_styles（）{register_block_style（'core/image'，数组(“name”=>“hand-drawn”，“label”=>__（“手绘”，“themeslug”），“inline_style”=>“.wp-block-image.is-style-hand-drawn img”{边框：2px纯色currentColor；溢出：隐藏；方框阴影：0 4px 10px 0 rgba（0，0，0和0.3）；边距：255px 15px 225px 15p/15px 255px！重要；}') );}
如果您的内联样式参数不是几行CSS代码，您可能需要将CSS添加到自定义块样式表而不是。
要注销已向PHP注册的块样式，请使用unregister_block_style（）功能。以下是其签名：
取消注册块样式(字符串$block_name，字符串$block_style_name)：布尔
该函数接受两个参数并返回真的或假，取决于注册是否成功：
$块名称:块的名称，包括其名称空间和slug（例如。，核心/图像).$block_style_name（块_样式名称）:通过PHP注册的块样式的名称/slug。
要注销手工绘制您之前注册的块样式，您需要向初始化hook（请注意，操作调用的稍后优先级为99以便它在前面的注册函数之后运行，该函数默认为10):
add_action（'init'，'themeslug_register_block_styles'，999）；函数主题lug_register_block_styles（）{unregister_block_style（'core/image'，'hand-drawn'）；}
如果块样式已经通过PHP注册，则只能使用PHP注销它们。如果块样式是用JavaScript注册的，则还必须使用JavaScript注销它。有关更多信息，请参阅下面的“用JavaScript注销块样式”部分。
要通过JavaScript注册或注销块样式，需要在排队块编辑器资产挂钩。
首先，创建一个/assets/js/block-editor.js文件（您可以更改此名称或在任何位置添加它，但下面的示例假定了此名称和位置）。
然后将此代码添加到主题函数.php文件将脚本排队：
add_action（'排队块编辑器资产'，'主题lug_block_editor_assets'）；函数themeslug_block_editor_assets（）{wp_排队_脚本(“themeslug-block-editor”，get_theme_file_uri（'assets/js/block-editor.js'），数组（“wp-blocks”，“wp-dom-ready”，“wp-edit-post”));}
要通过JavaScript注册块样式，可以使用寄存器块样式（）函数，其工作方式类似于寄存器块样式（）PHP函数。它只使用JavaScript语法。
让我们使用前面的相同示例，注册一个“手绘”图像块样式。将此代码添加到您的/assets/js/block-editor.js文件：
wp.blocks.registerBlockStyle（'core/image'{name:'手工绘制'，label:'手绘'}）；
您还可以设置是默认值的参数真的如果这是默认的块样式（假默认情况下）。
要添加自定义CSS，您需要加载一个自定义块样式表或者通过其他方式添加CSS。
还有一个unregisterBlockStyle（）JavaScript函数，相当于unregister_block_style（）PHP函数。您可以使用此命令注销通过JavaScript注册的任何块样式。
为了避免在块样式注册时与未注册时发生冲突的争用情况，需要确保在块样式已注册后注销它。最好的方法是将其添加到上的函数回调中wp.dom就绪，确保在加载DOM后注销。
要注销手工绘制通过JavaScript注册的块样式，将其添加到/assets/js/block-editor.js文件：
wp.domReady（函数（）{wp.blocks.unregisterBlockStyle（'core/image'，'hand-drawn'）；} );
如果块样式已经通过JavaScript注册，则只能使用JavaScript注销它们。如果块样式是用PHP注册的，则还必须使用PHP注销它。有关更多信息，请参阅上面的“用PHP注销块样式”部分。
可以自定义核心WordPress块样式的设计。这意味着您可能根本不需要添加自定义CSS来获得想要的外观。
如果可能的话，建议您对自定义项使用此方法，因为它们出现在外观>编辑器>样式接口。此外，如果需要，您的主题用户可以对其进行自己的更改。
让我们尝试修改核心Button块的Outline样式，使其具有下拉阴影，从而创建一个双重边界效果：
为此，请打开您的主题.json文件。你需要瞄准样式.blocks.core/button.variations.outline属性。它和其他的一样可以通过添加的样式主题.json.
在您的主题.json文件：
{“版本”：2，“样式”：{“区块”：{“核心/按钮”：{“变化”：{“大纲”：{“边界”：{“color”：“var:preset | color | black”，“半径”：“0”，“style”：“solid”，“宽度”：“3px”},“shadow”：“var:preset | shadow | outlined”，“间距”：{“填充”：{“顶部”：“0.5rem”，“底部”：“0.5rem”，“left”：“1.5rem”，“右”：“1.5rem”}}}}}}}}
请随意调整，并根据您的喜好进行定制。然后享受修改其他块样式的乐趣。
目前无法通过自定义自定义注册的块样式主题.json。您目前只能对核心WordPress注册的内容进行样式设置。有关更多信息，请查看相关GitHub上的功能请求.
以下是核心WordPress块及其样式，您可以通过主题.json:
芯/按钮: 概述,填满核心/图像:圆形的核心/报价: 平原堆芯/现场损失: 圆形的堆芯/分离器: 宽的,点核心/社交链接: 仅标识,柱状的核心/表格: 条纹核心/标签云:概述
要深入了解核心模块的样式，请阅读通过theme.json定制核心块样式变化在WordPress开发者博客上。
