WordPress 在 5.3 版本引入了 块样式 API，作为一项供主题作者创建无法通过内置设计工具实现的块自定义功能。然而，它在主题中常常未被充分利用。并且，即使被使用，其结果有时最好被变体或模式所取代。

在本指南中，您将了解什么是块样式、何时使用它们以及如何从头开始构建它们。

什么是块样式？

本质上，块样式不过是一个 CSS 类。在底层，这个类可以附加到块的输出上以改变其设计。像任何其他类一样，主题作者可以为其附加任何他们想要的 CSS 属性和值。

开发人员可以为单个块注册任意数量的样式，WordPress 将在编辑器的块侧边栏面板中显示它们。然后，用户可以选择他们想要的样式，例如下图中显示的“圆角”设计：

总的来说，该功能仅仅是一个覆盖在简单的基于类的选择器之上的用户界面。

何时构建自定义块样式

一般的经验法则是，当您已经用尽其他选项并且需要依赖自定义 CSS 时，才应该使用块样式。开箱即用，大多数核心块都支持一系列设计工具，这些工具通常映射到现有的 CSS 属性。随着时间的推移，这使得需要自定义块样式的情况越来越少。

如果您想给图片块一个实线边框，则不需要为此创建自定义样式。WordPress 已经内置了边框选项，如下图所示：

主题作者也可以使用 theme.json 来为每个可用选项定义默认值。

如果您想给边框一个“手绘”外观呢？ WordPress 没有任何选项来处理这种情况。这将需要一些自定义 CSS。这使其成为自定义块样式的一个很好的候选者。

这也是主题开发最令人兴奋的事情之一。虽然 WordPress 在创建标准方面取得了巨大进步，但正是在这些标准之内，创造力仍然可以蓬勃发展。

注册自定义块样式

在本教程中，您将构建一个自定义块样式，为图片块提供“手绘”边框，如上一节截图所示。执行此操作的第一步是使用 register_block_style() PHP 函数。

以下代码片段快速浏览了该函数及其参数：

register_block_style(
    $block_name,
    $style_properties
);

$block_name 参数应为块类型的名称（例如，core/image）。$style_properties 参数是一个关联数组，可以传入以配置样式：

• name: (必需) 一个唯一标识符，用于生成 CSS 类（例如，is-style-{name}）
• label: (必需) 样式的国际化、人类可读标签
• inline_style: 使用样式时要打印的内联 CSS
• style_handle: 要为该样式排队的已注册样式表的句柄
• is_default: 是否应将该样式选为块的默认样式

请注意，style_handle 目前存在一个错误，即它仅在编辑器中排队样式表，而不在前端排队。目前，不建议使用它。

要注册自定义样式，请在主题的 functions.php 文件中创建一个回调函数，并将其添加到 init 操作钩子。以下代码注册了 hand-drawn 块样式：

add_action( 'init', 'themeslug_register_block_styles' );

function themeslug_register_block_styles() {
    register_block_style( 'core/image', array(
        'name'         => 'hand-drawn',
        'label'        => __( 'Hand-Drawn', 'themeslug' ),
        'inline_style' => '.wp-block-image.is-style-hand-drawn img {
            border: 2px solid currentColor;
            overflow: hidden;
            box-shadow: 0 4px  10px 0 rgba( 0, 0, 0, 0.3 );
            border-radius: 255px 15px 225px 15px/15px 225px 15px 255px !important;
        }'
    ) );
}

主题作者也可以通过 JavaScript 注册块样式。然而，可能很少或没有需要这样做的场景。块编辑器手册有一个参考页面描述了如何执行此操作。参数与其 PHP 对应项匹配，因此技术本质上是相同的——只是语言不同。

单独加载样式

对于一次性样式，使用 inline_style 选项并在 PHP 中编写 CSS 是可以的，但从长远来看，它可能会变得混乱并成为管理难题。对于大多数场景，您会希望在 CSS 文件中管理 CSS，并让 WordPress 自动将其内联。

首先，从您之前定义的函数中移除 inline_style 属性，如下所示：

add_action( 'init', 'themeslug_register_block_styles' );

function themeslug_register_block_styles() {
    register_block_style( 'core/image', array(
        'name'  => 'hand-drawn',
        'label' => __( 'Hand-Drawn', 'themeslug' )
    ) );
}

以上代码将注册块样式，但它不再附加任何自定义 CSS。

现在，您将创建一个特定于块的样式表。WordPress 将仅在块被使用时加载其内容并内联 CSS。有关每块样式表的更多信息，请访问利用 theme.json 和每块样式实现更高性能的主题。

对于本练习，假设您有一个空的 assets/blocks/core-image.css 文件，用于存放图片块的自定义 CSS。要仅在块被使用时加载它，请将以下代码添加到您的 functions.php 文件中：

add_action( 'init', 'themeslug_enqueue_block_styles' );

function themeslug_enqueue_block_styles() {
    wp_enqueue_block_style( 'core/image', array(
        'handle' => 'themeslug-block-image',
        'src'    => get_theme_file_uri( 'assets/blocks/core-image.css' ),
        'path'   => get_theme_file_path( 'assets/blocks/core-image.css' )
    ) );
}

然后，将以下 CSS 添加到 core-image.css 文件中：

.wp-block-image.is-style-hand-drawn img {
    border: 2px solid currentColor;
    overflow: hidden;
    box-shadow: 0 4px  10px 0 rgba( 0, 0, 0, 0.3 );
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px !important;
}

注销块样式

在某些情况下，您可能希望移除已注册的块样式，例如隐藏核心选项或移除父主题或插件注册的内容。在大多数情况下，您将使用 unregister_block_style() 函数来实现此目的。

假设您正在为一个注册了手绘样式的主题构建子主题。您只需要知道块类型（core/image）和样式名称（hand-drawn）。以下 PHP 代码将注销它：

add_action( 'init', 'themeslug_unregister_block_styles', 15 );

function themeslug_unregister_block_styles() {
    unregister_block_style( 'core/image', 'hand-drawn' );
}

注销块样式时有一个注意事项：如果样式是通过 JavaScript 注册的，则也必须通过 JavaScript 注销。所有内置的核心块样式都需要此方法。

假设您的主题的 assets/js 文件夹中有一个自定义的 block-editor.js 文件，请按以下代码片段所示排入 JavaScript：

add_action( 'enqueue_block_editor_assets', 'themeslug_block_editor_assets' );

function themeslug_block_editor_assets() {
    wp_enqueue_script(
        'themeslug-block-editor',
        get_theme_file_uri( 'assets/js/block-editor.js' ),
        array( 
            'wp-blocks', 
            'wp-dom-ready', 
            'wp-edit-post' 
        )
    );
}

将以下代码添加到您的 block-editor.js 文件中，以注销图片块上的核心 rounded 样式：

wp.domReady( function () {
    wp.blocks.unregisterBlockStyle( 'core/image', 'rounded' );
} );

每个块的多种样式

块样式功能经常被要求添加的一个功能是允许用户选择多种样式。WordPress 目前不支持此功能。在某些情况下，这是有意义的。此外，在底层，块样式不过是一个 CSS 类，大多数开发人员都知道可以添加到元素上的类没有限制。

然而，在实践中，多个块样式很容易相互冲突。

通常，可以组合的块样式是简单的自定义，可能更适合归入内置设计工具。WordPress 块现在支持广泛的 CSS 功能，可以满足此类基本需求。并且，当这些基本需求需要组合时，也许块变体是更好的选择。

关于每个块的多种样式，有一个正在进行的讨论。未来有可能支持此功能，或者以某种方式扩展该功能以允许更大的灵活性。