为 WordPress 古腾堡块设计自定义样式：第 1 部分

现在对于 WordPress 开发者来说是一个激动人心的时刻，5.0 版本的正式发布即将到来。这将标志着代号为古腾堡的全新编辑器的首次亮相。如果您经常与 WordPress 打交道，无论是作为开发人员还是作为用户，那么您可能会明白为什么这是一个大新闻。

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

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

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

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

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

先决条件

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

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

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

背景

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

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

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

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

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

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

核心块支持

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

• 按钮
• Pull Quote
• Quote
• 分隔符
• Table

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

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

实现块样式变化

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

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

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