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

各位技术宅，代码狂，以及WordPress爱好者们，早上好！今天咱们来聊聊一个能让你的WordPress区块更“潮”的东西：register_block_style()。这玩意儿就像是给你的积木玩具配上了一堆新贴纸和涂料，让它们不再是千篇一律的方块块，而是能展现出你的独特品味！

所以，准备好你的咖啡和键盘，咱们开讲！

什么是 register_block_style()？

简单来说，register_block_style() 是一个 WordPress 函数，用于为现有的区块添加自定义样式选项。想象一下，你有一个按钮区块，默认是蓝色，但你希望用户可以选择红色、绿色或者干脆整个按钮变成透明的。register_block_style() 就是帮你实现这个愿望的“魔法棒”。

为什么我们需要它？

直接修改核心区块的 CSS？听起来很诱人，但这样做就像是在别人的代码上乱涂乱画，升级的时候很可能被覆盖掉。而 register_block_style() 提供了一种更安全、更优雅的方式来扩展区块的样式，确保你的修改不会被 WordPress 的更新所影响。

源码剖析：register_block_style() 的内部结构

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

register_block_style(
    string   $block_name,
    array    $style_settings
);

$block_name: 这是一个字符串，指定你要为其添加样式的区块的名称。例如，'core/button' 代表按钮区块，'core/paragraph' 代表段落区块。
$style_settings: 这是一个数组，包含了样式的配置信息。这个数组是关键，我们会在后面详细讲解。

接下来，我们深入到 WordPress 核心代码中，看看 register_block_style() 到底做了些什么（简化版，只保留核心逻辑）：

// WordPress 核心代码 (简化版)
function register_block_style( $block_name, $style_settings ) {
    global $wp_block_styles;

    // 确保 $wp_block_styles 是一个数组
    if ( ! is_array( $wp_block_styles ) ) {
        $wp_block_styles = array();
    }

    // 初始化区块的样式数组（如果不存在）
    if ( ! isset( $wp_block_styles[ $block_name ] ) ) {
        $wp_block_styles[ $block_name ] = array();
    }

    // 添加新的样式配置
    $wp_block_styles[ $block_name ][] = $style_settings;

    //  触发一个 action，允许其他插件或主题修改样式
    do_action( 'after_register_block_style', $block_name, $style_settings );
}

从源码可以看出，register_block_style() 主要做了以下几件事：

存储样式配置： 它将你提供的样式配置信息 $style_settings 存储在一个全局变量 $wp_block_styles 中。这个变量实际上是一个多维数组，以区块名称为键，每个区块名称对应一个样式配置数组。
触发 Action： 它触发了一个名为 after_register_block_style 的 action。这个 action 允许其他插件或主题在样式注册完成后对其进行修改或扩展。

$style_settings 数组的奥秘

$style_settings 数组是控制样式的核心。它通常包含以下几个键：

键名	类型	描述	示例
`name`	string	样式的唯一标识符。这个名称会在 HTML 代码中作为 CSS 类名使用，所以要避免使用空格和特殊字符。建议使用小写字母和短横线。	`'rounded'`
`label`	string	样式的用户友好的标签。这个标签会显示在 WordPress 编辑器的样式选择器中，让用户知道这个样式是干什么的。	`'圆角按钮'`
`is_default`	boolean	(可选) 如果设置为 `true`，则该样式将成为区块的默认样式。这意味着，如果用户没有选择任何其他样式，该样式将被自动应用。	`true` 或 `false`

实战演练：为按钮区块添加圆角样式

现在，让我们通过一个实际的例子来演示如何使用 register_block_style()。我们将为按钮区块添加一个名为 "rounded" 的圆角样式。

首先，在你的主题的 functions.php 文件或者自定义插件中添加以下代码：

add_action( 'init', 'my_register_block_styles' );

function my_register_block_styles() {
    register_block_style(
        'core/button',
        array(
            'name'  => 'rounded',
            'label' => '圆角按钮',
        )
    );
}

这段代码做了以下几件事：

注册 Action： 使用 add_action() 函数，将 my_register_block_styles() 函数绑定到 init action 上。init action 在 WordPress 初始化时被触发，确保我们的样式注册代码在区块注册之后执行。
定义注册函数： my_register_block_styles() 函数调用 register_block_style() 函数，注册一个新的样式。
配置样式： 我们为 core/button 区块注册了一个名为 "rounded"、标签为 "圆角按钮" 的样式。

刷新你的 WordPress 编辑器，你会发现按钮区块的样式选择器中多了一个 "圆角按钮" 的选项。但是，现在点击这个选项，按钮并没有变成圆角，因为我们还没有定义这个样式的 CSS 代码。

接下来，我们需要编写 CSS 代码，将 "rounded" 样式应用到按钮上。可以在你的主题的 style.css 文件或者自定义 CSS 文件中添加以下代码：

.wp-block-button.is-style-rounded .wp-block-button__link {
    border-radius: 20px;
}

这段 CSS 代码做了以下几件事：

选择器： .wp-block-button.is-style-rounded .wp-block-button__link 是一个 CSS 选择器，用于选择应用了 "rounded" 样式的按钮的链接元素。is-style-rounded 类是由 WordPress 自动添加到应用了该样式的区块上的。
样式： border-radius: 20px; 将按钮的链接元素的边框半径设置为 20px，从而实现圆角效果。

现在，再次刷新你的 WordPress 编辑器，并选择 "圆角按钮" 样式，你会看到按钮变成了圆角！

更高级的用法：动态 CSS

上面的例子只是一个简单的静态样式。如果你想要更灵活地控制样式，可以使用动态 CSS。动态 CSS 允许你根据区块的属性值来生成 CSS 代码。

例如，假设你想要让用户可以自定义按钮的圆角半径。你可以使用 block.json 文件来定义一个名为 "borderRadius" 的属性，然后在 CSS 代码中使用这个属性值。

首先，在你的主题或插件中创建一个 block.json 文件，并添加以下代码：

{
  "name": "my-custom-button",
  "title": "自定义按钮",
  "category": "common",
  "attributes": {
    "borderRadius": {
      "type": "number",
      "default": 10
    }
  },
  "supports": {
    "align": true
  },
  "editorStyle": "my-custom-button-editor-style",
  "style": "my-custom-button-style"
}

然后在你的 JavaScript 文件中，注册这个区块，并允许用户编辑 borderRadius 属性。

最后，在你的 CSS 文件中，使用 CSS 变量来应用 borderRadius 属性的值：

.wp-block-my-custom-button {
  --border-radius: 10px; /* 默认值 */
}

.wp-block-my-custom-button .wp-block-button__link {
  border-radius: var(--border-radius);
}

然后，使用 JavaScript 来更新 CSS 变量的值，使其与 borderRadius 属性的值保持同步。

最佳实践和注意事项

命名规范： 为你的样式选择清晰、简洁的名称。使用小写字母和短横线，避免使用空格和特殊字符。
CSS 优先级： 确保你的 CSS 代码的优先级足够高，可以覆盖核心区块的默认样式。可以使用更具体的选择器或者 !important 声明。
兼容性： 在不同的浏览器和设备上测试你的样式，确保它们看起来正常。
性能： 避免使用过于复杂的 CSS 代码，这可能会影响页面的加载速度。
文档： 为你的自定义样式编写清晰的文档，方便其他开发者使用。

总结

register_block_style() 是一个强大的工具，可以让你轻松地为 WordPress 区块添加自定义样式选项。通过掌握 register_block_style() 的用法，你可以创建更灵活、更个性化的网站，并提升用户体验。

希望今天的讲解对你有所帮助。现在，去尝试一下，给你的区块们换上新装吧！记住，代码的世界，没有做不到，只有想不到！祝你编程愉快！

发表回复 取消回复

发表回复取消回复