WordPress源码深度解析之：`Block`的`Styles`：如何为块添加自定义样式。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷们，晚上好！我是你们的老朋友，今天咱们来聊点WordPress里好玩的东西：Block的Styles。别看它名字挺唬人，其实就是给你的WordPress块加点自定义的“衣服”，让它们穿得更漂亮、更有个性。

一、什么是 Block Styles？

简单来说，Block Styles就是让你能给同一个Block提供不同的外观选项。想象一下，一个按钮块，你可以让它变成圆角、方角、红色、蓝色，甚至是渐变色。这些不同的外观，就是通过Block Styles来实现的。

以前我们想修改块的样式，要么写一大堆CSS，要么直接改主题文件，麻烦得要死。现在有了Block Styles，只需要定义好，用户就能在编辑器里直接选择，方便快捷！

二、为什么要用 Block Styles？

提高用户体验： 用户可以更轻松地自定义内容外观，无需深入代码。
保持一致性： 确保网站风格统一，避免用户随意修改导致页面混乱。
降低维护成本： 集中管理样式，方便后期维护和更新。
增强可复用性： 同一个块可以根据不同场景应用不同的样式。

三、如何添加 Block Styles？

添加Block Styles主要有两种方式：

PHP注册： 在你的主题或插件的functions.php文件中，使用register_block_style()函数注册。
block.json注册： 在你的块的block.json文件中定义styles属性。

咱们先来看第一种，PHP注册。

1. PHP注册 Block Styles

首先，你需要找到你的主题或者插件的functions.php文件，然后添加如下代码：

<?php
add_action( 'init', 'my_register_block_styles' );

function my_register_block_styles() {
    register_block_style(
        'core/button',  // 目标Block的名称，这里是核心按钮块
        [
            'name'         => 'rounded',  // 样式的名称，用于识别
            'label'        => __( '圆角按钮', 'my-theme' ),  // 样式的显示名称，用户在编辑器中看到的
            'is_default'   => false, // 是否作为默认样式，一般不设为true
        ]
    );

    register_block_style(
        'core/button',
        [
            'name'         => 'gradient',
            'label'        => __( '渐变按钮', 'my-theme' ),
            'is_default'   => false,
        ]
    );

    register_block_style(
        'core/paragraph',
        [
            'name'         => 'fancy-paragraph',
            'label'        => __( '花哨段落', 'my-theme' ),
            'is_default'   => false,
        ]
    );
}

这段代码干了什么呢？

add_action( 'init', 'my_register_block_styles' ); ：告诉WordPress，在初始化的时候，执行my_register_block_styles这个函数。
register_block_style( 'core/button', ... ); ：注册一个按钮块的样式。
- 'core/button' ：指定要应用样式的块，这里是WordPress核心的按钮块。你可以替换成其他块的名称，比如core/heading（标题块）、core/paragraph（段落块）等等。
- 'name' => 'rounded' ：给这个样式起个名字，叫做rounded。这个名字很重要，后面我们要用它来添加CSS样式。
- 'label' => __( '圆角按钮', 'my-theme' ) ：给这个样式一个友好的标签，方便用户在编辑器里识别。 __( '圆角按钮', 'my-theme' ) 是WordPress的国际化函数，用于翻译文本。 'my-theme' 是你的主题或插件的文本域名。
- 'is_default' => false ：指定这个样式是否是默认样式。如果设置为true，那么这个样式会被默认应用到按钮块上。一般情况下，我们不设置默认样式，让用户自己选择。

2. 添加 CSS 样式

注册了样式之后，我们还需要给它们添加CSS样式，才能真正改变块的外观。你可以把CSS样式添加到你的主题的style.css文件，或者创建一个单独的CSS文件，然后在functions.php文件中引入。

为了方便起见，我们直接把CSS样式添加到style.css文件中。

/* 圆角按钮样式 */
.wp-block-button.is-style-rounded .wp-block-button__link {
    border-radius: 20px;
}

/* 渐变按钮样式 */
.wp-block-button.is-style-gradient .wp-block-button__link {
    background: linear-gradient(to right, #4CAF50, #2196F3);
    color: white;
    border: none;
}

/* 花哨段落样式 */
.wp-block-paragraph.is-style-fancy-paragraph {
    font-family: 'Arial Black', sans-serif;
    font-size: 18px;
    color: #E91E63;
    border-left: 5px solid #FFC107;
    padding-left: 10px;
}

这段CSS代码做了什么呢？

.wp-block-button.is-style-rounded .wp-block-button__link ：选择应用了rounded样式的按钮块的链接。 wp-block-button 是按钮块的CSS类名，is-style-rounded 是WordPress自动添加的类名，表示这个按钮块应用了rounded样式。 .wp-block-button__link 是按钮块链接的CSS类名。
.wp-block-button.is-style-gradient .wp-block-button__link ：选择应用了gradient样式的按钮块的链接。
.wp-block-paragraph.is-style-fancy-paragraph ：选择应用了fancy-paragraph样式的段落块。

3. 刷新页面，查看效果

保存functions.php和style.css文件后，刷新你的WordPress后台编辑器页面。现在，当你选择一个按钮块或者段落块时，你应该能在右侧的“样式”面板中看到你注册的样式。

选择“圆角按钮”样式，你的按钮就会变成圆角。选择“渐变按钮”样式，你的按钮就会变成渐变色。选择“花哨段落”样式，你的段落就会变成花哨的样子。

2. block.json注册 Block Styles

现在我们来看第二种方式，使用block.json文件注册Block Styles。这种方式更适合自定义块。

如果你正在开发一个自定义块，那么你可以在块的block.json文件中定义styles属性。

{
  "name": "my-plugin/my-block",
  "title": "我的自定义块",
  "category": "common",
  "icon": "smiley",
  "description": "这是一个自定义块的例子。",
  "supports": {
    "html": false
  },
  "attributes": {
    "content": {
      "type": "string",
      "default": "Hello World!"
    }
  },
  "styles": [
    {
      "name": "default",
      "label": "默认样式",
      "isDefault": true
    },
    {
      "name": "fancy",
      "label": "花哨样式"
    },
    {
      "name": "dark",
      "label": "深色样式"
    }
  ],
  "textdomain": "my-plugin",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css"
}

在这个block.json文件中，我们添加了一个styles属性，它是一个数组，包含了三个样式：

"name": "default" ：默认样式。
"name": "fancy" ：花哨样式。
"name": "dark" ：深色样式。

"isDefault": true 表示default样式是默认样式。

添加 CSS 样式

和PHP注册方式一样，我们需要给这些样式添加CSS样式。不同的是，我们需要把CSS样式添加到块的style-index.css文件中。

/* 默认样式 */
.wp-block-my-plugin-my-block {
    background-color: #f0f0f0;
    padding: 20px;
    border: 1px solid #ccc;
}

/* 花哨样式 */
.wp-block-my-plugin-my-block.is-style-fancy {
    background-color: #e0e0e0;
    border: 2px dashed #999;
    font-family: 'Arial Black', sans-serif;
}

/* 深色样式 */
.wp-block-my-plugin-my-block.is-style-dark {
    background-color: #333;
    color: #fff;
}

这段CSS代码做了什么呢？

.wp-block-my-plugin-my-block ：选择自定义块。 wp-block-my-plugin-my-block 是WordPress自动生成的CSS类名，my-plugin 是你的插件名称，my-block 是你的块名称。
.wp-block-my-plugin-my-block.is-style-fancy ：选择应用了fancy样式的自定义块。
.wp-block-my-plugin-my-block.is-style-dark ：选择应用了dark样式的自定义块。

刷新页面，查看效果

保存block.json和style-index.css文件后，刷新你的WordPress后台编辑器页面。现在，当你选择你的自定义块时，你应该能在右侧的“样式”面板中看到你注册的样式。

选择“花哨样式”，你的块就会变成花哨的样子。选择“深色样式”，你的块就会变成深色的样子。

四、 Block Styles 的高级用法

除了基本的注册和添加CSS样式之外，Block Styles还有一些高级用法，可以让你更灵活地控制块的外观。

1. 使用JavaScript动态添加样式

有时候，你可能需要在JavaScript中动态添加Block Styles。比如，根据用户的选择，动态改变块的样式。

你可以使用wp.blocks.registerBlockStyle()函数在JavaScript中注册Block Styles。

wp.blocks.registerBlockStyle( 'core/button', {
    name: 'dynamic',
    label: '动态样式',
    isDefault: false,
    style: {
        backgroundColor: 'red',
        color: 'white',
    },
} );

这段代码会在按钮块中注册一个名为dynamic的样式，并设置背景色为红色，文字颜色为白色。

注意： 这种方式注册的样式是动态的，只有在JavaScript代码执行后才会生效。

2. 使用enqueue_block_assets钩子添加样式

你也可以使用enqueue_block_assets钩子在WordPress的wp_enqueue_scripts钩子之前加载CSS样式。这种方式可以让你更精细地控制样式的加载时机。

<?php
add_action( 'enqueue_block_assets', 'my_enqueue_block_styles' );

function my_enqueue_block_styles() {
    wp_enqueue_style(
        'my-block-styles',
        get_template_directory_uri() . '/assets/css/block-styles.css',
        array( 'wp-blocks' )
    );
}

这段代码会在编辑器和前端加载block-styles.css文件。

3. 使用 Block Variations

Block Variations是比Block Styles更高级的一种方式，它可以让你创建块的变体，每个变体都有不同的属性和样式。 Block Variations可以看作是Block Styles的加强版。

关于Block Variations，咱们今天就不深入探讨了，以后有机会再聊。

五、 Block Styles 的一些坑

CSS优先级： 要注意CSS优先级的问题。如果你的样式没有生效，可能是因为CSS优先级不够高。你可以使用!important来提高CSS优先级，但是不建议滥用!important。
缓存问题： 修改了functions.php或style.css文件后，要记得清除缓存，才能看到最新的效果。
兼容性问题： Block Styles是WordPress 5.3版本之后才引入的，所以要注意兼容性问题。如果你的网站使用旧版本的WordPress，那么Block Styles可能无法正常工作。
块的结构： 不同的块有不同的HTML结构，所以在添加CSS样式时，要仔细研究块的HTML结构，才能准确地选择元素。

六、总结

Block Styles是一个非常强大的工具，可以让你更灵活地控制WordPress块的外观。掌握了Block Styles，你就可以轻松地为你的网站添加自定义样式，提高用户体验，降低维护成本。

希望今天的讲座对大家有所帮助。如果大家有什么问题，欢迎在评论区留言。咱们下期再见！

附录：常用Block Styles属性表格

属性名	类型	描述
`name`	string	样式的名称，用于识别。这个名称必须是唯一的，并且只能包含小写字母、数字和短横线。
`label`	string	样式的显示名称，用户在编辑器中看到的。这个名称可以包含任何字符，并且可以使用WordPress的国际化函数进行翻译。
`isDefault`	boolean	是否作为默认样式。如果设置为`true`，那么这个样式会被默认应用到块上。一般情况下，我们不设置默认样式，让用户自己选择。
`style`	object	（仅适用于JavaScript注册）一个包含CSS属性的对象，用于设置块的样式。这个属性是可选的。如果设置了这个属性，那么WordPress会自动生成CSS样式，并将它们添加到页面中。这个属性的值应该是一个JavaScript对象，对象的键是CSS属性名，对象的值是CSS属性值。例如，`{ backgroundColor: 'red', color: 'white' }`。
`inline_style`	string	(已废弃) 一个包含CSS代码的字符串，用于设置块的样式。这个属性已经被废弃，不建议使用。请使用`style`属性代替。
`className`	string	(已废弃) 一个CSS类名，用于将样式应用到块上。这个属性已经被废弃，不建议使用。请使用`name`属性和CSS选择器代替。

记住，实践是检验真理的唯一标准！多动手试试，你就能更好地理解Block Styles的用法。祝大家编码愉快！

发表回复 取消回复

发表回复取消回复