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

在上一篇文章中，我们了解了有关块样式变体的所有信息，以及如何在全新的 wordpress 5.0 编辑器中使用它们来轻松地在预定义样式之间切换。

我们将在这篇文章中更进一步，提供更多示例，为您在自己的项目中实现块样式变体提供坚实的基础。具体来说，我们将从头开始创建自己的块，以演示如何直接在块定义本身中添加多种样式变化。我还将向您展示如何设置将哪种块样式用作默认值。

然后，我们将通过单独的插件添加更多块样式变体（简称 BSV）来扩展我们的块。如果您需要扩展块样式但无权访问块的源代码，您通常希望这样做。

我们将再次使用相同的方法，但这次是通过子主题。您可能希望这样做为核心块提供额外的样式变化，以匹配您自己的主题样式。

与注册新样式同样重要的是如何取消注册它们。我们将使用一个专用函数来执行此操作。

本教程的所有代码都可以从我们右侧的 GitHub 存储库下载，因此如果您只想跟随，则无需手动输入代码。

在块内注册 BSV

如果您可以访问块的源代码，那么您可以直接在内部管理块样式变化registerBlockType()。让我们仔细看看。

首先，我们需要启动一个新块。块做什么并不重要，因为我们只需要一些东西来添加我们的自定义块样式变体。可能最简单的方法是使用该create-guten-block实用程序，它会创建一个新插件并添加一个准备自定义的示例块。它通过一个终端命令完成这一切！

如果您之前没有使用过这个方便的实用程序，那么您可以查看项目存储库 以获取更多信息。此外，如果需要，这里有一个专门的教程可以让您快速上手。

在本地 WordPress 插件文件夹中，打开命令行窗口并输入：

npx create-guten-block bsv-plugin

我在bsv-plugin这里使用了这个名字，但你可以使用任何你喜欢的名字。几分钟后，安装完成后，输入：

cd bsv-plugin
npm start

我们现在可以编辑我们新创建的块create-guten-block的源代码，并在每次更改后自动为我们编译源代码。好的。

继续并在 WordPress 管理员中激活插件，并通过创建新页面或编辑现有页面将新块的实例添加到编辑器。

删除仅编辑器样式

不过，在我们继续之前，我们只需要更改默认情况下css排队的方式。

create-guten-block 刚刚为我们创建的自定义块包括两个样式表。一个在编辑器上排队，另一个在编辑器和前端排队。本教程不需要编辑器专用样式，因此在.\bsv-plugin\src\init.php中，注释掉或删除对wp_enqueue_style()in的调用bsv_plugin_cgb_editor_assets()。

在init.php中停留片刻，我们还需要为wp_enqueue_style()in注释掉依赖数组，bsv_plugin_cgb_block_assets()因为出于某种原因，当前的 pr事件是样式无法正确入队。我create-guten-block在本教程中使用的是 v1.11.0，因此您可能会或可能不会遇到相同的问题，具体取决于您使用的版本。

该bsv_plugin_cgb_block_assets() 函数现在应该如下所示：

function bsv_plugin_cgb_block_assets() {
    // Styles.
    wp_enqueue_style(
        'bsv_plugin-cgb-style-css', // Handle.
        plugins_url( 'dist/blocks.style.build.css', dirname( __FILE__ ) ) // Block style CSS.
        //array( 'wp-blocks' ) // Dependency to include the CSS after it.
        // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.style.build.css' ) // Version: filemtime — Gets file modification time.
    );

} // End function bsv_plugin_cgb_block_assets().

现在，当您加载页面时，您将看到在编辑器和前端应用的块样式，这正是我们想要的。

注册块样式变化

我们现在都准备好添加我们的自定义 CSS，我们很快就会这样做。不过，首先，我们需要注册我们的块样式变化。

打开.\bsv-plugin\src\block\block.js并将以下内容添加到registerBlockType功能配置对象中（例如，直接在属性下方keywords 将执行此操作）。

styles: [
    {
        name: "style1",
        label: __("Style 1"),
        isDefault: true
    },
    {
        name: "style2",
        label: __("Style 2")
    },
    {
        name: "style3",
        label: __("Style 3")
    }
],

这为我们的自定义块注册了三种新的样式变化。请注意命名的块样式变体如何将style1 属性isDefault设置为true。 当您在编辑器中打开块选项时，这只是选择 样式 1块样式变体。它实际上并没有像您想象的那样为该块设置任何 CSS 类。

当我第一次开始使用块样式变体时，这对我来说有点棘手，并且是很多混乱的根源。希望将来该isDefault属性还将触发 CSS 类添加到块的包装器中，我认为这更直观。

刷新编辑器页面并通过单击块左上角的图标打开样式变体选项，以查看我们刚刚定义的三个块样式变体。

请注意默认情况下如何选择样式 1 块样式变体，这是我们在styles 上面的属性中指定的那个。选择三种块样式变体中的任何一种都会导致将不同的 CSS 类添加到块的包装器中。例如，选择 样式 2 会添加is-style-style2类。

Nothing currently happens when each block style variation is selected, so let's add some basic styles to fix this. 在.\bsv-plugin\src\block\style.scss中，在现有样式之后添加以下内容：

.wp-block-cgb-block-bsv-plugin.is-style-style2 {
    background: pink;
}

.wp-block-cgb-block-bsv-plugin.is-style-style3 {
    background: purple;
    color: white;
}

我们仅在此处为 样式 2 和样式 3 块样式变体添加自定义样式，因此即使没有专门单击块样式变体，仍会应用默认块样式。

如您所见，我们的块样式变体现在可以应用样式。我真的很喜欢你可以在悬停它时看到每种样式变化的预览的方式，而不必先选择它！

通过插件注册 BSV

如果您想将样式变体添加到您没有源代码访问权限的块中，那么您可以使用registerBlockStyle(). 此功能使您可以在registerBlockType().

让我们通过向核心按钮块添加几个我们自己的样式变化来测试这一点。这个块已经定义了三种样式变体：Rounded、Outline和Squared。

我们将添加我们自己的另外两种样式变体：Pill Shaped 和Uppercase。

不过，在我们这样做之前，我们需要一个插件来存储我们的自定义代码。我不会深入介绍这个，因为本教程的重点是块样式的变化而不是插件开发。如果您在后续遇到任何问题，您可以通过右侧的GitHub 链接下载完成的插件。

 在本地 WordPress .\wp-content\plugins文件夹中创建一个新的bsv文件夹并添加三个文件：

• 脚本文件

• bsv.js

• bsv.css

在bsv.php中，添加以下代码：

<?php
/*
Plugin Name: Block Style Variations
Version: 0.1
Description: Demonstrates how to add block style variations to an existing block.
Author: David Gwyer
Author URI: https://www.wpgoplugins.com
*/

// editor scripts
function bsv_editor($hook) {
    wp_enqueue_script( 'bsv_js', plugins_url( 'bsv.js', __FILE__ ) );
}
add_action('enqueue_block_editor_assets', 'bsv_editor');

// frontend and editor scripts
function bsv_frontend_editor($hook) {
    wp_enqueue_style( 'bsv_css', plugins_url( 'bsv.css', __FILE__ ) );
}
add_action('enqueue_block_assets', 'bsv_frontend_editor');

在bsv.js中，添加前端代码：

jquery(document).ready(function($) {
  wp.blocks.registerBlockStyle("core/button", {
    name: "upper-case",
    label: "Upper Case"
  });

  wp.blocks.registerBlockStyle("core/button", {
    name: "pill",
    label: "Pill Shaped"
  });
});

在bsv.css中，添加样式本身：

.wp-block-button.is-style-upper-case {
  text-transform: uppercase;
}

.wp-block-button.is-style-pill .wp-block-button__link {
  border-radius: 30px !important;
}

激活插件并在编辑器中插入按钮块的新实例。您现在应该会看到两个可用的新块样式变体！

了解 BSV 插件代码

让我们回顾一下我们刚刚做了什么。在bsv.php中，javascript文件通过enqueue_block_editor_assets钩子排队，因此它仅在管理编辑器上加载。但是，我们希望 CSS 加载到编辑器和前端，所以我们enqueue_block_assets为此使用了钩子。

这些样式是不言自明的，但请注意我们如何针对具有特定块样式变体类的块实例。这为我们提供了一种干净的方式来分离我们的 CSS 以适应不同的块样式变化。

这里需要注意的重要一点是这两个registerBlockStyle()调用。该函数存在于全局wp.blocks对象中，因此我们需要在使用该函数的任何位置显式包含前缀。

registerBlockStyle() 有两个参数。第一个是要添加样式变化的块的名称，第二个是配置对象。这与我们之前通过属性将块样式变化直接添加到块定义时遇到的对象完全相同styles。

不过，这里要注意的一件事是，如果您isDefault: true通过 为块样式变体添加，registerBlockStyle()如果已经设置了默认样式变体，它将被忽略。如果（像我一样）您希望它覆盖默认样式变化，请注意一些事情。

根据文档，您还可以使用 取消注册块样式变体unregisterBlockStyle()。用法与 非常相似registerBlockStyle()，但您只需要指定块名称和样式变体名称。

因此，例如，要从按钮块中取消注册大纲 样式变体，您可以使用：

wp.blocks.unregisterBlockStyle("core/button", "outline");

但是，现在这似乎有点问题。如果您在控制台窗口中输入上述代码行，它会起作用，但从插件中使用时它并不总是有效。希望这些问题将很快得到解决。

通过主题注册 BSV

对于我们的最后一个示例，让我们向核心按钮块添加另一种样式变化，以添加一个选项来渲染具有渐变背景色的按钮，而不仅仅是纯色。

这次我们将通过子主题实现这种新的样式变体，因为我认为为与您自己的主题匹配的块提供替代样式将是一个常见的用例。（如果您不想手动创建，主题也包含在本教程的可下载文件中。）

我使用29作为父主题，因为它包含在 WordPress 5.0 中，但您可以将它基于您想要的任何父主题。

twentynineteen-child 在本地 WordPress .\wp-content\themes文件夹中创建一个新文件夹并添加四个文件：

• 样式.css

• 函数.php

• tnc_bsv.js

• tnc_bsv.css

我们不会将任何特定的子主题样式添加到style.css中，但我们需要包含它以便 WordPress 识别主题。

在style.css中，添加：

/*
 Theme Name:   Twenty Nineteen Child
 Author:       David Gwyer
 Author URI:   https://wpgoplugins.com/
 Template:     twentynineteen
 Version:      0.1
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
*/

JavaScript 和 CSS 文件通过functions.php入队，因此将以下代码添加到此文件中：

<?php

// tnc = twenty nineteen child

// Include parent theme styles
function tnc_enqueue_parent_theme_styles() {
    wp_enqueue_style( 'parent-theme-styles', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'tnc_enqueue_parent_theme_styles' );

function tnc_add_styles() {
    wp_enqueue_style( 'tnc-bsv-css', get_stylesheet_directory_uri() . '/tnc_bsv.css' );
}
add_action('enqueue_block_assets', 'tnc_add_styles');

function tnc_add_scripts() {
    wp_enqueue_script(
        'tnc-bsv-js',
        get_stylesheet_directory_uri() . '/tnc_bsv.js'
    );
}
add_action( 'enqueue_block_editor_assets', 'tnc_add_scripts' );

在tnc_bsv.js中，添加代码来注册我们的块样式变体：

jQuery(document).ready(function($) {
  wp.blocks.registerBlockStyle("core/button", {
    name: "gradient",
    label: "Gradient"
  });
});

最后，我们的块样式变体的 CSS 被添加到tnc_bsv.css：

.wp-block-button.is-style-gradient .wp-block-button__link {
  background: linear-gradient(
    to bottom,
    #6db3f2 0%,
    #54a3ee 50%,
    #3690f0 51%,
    #1e69de 100%
  ) !important;
}

.wp-block-button.is-style-gradient .wp-block-button__link:hover {
  opacity: 0.9;
  cursor: pointer;
}

该代码与我们在上一个示例中创建的插件几乎相同，以添加两个新的块样式变体。我们在这里所做的只是添加另一个，但这次是通过一个子主题。

激活主题，然后在编辑器中添加一个按钮块以查看我们的新创建。

您可能已经注意到我将 javaScript 代码包装在 jQuery 语句中：

jQuery(document).ready(function($) {
    // ...
});

这实际上并不是绝对必要的。在测试期间，代码似乎在没有 jQuery 包装器的情况下运行良好。但是，目前还没有关于如何添加与新编辑器api交互的 JavaScript 代码的任何官方指南。同时，建议继续使用上面的 jQuery 包装器方法，但选择权取决于您。

下载代码

如前所述，可以通过  页面右侧的GitHub链接下载代码。

这个 repo 包含我们在本教程中开发的主题和两个插件。下载内容后，您会看到三个文件夹。将二十九子文件夹添加到您的.\wp-content\themes 主题文件夹，将另外两个插件文件夹添加到您的.\wp-content\plugins插件文件夹。

激活插件和主题以使块样式变体在新的 WordPress 编辑器中可用。

结论

感谢您加入本教程！我希望您现在对块样式变化的含义有了更多的了解。在评论中让我知道您可能对在自己的项目中使用它们有什么想法。