区块的优势之一，就是能够在每个区块级别控制其外观。
要实现这一点，你可以使用所谓的区块支持功能，并定义区块的样式。
让我们来看看这是如何工作的。
区块支持
区块支持是一种API，允许区块声明对某些常见功能的支持。
例如，大多数区块支持设置对齐方式、背景色、文字颜色、排版等功能。
你可以在区块元数据中定义对这些常见功能的支持，一旦启用，区块在编辑器中就会拥有这些功能。
添加区块支持
要添加对某个功能的支持，你需要在block.json文件的区块元数据的supports属性中定义它。
打开src目录中的block.json文件，更新supports属性，加入align对齐支持。
{
"supports": {
"align": true
}
}
构建过程完成后，创建一篇文章，并将该区块添加到文章中。你会看到该区块现在可以设置对齐方式了。
如你所见，只需启用对齐支持，区块就具备了设置对齐的能力，无需任何额外代码。
启用任何可用的区块支持，只需将它们添加到block.json文件的supports属性中即可，这能为你的用户提供丰富的选项来自定义区块外观。
区块样式
然而，在某些情况下，你可能更愿意自己定义区块的样式。
在“搭建新区块”课程中定义的版权日期区块需求中，我们要求该区块始终具有特定的边框和边框颜色。
这就是style.scss和editor.scss文件的用武之地。这些文件允许你设置特定的区块样式，然后这些样式会在编辑器和前端应用。
这两个文件是语法上很棒的样式表，也称为Sass文件。就像用于创建区块的JSX格式在构建步骤中转换为常规JavaScript一样，Sass文件会转换为常规CSS。这些文件遵循新的SCSS语法，你可以在Sass网站上了解更多信息。幸运的是，你也可以在Sass文件中直接编写纯CSS，这同样有效。
在“搭建新区块”课程中，你了解了这两个文件的用途：
style.scss：此文件中的样式会应用于前端和编辑器中的区块editor.scss：此文件中的样式仅应用于编辑器中的区块
如果你需要某个特定样式同时应用于前端和编辑器中的区块，可以将样式添加到style.scss文件中。
打开src目录中的style.scss文件，你会看到以下脚手架代码：
.wp-block-create-block-copyright-date-block {
background-color: #21759b;
color: #fff;
padding: 2px;
}
你可能注意到这个样式并没有应用到当前区块上。这是因为通过useBlockProps应用到区块父容器的类名是根据区块名称自动生成的。
在block.json文件中，区块的名称是copyright-date/copyright-date-block，因此生成的类名是wp-block-copyright-date-copyright-date-block。
你在style.scss文件中看到的被定位的类名是基于区块的原始名称，所以你需要修改它，使其与生成的类名匹配。
同时，你也可以为区块添加边框和边框颜色。
.wp-block-copyright-date-copyright-date-block {
background-color: #21759b;
color: #fff;
padding: 2px;
border: 2px solid #000;
}
因为你希望边框始终显示，所以不需要定义任何特定的编辑器样式。这意味着你可以删除editor.scss文件。
你也可以删除block.json文件中的editorStyle属性。
以及edit.js文件中导入editor.scss文件的代码。
这样做可能会破坏你的开发服务器，因此你可能需要重新启动它。
运行构建过程后，创建一篇文章，并将该区块添加到文章中。
你会看到该区块现在具有你在style.scss文件中定义的边框和边框颜色。当你预览区块时，该样式也会在前端应用。
总结
在开发区块时，思考哪些外观元素你希望用户能够编辑，哪些应该始终应用于区块，是很有用的。然后，你可以添加相应的支持，或者将任何特定样式硬编码到相关的样式文件中。
有关区块支持的更多信息，请参阅区块编辑器手册中的详细支持页面。