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

好了，各位技术大侠，咱们今天来聊聊 WordPress 里让区块们穿上定制时装的秘密武器：register_block_style() 函数。这玩意儿能让你的区块瞬间拥有各种风情，告别千篇一律的脸。

开场白：区块，你的衣柜准备好了吗？

话说 WordPress 的区块编辑器，Gutenberg，简直是网页设计的乐高积木。但积木再好，颜色也得变变，造型也得凹凹。 register_block_style() 就是你的专属造型师，负责给区块们量身定做各种样式。

第一部分：register_block_style() 的身世之谜

register_block_style() 函数，顾名思义，就是“注册区块样式”的意思。它让你能为特定的区块类型定义一系列可供用户选择的自定义样式。这些样式会出现在区块编辑器的样式面板里，用户只需要点点鼠标，就能给区块换身衣服。

语法结构：摸清它的脾气

先来看看它的基本语法：

register_block_style(
    string   $block_name,
    array    $style_properties
);

$block_name: 这是你要打扮的区块的名字。比如 'core/paragraph' (段落区块), 'core/button' (按钮区块), 或者你自定义的区块的名字。必须是字符串。
$style_properties: 这是一个数组，里面塞满了样式的各种属性。就像是时装设计师的设计图纸，告诉 WordPress 怎么给区块换装。

$style_properties 数组的秘密：

这个数组里可以放很多东西，但最关键的是这几个：

属性名	类型	描述	必须
`name`	string	样式的唯一标识符。就像衣服的品牌名，必须独一无二。	是
`label`	string	用户在编辑器里看到的样式名称。就像衣服的款式名称，让人一眼就知道这是什么风格。	是
`is_default`	boolean	(可选) 设置这个样式是否为默认样式。如果设置为 `true`，这个样式会在区块首次插入时自动应用。就像默认款，懒人必备。	否

第二部分：实战演练，让区块变美

光说不练假把式，咱们来点实际的。

例子一：给段落区块加点颜色

假设你想给段落区块增加两种样式：一种是“醒目红”，一种是“清新绿”。

function my_register_block_styles() {
    register_block_style(
        'core/paragraph',
        array(
            'name'  => 'red-paragraph',
            'label' => __( '醒目红', 'my-theme' ),
        )
    );

    register_block_style(
        'core/paragraph',
        array(
            'name'  => 'green-paragraph',
            'label' => __( '清新绿', 'my-theme' ),
        )
    );
}
add_action( 'init', 'my_register_block_styles' );

这段代码做了什么？

my_register_block_styles() 函数：这是我们的样式注册函数，所有样式注册的代码都放在这里。
add_action( 'init', 'my_register_block_styles' ): 这行代码告诉 WordPress，在 init 钩子触发时，执行 my_register_block_styles() 函数。 init 钩子是 WordPress 初始化时触发的，确保我们的样式在编辑器加载之前就注册好。
register_block_style(): 这个函数就是主角，负责注册样式。
- 第一个 register_block_style() 注册了一个名为 red-paragraph，标签为“醒目红”的样式。
- 第二个 register_block_style() 注册了一个名为 green-paragraph，标签为“清新绿”的样式。

重点：CSS 的魔法

仅仅注册了样式还不够，我们还需要用 CSS 来定义这些样式的具体效果。

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

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

.wp-block-paragraph: 这是段落区块的默认 CSS 类。
.is-style-red-paragraph: 这是 WordPress 自动添加的 CSS 类，当用户选择了“醒目红”样式时，这个类会被添加到段落区块上。
.is-style-green-paragraph: 同理，这是“清新绿”样式的 CSS 类。

如何添加 CSS？

你可以把这段 CSS 代码放到你的主题的 style.css 文件里，或者使用 WordPress 的自定义 CSS 功能。

例子二：给按钮区块设置默认样式

这次，我们来给按钮区块设置一个默认的“主要按钮”样式。

function my_register_button_styles() {
    register_block_style(
        'core/button',
        array(
            'name'      => 'primary-button',
            'label'     => __( '主要按钮', 'my-theme' ),
            'is_default' => true,
        )
    );
}
add_action( 'init', 'my_register_button_styles' );

注意：我们设置了 is_default 为 true，这意味着每次用户插入一个新的按钮区块时，都会自动应用这个“主要按钮”样式。

CSS 代码：

.wp-block-button.is-style-primary-button {
    background-color: #007bff; /* 蓝色 */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
}

第三部分：高级技巧，玩转 register_block_style()

掌握了基本用法，咱们再来点高级的。

技巧一：动态 CSS，让样式更灵活

有时候，你可能需要根据用户的设置来动态生成 CSS。比如，让用户可以自定义按钮的颜色。这时候，你可以使用 WordPress 的 wp_add_inline_style() 函数。

function my_dynamic_button_styles() {
    $button_color = get_theme_mod( 'my_button_color', '#007bff' ); // 从主题自定义设置中获取颜色值，默认蓝色

    $custom_css = "
        .wp-block-button.is-style-dynamic-button {
            background-color: {$button_color};
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
        }
    ";

    wp_add_inline_style( 'wp-block-library', $custom_css ); // 注意这里使用了 'wp-block-library' 作为句柄
}
add_action( 'wp_enqueue_scripts', 'my_dynamic_button_styles' );

function register_dynamic_button_style(){
    register_block_style(
        'core/button',
        array(
            'name'      => 'dynamic-button',
            'label'     => __( '动态按钮', 'my-theme' ),
        )
    );
}
add_action('init','register_dynamic_button_style');

这段代码做了什么？

get_theme_mod(): 从主题自定义设置中获取 my_button_color 的值，如果没有设置，则使用默认值 #007bff (蓝色)。
$custom_css: 构建包含动态颜色值的 CSS 代码。
wp_add_inline_style(): 将动态 CSS 代码添加到 wp-block-library 样式表中。 wp-block-library 是 WordPress 核心区块的样式表句柄，确保我们的 CSS 代码在区块样式之后加载，从而覆盖默认样式。
register_block_style(): 注册一个名为 dynamic-button 的样式。

技巧二：针对特定区块，定制专属样式

有时候，你可能只想给某个特定的区块实例添加样式，而不是影响所有同类型的区块。比如，你想让某个段落区块的字体更大。这时候，你可以使用区块的 className 属性。

在区块设置中添加自定义 CSS 类：

在区块编辑器的“高级”选项卡中，找到“CSS 类”字段，输入你自定义的 CSS 类名，比如 my-custom-paragraph。
编写 CSS 代码：
```
.wp-block-paragraph.my-custom-paragraph {
    font-size: 20px;
}
```
这样，只有添加了 my-custom-paragraph 类的段落区块才会应用这个样式。

技巧三：移除已注册的样式

如果你想移除某个已经注册的样式，可以使用 unregister_block_style() 函数。

function my_unregister_block_styles() {
    unregister_block_style( 'core/paragraph', 'red-paragraph' ); // 移除 'core/paragraph' 区块的 'red-paragraph' 样式
}
add_action( 'init', 'my_unregister_block_styles' );

第四部分：注意事项，避免踩坑

样式名称的唯一性: 每个样式的 name 属性必须是唯一的，否则会导致冲突。
CSS 优先级的控制: 确保你的 CSS 代码的优先级足够高，能够覆盖默认样式。
代码的组织: 将样式注册的代码放在一个单独的文件里，方便管理。
翻译: 记得对 label 属性进行翻译，让你的样式支持多语言。

第五部分：总结，让区块焕发新生

register_block_style() 函数是 WordPress 区块编辑器里一个非常强大的工具，它可以让你轻松地为区块添加自定义样式，让你的网站更加个性化。掌握了它的用法，你就能让你的区块们穿上各种时装，打造独一无二的网站风格。

记住，好的设计就像好的衣品，能让你的网站更加吸引人。赶紧用 register_block_style() 函数，给你的区块们好好打扮一番吧！

好了，今天的讲座就到这里。希望各位技术大侠都能学会这门绝技，让 WordPress 的区块们焕发新生！我们下次再见！

发表回复 取消回复

发表回复取消回复