为 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' ) },
],

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

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

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

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

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

一旦选择，块样式变体就会添加 is-style-custom-将 Button-style CSS 类添加到块检查器面板中的其他 CSS 类文本字段。

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

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

一个小问题！

当您第一次插入支持块样式变体的块时，值得注意的是，直到您专门点击块样式变体之前，实际上并没有任何 CSS 类添加到块标记中，即使其中一个显示为默认选中。

亲自尝试一下。

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

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

这种行为在第一次接触时有点令人困惑，因为直观上您会期望为默认选择的块样式变体自动添加 CSS 类。

结论

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

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

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

以上是为 WordPress 古腾堡块设计自定义样式：第 1 部分的详细内容。更多信息请关注PHP中文网其他相关文章！