WordPress 6.2添加了对每个块CSS的支持theme.json。这意味着现在，当内置设计工具不太涵盖您的用例时，您可以添加自定义代码的片段。
theme.json支持足够的CSS功能涵盖最常见的样式。但是它不能合理涵盖每种情况，并且在编辑UI中仍然具有匹配的设计工具，这是一个重要的考虑因素。如果界面涵盖了所有可能性，则用户体验将受到影响。
有时候，您仍然需要良好的CSS来实现块主题。
为什么不只是将CSS贴在style.css并完成吗？为什么要打扰将CSS混合到theme.json？
这些问题的答案取决于您 – 您是主题设计师。但是使用的主要优点theme.json通过样式表是.json文件将CSS插入UI中。用户可以在块的自定义CSS面板中直接自定义代码。
现代WordPress让主题和用户交流。该主题通过theme.json，用户可以在接口中自定义它。在引擎盖下，所有这些格式均已格式化为JSON（甚至用户自定义），并根据一组标准的规则工作。您以设计师的身份购买该系统的越多，用户将拥有的灵活性越高。
也有一些陷阱，您将了解这些陷阱。该系统不是完美的，但是工具足够牢固，您可以开始研究此功能并决定何时何地使用它。
添加每个块CSS
您应该已经熟悉如何自定义块样式theme.json。如果没有，请加快 全球设置和样式文档。
您可以通过添加新的样式添加自定义样式css属性styles.blocks.[block-name]对象中theme.json。这很酷：当您以这种方式添加CSS时，您会这样做不是需要知道选择器。WordPress将自动为块生成该块。
注意此JSON代码格式如何css财产：
{
"css": "color: red;"
}该值是可能看起来很熟悉的CSS声明。唯一的区别是JSON用引号包装声明并将其分配给css财产。
现在，请尝试添加单个CSS声明。这theme.json代码示例添加了一个自定义letter-spacing邮政标题块的价值：
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"styles": {
"blocks": {
"core/post-title": {
"css": "letter-spacing: 1px;"
}
}
}
}将这些更改保存到您的theme.json。WordPress将在前端和编辑器中为此生成CSS：
.wp-block-post-title {
letter-spacing: 1px;
}现在，打开 外观>编辑器 WordPress管理员中的屏幕。然后，打开 样式 面板并选择 块>帖子标题>其他块CSS。如下所示，您的自定义CSS应该出现：
因为您在theme.json，您的用户可以直接在接口中直接进行更改。他们可以跳过CSS特异性的复杂性，并且永远不会知道试图在此示例中找到合适的选择器的麻烦。
这是您和您的用户之间非常强大的桥梁。
目前，WordPress仅让您将CSS添加到块中theme.json。有一个 公开票 添加元素支持。
技巧，技巧和陷阱
您已经学会了如何添加基本CSS声明，但是您还可以使用一些技巧来处理更复杂的方案。
使用＆选择器和支架
WordPress支持&选择器，就像您在Sass这样的语言中所看到的。但这并不完全相同。例如，它不支持嵌套的CSS块。
但是它确实适用于将选择器附加到WordPress生成的块类中。
一分钟前，您瞄准了邮政标题块，其中有一类.wp-block-post-title。如果您只想在它附上自定义类时才能定位它，该怎么办？也许，当您注册自定义时块样式变化？
假设您注册了名为的块样式letter-spacing-sm，将有一个生成的类.is-style-letter-spacing-sm。您可以用&.is-style-letter-spacing-sm并用括号包裹您的CSS声明：
{
"core/post-title": {
"css": "&.is-style-letter-spacing-sm { letter-spacing: 1px; }"
}
}WordPress将生成此CSS：
.wp-block-post-title.is-style-letter-spacing-sm {
letter-spacing: 1px;
}从技术上讲，您可以编写无及时的自定义代码，WordPress将正确附加它。但是&给您一个视觉提醒.is-style-letter-spacing-sm正在附加到另一堂课。
针对嵌套元素
Ampers和真正闪耀的位置是靶向元素。例如，假设您想旋转图像块字幕的文本，如下：
如果您在下面写了代码，则最终会出现一个损坏的选择器：
{
"core/image": {
"css": "figcaption { transform: rotate( 1deg ); }"
}
}WordPress会附加figcaption到块类名称：
.wp-block-imagefigcaption {
transform: rotate( 1deg );
}您要么必须在代码开头放置一个空间，要么使用&。记住添加空间不是理想的选择，当用户进行编辑时，它会更容易中断。
这样的写作要容易得多，而且很容易出现错误：
{
"core/image": {
"css": "& figcaption { transform: rotate( 1deg ); }"
}
}这将触发WordPress生成预期的CSS代码块：
.wp-block-image figcaption {
transform: rotate( 1deg );
}大型CSS代码块
如果您过去与JSON的工作足够多，您可能已经注意到将CSS作为JSON String值的保存有几个主要缺点：
- CSS没有内置的语法突出显示。
- JSON不支持线路断裂，因此忘记使用多行CSS块。
可能会有一些工具可以帮助您解决这些限制，但是在使用默认系统时，您会很快遇到问题。
例如，您可能想要添加一个看起来像手绘的边框<img>元素通过图像块输出，如下所示：
该设计需要几个CSS声明才能完成：
{
"core/image": {
"css": "& img { border: 2px solid currentColor; overflow: hidden; box-shadow: 0 4px 10px 0 rgba( 0, 0, 0, 0.3 ); border-radius: 255px 15px 225px 15px/15px 225px 15px 255px !important; }"
}
}这是您可能开始质疑使用此功能是否值得的时刻，因为JSON不是编写CSS代码大块的理想方法。添加多个CSS声明，事情变得非常凌乱，真的很快。
该代码在编辑器中看起来也很混乱 – 供您的用户阅读，并且有点可怕，以供一些编辑。解决这个问题的一种方法：使用\n用于折线和\t对于最终字符串中的标签。这是一个例子：
{
"core/image": {
"css": "& img {\n\tborder: 2px solid currentColor;\n\toverflow: hidden;\n\tbox-shadow: 0 4px 10px 0 rgba( 0, 0, 0, 0.3 );\n\tborder-radius: 255px 15px 225px 15px/15px 225px 15px 255px !important;\n}"
}
}这将使用户在接口中一个很好的CSS块：
& img {
border: 2px solid currentColor;
overflow: hidden;
box-shadow: 0 4px 10px 0 rgba( 0, 0, 0, 0.3 );
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px !important;
}JSON可能对您看起来不太好，但是您的用户可能会欣赏CSS格式。
提示： 使用\"在JSON字符串中使用时，请在CSS中逃脱双重报价。
何时在theme.json中使用CSS
CSS支持theme.json可以是一个强大的功能，也可以是头痛的食谱。在当前状态下，当您对特定块的设计更改时，它可以很好地工作，尤其是当您的主题没有加载任何样式表时。
网站编辑器中与样式接口的集成也非常适合想要自定义主题添加的CSS的用户。
如果您想在同时还要使用更大的CSS块中获得最大收益，则需要舒缓疼痛点的工具。例如，一个从样式表文件中摘取CSS的脚本，将代码格式化为有效的JSON字符串，然后将其保存到theme.json可能是答案。这超出了这篇文章的范围，但是也许它会激励您建立解决方案，从而突破主题的界限。
最终，这是工具箱中的另一个工具。当您的项目有意义时使用它。
道具 @玛丽鲍姆，@BPH，和 @Poena 用于反馈和审查。棕榈树的照片 @耻辱 来自 WordPress照片目录。