详解 WordPress `register_block_style()` 函数源码：为区块添加自定义样式的实现原理。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷们，晚上好！欢迎来到今天的 WordPress 区块样式深度解析讲座。今天咱们要聊聊 register_block_style() 这个小可爱，看看它如何让你的区块瞬间变得风骚起来。

开场白：你的区块也想换个发型？

想象一下，你辛辛苦苦写了一个区块，功能强大，但样式总是那么平淡，就像你衣柜里那件永远不会穿的灰色毛衣。是不是很想给它换个发型，让它眼前一亮？register_block_style() 就是你的Tony老师，专门负责给区块做造型，让它们拥有不同的风格。

register_block_style() 是什么？

简单来说，register_block_style() 是 WordPress 提供的一个函数，用于为一个特定的区块注册一个或多个自定义样式。这些样式会出现在区块编辑器的样式选项中，用户可以选择不同的样式，从而改变区块的外观。

register_block_style() 的基本语法

让我们先来看看 register_block_style() 的基本语法：

register_block_style(
    string   $block_name,
    array    $style_properties
);

$block_name (string): 这是你要注册样式的区块的名称。比如 ‘core/paragraph’ 表示段落区块，’core/heading’ 表示标题区块，以此类推。
$style_properties (array): 这是一个包含样式属性的数组。数组的每个元素定义一个样式。

深入解析 $style_properties 数组

$style_properties 数组是 register_block_style() 的核心，它定义了你的自定义样式。这个数组可以包含以下几个关键的键：

name (string, required): 样式的唯一名称。这个名称会在 HTML class 中使用，所以要遵循 CSS 命名规范，通常使用小写字母和连字符。
label (string, required): 样式的友好名称，会在区块编辑器的样式选项中显示给用户。
is_default (bool, optional): 如果设置为 true，则该样式会作为区块的默认样式。默认为 false。
style_handle (string, optional): 用于注册样式时的句柄，如果已注册，在渲染区块时会加载相应的样式。
inline_style (string, optional): 允许定义内联样式。

一个简单的例子：给段落区块加个边框

咱们先从一个简单的例子开始，给段落区块加一个边框。

function my_custom_block_styles() {
    register_block_style(
        'core/paragraph',
        array(
            'name'  => 'bordered',
            'label' => __( '带边框', 'my-theme' ),
        )
    );
}
add_action( 'init', 'my_custom_block_styles' );

这段代码做了什么？

定义了一个名为 my_custom_block_styles 的函数。
使用 register_block_style() 函数，针对 ‘core/paragraph’ (段落区块) 注册了一个名为 ‘bordered’ 的样式，标签为 "带边框"。
使用 add_action() 函数，将 my_custom_block_styles 函数挂载到 init 钩子上。这意味着这段代码会在 WordPress 初始化时执行。

现在，当你编辑一个段落区块时，你会看到样式选项中多了一个 "带边框" 的选项。但是，当你选择这个选项时，什么也不会发生，因为我们还没有定义这个样式的具体样式。

定义样式：CSS 上场！

接下来，我们需要定义 ‘bordered’ 样式的 CSS。有两种方法：

方法一：使用 style_handle 注册并加载外部 CSS 文件

这是推荐的方法，因为它能更好地组织你的 CSS 代码。

function my_custom_block_styles() {
    // 注册样式文件
    wp_register_style(
        'my-block-styles',
        get_template_directory_uri() . '/assets/css/block-styles.css',
        array(),
        '1.0'
    );

    register_block_style(
        'core/paragraph',
        array(
            'name'  => 'bordered',
            'label' => __( '带边框', 'my-theme' ),
            'style_handle' => 'my-block-styles' // 关键：指定样式句柄
        )
    );
}
add_action( 'init', 'my_custom_block_styles' );

然后，在 block-styles.css 文件中，添加以下 CSS 代码：

.wp-block-paragraph.is-style-bordered {
    border: 1px solid #ccc;
    padding: 10px;
}

解释一下：

.wp-block-paragraph：这是段落区块的默认 CSS 类。
.is-style-bordered：这是 register_block_style() 函数自动添加的 CSS 类，它基于你定义的样式名称（’bordered’）。
border: 1px solid #ccc; 和 padding: 10px;：这是我们为 ‘bordered’ 样式定义的具体样式。

方法二：使用 inline_style 直接定义内联样式

这种方法比较简单，但不太适合复杂的样式。

function my_custom_block_styles() {
    register_block_style(
        'core/paragraph',
        array(
            'name'  => 'bordered',
            'label' => __( '带边框', 'my-theme' ),
            'inline_style' => '
                border: 1px solid #ccc;
                padding: 10px;
            '
        )
    );
}
add_action( 'init', 'my_custom_block_styles' );

使用 inline_style 时，直接将 CSS 代码作为字符串传递给它。

更复杂的例子：带颜色的标题区块

现在，咱们来一个更复杂的例子，给标题区块添加几个带颜色的样式。

function my_custom_block_styles() {
    register_block_style(
        'core/heading',
        array(
            array(
                'name'  => 'red-heading',
                'label' => __( '红色标题', 'my-theme' ),
            ),
            array(
                'name'  => 'blue-heading',
                'label' => __( '蓝色标题', 'my-theme' ),
            ),
            array(
                'name'  => 'green-heading',
                'label' => __( '绿色标题', 'my-theme' ),
            ),
        )
    );
}
add_action( 'init', 'my_custom_block_styles' );

注意，这里我们传递给 register_block_style() 的 $style_properties 是一个包含多个数组的数组，每个数组定义一个样式。

接下来，在 block-styles.css 文件中添加以下 CSS 代码：

.wp-block-heading.is-style-red-heading {
    color: red;
}

.wp-block-heading.is-style-blue-heading {
    color: blue;
}

.wp-block-heading.is-style-green-heading {
    color: green;
}

现在，当你编辑一个标题区块时，你会看到样式选项中多了 "红色标题"、"蓝色标题" 和 "绿色标题" 三个选项。选择不同的选项，标题的颜色就会相应改变。

设置默认样式：is_default 属性

如果你想让某个样式成为区块的默认样式，可以将 is_default 属性设置为 true。

function my_custom_block_styles() {
    register_block_style(
        'core/paragraph',
        array(
            'name'  => 'default-bordered',
            'label' => __( '默认带边框', 'my-theme' ),
            'is_default' => true, // 设置为默认样式
        )
    );
}
add_action( 'init', 'my_custom_block_styles' );

现在，当你插入一个新的段落区块时，它默认就会带有边框。

动态区块和 render_callback

对于动态区块，你可以根据选择的样式，在 render_callback 函数中动态生成不同的 HTML 代码。

// 注册区块
register_block_type( 'my-plugin/dynamic-block', array(
    'attributes' => array(
        'style' => array(
            'type' => 'string',
            'default' => 'default',
        ),
    ),
    'render_callback' => 'my_dynamic_block_render',
) );

// 注册区块样式
function my_custom_block_styles() {
    register_block_style(
        'my-plugin/dynamic-block',
        array(
            array(
                'name'  => 'default',
                'label' => __( '默认样式', 'my-theme' ),
                'is_default' => true,
            ),
            array(
                'name'  => 'alternative',
                'label' => __( '替代样式', 'my-theme' ),
            ),
        )
    );
}
add_action( 'init', 'my_custom_block_styles' );

// 渲染函数
function my_dynamic_block_render( $attributes ) {
    $style = isset( $attributes['style'] ) ? $attributes['style'] : 'default';

    if ( $style === 'alternative' ) {
        $output = '<div class="my-dynamic-block alternative-style">这是替代样式的内容</div>';
    } else {
        $output = '<div class="my-dynamic-block default-style">这是默认样式的内容</div>';
    }

    return $output;
}

在这个例子中：

我们注册了一个名为 my-plugin/dynamic-block 的动态区块。
区块的属性中包含一个 style 属性，用于存储选择的样式。
在 my_dynamic_block_render 函数中，我们根据 style 属性的值，动态生成不同的 HTML 代码。

register_block_style() 的一些注意事项

register_block_style() 函数应该在 init 钩子上执行，以确保在区块编辑器加载之前注册样式。
样式名称应该遵循 CSS 命名规范，使用小写字母和连字符。
避免使用过于复杂的 CSS 选择器，以提高性能。
测试你的样式在不同的浏览器和设备上的兼容性。
如果你使用了外部 CSS 文件，确保它被正确加载。

常见问题解答

为什么我的样式没有生效？
- 检查你的 CSS 代码是否正确。
- 检查你的 CSS 文件是否被正确加载。
- 检查你的样式名称是否与 register_block_style() 中定义的名称一致。
- 清除浏览器缓存。
我可以在多个区块上使用相同的样式吗？

可以。你只需要在不同的区块上使用相同的样式名称即可。
如何移除已经注册的样式？

使用 unregister_block_style() 函数。
```
unregister_block_style( 'core/paragraph', 'bordered' );
```

总结：让你的区块与众不同

register_block_style() 是一个强大的工具，可以让你轻松地为区块添加自定义样式，让你的网站更加个性化和专业。掌握了它，你就可以像一个真正的 Tony 老师一样，为你的区块打造各种各样的发型，让它们在页面上熠熠生辉！

希望今天的讲座对大家有所帮助。记住，实践是检验真理的唯一标准。赶紧动手试试吧！谢谢大家！

发表回复 取消回复

发表回复取消回复