为WordPress Gutenberg块创建样式变化：第1部分

对于 wordpress 开发人员来说，现在是一个激动人心的时刻，5.0 版的正式发布即将到来。这将标志着代号为 Gutenberg 的全新编辑器的首次亮相。如果您经常与 WordPress 有任何关系，无论是作为开发人员还是作为用户，那么您可能会理解为什么这是个大新闻。

不过，并不是每个人都期待新版本，因为它确实为 WordPress 带来了非常不同的编辑体验。关于这将如何影响更广泛的 WordPress 生态系统存在一些不确定性。但是，新编辑器有可能彻底改变您为 WordPress 网站创建内容的方式。即使它在吸引大量用户时可能会遇到最初的阻力，但我认为它最终可能会以经典 TinyMCE 编辑器无法实现的方式与您的内容建立更切实的联系。

您可以通过从 WordPress 插件存储库安装Gutenberg 插件，在计划的 WordPress 5.0 版本之前试用新编辑器。如果您还没有机会尝试，那么我强烈建议您这样做，以预览 WordPress 中未来的编辑体验！

在新编辑器中创建内容完全基于块。您添加到编辑器的每一条内容都是一个块。这包括所有您喜欢的元素，例如滑块、段落、按钮、列表、图像、推荐等。将块添加到编辑器后，您可以配置控制其外观和行为的设置。这些可以在块本身上进行编辑，也可以通过检查器面板（位于编辑器屏幕的右侧）进行编辑。块设置有时会在两个位置重复，但这因块而异。

不过，几乎所有块在检查器面板中都有一个选项，可以手动添加一个或多个 css 类名称，以允许进一步的块自定义。如果您希望覆盖核心块或第三方块的样式，这将非常有用。

虽然这很好用，但扩展此行为并允许通过一组预定义的样式选择添加块自定义选项将是有益的。这正是块样式变化给我们的，我们将在本教程中专门关注它们。

先决条件

我们还将了解如何将块样式变体添加到您自己的块以及如何扩展现有块，因此为了继续学习，您最好熟悉 WordPress 插件开发的基础知识以及如何创建块。

不过不要惊慌——如果您需要速成课程，请查看我的关于创建自定义块的四部分教程。它几乎涵盖了本教程需要了解的所有内容——除了块样式的变化，这是本教程的重点！

此外，如果您想跟随代码并自己尝试，那么您将需要一个本地开发服务器来运行 WordPress（例如 WAMP、MAMP 等），以及一个代码编辑器。

背景

块样式变化api在插件的 v3.2 中被引入到 Gutenberg 项目，并允许您直接通过编辑器界面应用替代块样式。

要在块样式变化之前获得相同的结果，您必须在高级 部分 下的块检查器面板的附加 CSS 类文本字段中手动输入自定义 CSS 类。

如果您对块样式变化的原始提案感兴趣，那么您可以阅读官方 Gutenberg repo 中拉取请求中的完整详细信息。

可以直接在块工具栏中访问为块定义的任何样式变化。选择块，然后单击工具栏左上角的图标以显示块样式窗格。

还记得之前我说过可以直接在块和检查器面板中访问某些块设置吗？好吧，这正是块样式变化的情况！确保选中该块并查看检查器面板。

这是为了方便，您可以从最适合您的位置选择样式变化。例如，在较大的屏幕上，您可以选择通过检查器面板更改块样式，因为它使您可以通过单击鼠标在样式之间进行切换。但是在较小的设备上，您可能希望隐藏检查器面板，而只需通过块工具栏更改样式。

核心块支持

一些核心块目前支持块样式变化，包括：

• 按钮

• 拉式报价

• 引用

• 分隔器

• 桌子

我敢肯定，随着此功能被更广泛地采用，将来会添加对其他核心块的支持。它非常灵活，我相信很多用户都会期待为大多数块选择预定义的样式选项。一旦您使用了块样式变体，就很容易理解为什么会出现这种情况。

当然，您也可以将块样式变体添加到您自己的块中。接下来我们将探讨具体的实现细节。

实现块样式变化

有两种实现自定义块样式变化的方法。如果您有权访问块定义，则可以registerBlockType()通过 style 属性直接在函数内部指定块样式变体。

例如，这就是按钮核心块样式属性定义的样子。

styles: [
	{ name: 'default', label: _x( 'Rounded', 'block style' ), isDefault: true },
	{ name: 'outline', label: __( 'Outline' ) },
	{ name: 'squared', label: _x( 'Squared', 'block style' ) },
],

在这里，注册了三个新的块样式变体。请注意，圆角 样式也设置为默认值。

但是，如果您无权访问块源代码，那么您可以采取另一种方法。在 Gutenberg 3.4 中，添加了两个新函数来从块定义之外注册和取消注册块样式变化。

要注册自定义块样式变体，请使用以下registerBlockStyle()函数：

wp.blocks.registerBlockStyle( 'core/button', {
    name: 'custom-button-style',
    label: 'My Button Style'
} );

这添加了一个名为custom-button-style核心按钮块的新块样式变体。现在，当将按钮块插入编辑器时，您将看到可用的新块样式变体。

一旦选中，块样式变体就会 在块检查器面板中的Additional CSS Classis-style-custom-button-style文本字段中添加一个CSS 类。

这反过来会触发对块输出的更新，并将类添加到 html 标记中。

您可能想知道registerBlockStyle()在您自己的代码中添加函数的位置。别担心——我们将在下一篇文章中介绍一个完整的示例，您将能够下载最终的插件代码，以便您自己进行测试。

一个小问题！

当您第一次插入支持块样式变体的块时，有趣的是，在您专门单击块样式变体之前，实际上没有将 CSS 类添加到块标记 中，即使默认情况下显示为选中一个。

自己试试吧。

在编辑器中插入一个新的按钮块并打开块样式变化选项。您应该会看到 默认选择了Rounded选项。如果您在块检查器中打开“高级”部分，则尚未将 CSS 类添加到文本字段中。因此不会将 CSS 类插入到块标记中。查看编辑器中为按钮块输出的 HTML 以自行确认。

现在返回按钮块的块样式变化设置，然后单击默认选项（已选择的选项）或任何其他块样式选项。您会立即看到 CSS 类已添加到Additional CSS Class文本字段和块包装器标记中。为自定义类定义的任何自定义 CSS 规则也将在选择块样式变体后立即应用。

这种行为在第一次曝光时有点令人困惑，因为直观地说，您希望为默认选择的块样式变体自动添加 CSS 类。

结论

我们已经了解了块样式变体是什么以及为什么它们是块编辑体验的有用补充。我还演示了块样式变体的基本实现。

在下一篇文章中，我们将介绍如何注册您自己的块样式并通过插件和子主题连接 CSS 的完整示例。

我们还将了解如何取消注册块样式以及如何设置在第一次将块插入编辑器时默认选择哪种样式变体。