从WordPress 5.0版开始，古腾堡（Gutenberg）编辑器已被直接集成到WordPress管理员仪表盘中。现在，它是WordPress默认的编辑器。
在Gutenberg编辑器中使用的每个块，都可以通过块属性定义额外的CSS类。通过这些类，我们可以对每一个区块进行独特的样式设计。以下教程将展示如何使用Gutenberg编辑器向块添加额外的CSS类。
添加额外CSS类步骤
设定区块css类的方式非常简单，步骤如下所示：
- 登录到Wordpress的管理员仪表盘；
- 打开已发布的页面或文章，也可以创建一篇新的页面或文章；
- 选中想要修改样式的块；
- 选中右面版中的“区块”，如果右侧没有面板，点选右侧顶部的齿轮图标；
- 在“区块”中，选择“高级”选项卡，在里面的“额外的CSS类”中可以定义我们要添加的类；
- 输入类名称；
- 接下来，点击顶部的“发布”；
- 在当前主题根目录下的“style.css”样式表文件中，添加该类的样式规则。
额外CSS类规则
CSS通过选择器来确定样式规则应该作用在哪个区域，而类选择器就是CSS选择器中的一种。在古腾堡编辑器中，如果想要对某些区块的样式进行设计，那么我们通过定义该区域的类，以方便我们可以设置该区域的样式规则。
在设定区块的类时，类的名称可以按如下所示的规则来定义：
- 单个单词，例如 special；
- 由多个单词组成的术语，每个单词之间用连字符隔开，例如 special-class；
- 我们可以为一个区块定义多个CSS类，每个类之间用空格分开，例如：special-class-1 special-class-2；
- 在定义类时，请注意不要使用网站代码中已经存在的类；
- 我们知道，在编写CSS规则时，我们通过在类前面加一个句点来定位类（比如，.page）。但是，在设置区块的额外的CSS类时，不可以在类名称前加”.”。
案例展示
下面我们以案例的方式，来展示如何为古腾堡文章区块添加“额外的CSS类”。我们的文章中有一个区块的内容以列表形式展现，每一个列表项前面都有一个圆点作为项目的开始，我们通过定义“额外的CSS类”的方式，将前面的圆点变成正方形点。
我们首先为该区块定义一个“额外的CSS类”，类名称为“square-bullet-block”。
然后，将以下CSS规则添加到当前主题的CSS样式表文件“style.css”中：
.square-bullet-list-block {
list-style-type: square;
}
更新CSS规则后，该区块的样式显示为以方块开头的项目表，如下所示：
通过上面的步骤，我们就已经成功的为目标区块设定了CSS类，并应用了新的样式规则。通过古腾堡编辑器的“额外的CSS类”功能，我们可以为文章创建更丰富的样式。
作者：牛奇网，本站文章均为辛苦原创，在此严正声明，本站内容严禁采集转载，面斥不雅请好自为之，本文网址：https://www.niuqi360.com/wordpress/add-additional-css-classes-to-wordpress-block/
