# 样式

块样式允许为现有块应用替代样式。它们通过向块的包装器添加一个 className 来工作。如果选择了块样式，这个 className 可以用来为块提供替代样式。有关如何将样式应用于块的完整示例，请参阅[使用样式和样式表](/docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets)。

_示例：_

```js
wp.blocks.registerBlockStyle( 'core/quote', {
	name: 'fancy-quote',
	label: 'Fancy Quote',
} );
```

上面的示例为 `core/quote` 块注册了一个名为 `fancy-quote` 的块样式。当用户从样式选择器中选择此块样式时，一个 `is-style-fancy-quote` 的 className 将被添加到块的包装器上。

通过添加 `isDefault: true`，您可以将注册的块样式标记为在没有提供自定义类名时被识别为活动的样式。这也意味着对于标记为默认的样式，HTML 输出中将不会添加自定义类名。

要移除块样式，请使用 `wp.blocks.unregisterBlockStyle()`。

_示例：_

```js
wp.blocks.unregisterBlockStyle( 'core/quote', 'large' );
```

上面的代码从 `core/quote` 块中移除了名为 `large` 的块样式。

**重要提示：** 在取消注册块样式时，可能会出现[竞态条件](https://en.wikipedia.org/wiki/Race_condition)，即注册样式和取消注册样式的代码哪个先运行。您希望您的取消注册代码最后运行。实现这一点的方法是，将注册样式的组件指定为依赖项，在本例中是 `wp-edit-post`。此外，使用 `wp.domReady()` 可以确保取消注册代码在 DOM 加载完成后运行。

使用以下 PHP 代码将您的 JavaScript 加入队列：

```php
function myguten_enqueue() {
	wp_enqueue_script(
		'myguten-script',
		plugins_url( 'myguten.js', __FILE__ ),
		array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' ),
		filemtime( plugin_dir_path( __FILE__ ) . '/myguten.js' )
	);
}
add_action( 'enqueue_block_editor_assets', 'myguten_enqueue' );
```

`myguten.js` 中的 JavaScript 代码：

```js
wp.domReady( function () {
	wp.blocks.unregisterBlockStyle( 'core/quote', 'large' );
} );
```

## 服务器端注册辅助工具

虽然提供的示例允许完全控制区块样式，但它们需要大量代码。

为简化注册和取消注册区块样式的流程，还提供了两个服务器端函数：`register_block_style` 和 `unregister_block_style`。

### register_block_style

`register_block_style` 函数接收区块名称作为第一个参数，以及一个描述样式属性的数组作为第二个参数。

样式属性数组必须包含 `name` 和 `label`：

-   `name`：用于计算 CSS 类的样式标识符。
-   `label`：样式的可读标签。

除了这两个必需属性外，样式属性数组还应包含 `inline_style`、`style_handle` 或 `style_data` 属性之一：

-   `inline_style`：包含注册该样式所需 CSS 类的内联 CSS 代码。
-   `style_handle`：包含已注册样式的句柄，该样式将在需要区块样式的地方入队。
-   `style_data`：包含一个类似 theme.json 的样式属性数组表示法。

还可以将 `is_default` 属性设置为 `true`，以将其中一个区块样式标记为默认样式（如果缺少默认样式的话）。

以下代码示例为引用区块注册了一个名为“蓝色引用”的样式，并提供了一个内联样式，使具有“蓝色引用”样式的引用区块显示为蓝色：

```php
register_block_style(
    'core/quote',
    array(
        'name'         => 'blue-quote',
        'label'        => __( 'Blue Quote', 'textdomain' ),
        'inline_style' => '.wp-block-quote.is-style-blue-quote { color: blue; }',
    )
);
```

或者，如果已经注册了包含区块样式 CSS 的样式表，可以只传递样式表的句柄，`register_block_style` 函数将确保其被入队。

以下代码示例提供了此用例的示例：

```php
wp_register_style( 'myguten-style', get_template_directory_uri() . '/custom-style.css' );

// ...

register_block_style(
    'core/quote',
    array(
        'name'         => 'fancy-quote',
        'label'        => __( 'Fancy Quote', 'textdomain' ),
        'style_handle' => 'myguten-style',
    )
);
```

另一种方式是使用 `style_data` 属性，如下面的代码示例所示。它为图片区块添加了一个带有橙色边框和轻微圆角的区块样式。

```php
register_block_style(
       array( 'core/image' ),
       array(
           'name'         => 'orange-border',
           'label'        => __( 'Orange Border', 'pauli' ),
           'style_data'=> array(
                           'border' => array(
                           'color' => '#f5bc42',
                           'style' => 'solid',
                           'width' => '4px',
                           'radius' => '15px'
            )
        )
    )
);
```

使用 `style_data` 属性使用户能够通过 **编辑器 > 样式** 中的全局样式 UI 来更改它。`style_data` 属性在 WordPress 6.6 版本中添加。

更多信息请参阅 WordPress 6.6 开发说明：[区块样式](https://make.wordpress.org/core/2024/06/24/section-styles/)。
另见 WordPress 开发者博客：[在 WordPress 6.6 中使用区块样式变体为区块、嵌套元素等添加样式](https://developer.wordpress.org/news/2024/06/styling-sections-nested-elements-and-more-with-block-style-variations-in-wordpress-6-6/)。

### unregister_block_style

`unregister_block_style` 允许取消注册先前在服务器端使用 `register_block_style` 注册的区块样式。

该函数的第一个参数是区块的注册名称，第二个参数是样式名称。

以下代码示例从引用区块中取消注册名为 'fancy-quote' 的样式：

```php
unregister_block_style( 'core/quote', 'fancy-quote' );
```

**重要提示：** `unregister_block_style` 函数仅取消注册在服务器端使用 `register_block_style` 注册的样式。该函数不会取消注册使用客户端代码注册的样式。