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

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

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

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

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

核心块支持

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

• 按钮
• 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中文网其它相关文章！