为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的定制块create-guten-block包含两个样式表。 一个排队在编辑器上，另一个排队在编辑器和前端上。 我们不需要唯一的编辑器的样式在本教程中，所以在\ BSV-插件的\ src \的init.php，注释掉或删除调用wp_enqueue_style()在bsv_plugin_cgb_editor_assets()

在init.php中待一会儿，我们还需要注释掉wp_enqueue_style()中bsv_plugin_cgb_block_assets()的依赖项数组，因为某些原因当前阻止了样式正确入队。 我在本教程中使用的是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属性中指定的styles 。 选择三种块样式变体中的任何一种都会导致将不同CSS类添加到块的包装器中。 例如，选择样式2将添加is-style-style2类。

选择每个块样式变化时，目前什么都没有发生，因此让我们添加一些基本样式来解决此问题。 在。\ 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.php
• 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挂钩入enqueue_block_editor_assets因此它仅在管理编辑器上加载。 但是，我们希望CSS在编辑器和前端上加载，因此我们为此使用enqueue_block_assets挂钩。

样式很容易解释，但是请注意我们如何使用特定的块样式变体类来定位块实例。 这为我们提供了一种清除CSS的干净方法，以区分不同的块样式。

这里要注意的重要事情是两个registerBlockStyle()调用。 该函数位于全局wp.blocks对象中，因此无论使用该函数的何处，我们都需要显式包括前缀。

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

不过，这里要注意的一件事是，如果通过registerBlockStyle()为块样式变量添加isDefault: true ，则如果已经设置了默认样式变量，它将被忽略。 只是需要注意的一点（如果像我一样）是否期望它覆盖默认的样式变化。

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

因此，例如，要从按钮块中注销大纲样式的变化，可以使用：

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

但是，现在似乎与此有关。 如果您在控制台窗口中输入以上代码行，它将起作用，但是当从插件使用时，它并不总是起作用。 希望这些问题能尽快解决。

通过主题注册BSV

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

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

我正在使用“ 二十十九”作为父主题，因为它已包含在WordPress 5.0中，但是您可以根据需要使用任何父主题。

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

• style.css
• functions.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链接下载代码。

此仓库包含主题和我们在本教程中开发的两个插件。 下载内容后，您将看到三个文件夹。 将二十十九个孩子的文件夹添加到您的。\ wp-content \ themes主题文件夹，并将其他两个插件文件夹添加到您的。\ wp-content \ plugins插件文件夹。

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

结论

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

我确信这将成为插件开发人员和主题开发人员都将频繁使用的新编辑器功能。 特别是对于主题开发人员，它为您提供了很多自定义块样式以匹配您的主题样式的范围。

翻译自: https://code.tutsplus.com/tutorials/implementing-block-style-variations-in-gutenberg-part-2--cms-32254