WordPress theme.json文件的介绍随着WordPress Gutenberg块状编辑器的发展，主题开发者

随着WordPress Gutenberg块状编辑器的发展，主题开发者被鼓励将其整合到他们的工作中。但在某些方面，编辑器本身仍然是一个进展中的工作。这导致了挫折感。

虽然包括一些功能已经足够简单，但也有一些挑战。其中最令人头痛的是定制块样式和设置默认调色板。

这些项目必须在一个主题的不同部分进行声明和样式设计。当你需要做出改变时，这可能意味着要编辑多个文件。如果你切换到一个新的主题，你将不得不从头开始重新创建这一切。

解决办法是什么？输入WordPress的theme.json 文件。它的目的是成为一个包罗万象的地方，用于在前端和后端对块状编辑器进行造型。

今天，我们将看一看theme.json 能做什么，以及它将如何使WordPress主题开发者受益。让我们开始吧

把块状样式和默认值放在一个屋檐下

根据Block Editor Handbook，theme.json 背后的原理是提供 "一种定义Block Editor设置的标准方式"。在实践中，它为主题开发者提供了对各种块的样式和后端用户可用选项的精细控制。

这允许为颜色、字体、甚至编辑器本身设置全站默认的样式。但它也使开发人员能够更深入地管理每个区块的东西。

有了theme.json ，就有可能考虑到一个特定的块与其他块有不同的默认值的一次性情况。例如，如果你想为Columns块提供一个独特的默认字体大小，你可以在这个文件中这样做。同样地，你也可以从同一块中删除间距选项。

其结果是一个与主题更紧密结合的块状编辑器。开发人员不必再满足于Gutenberg的开箱即用的默认值，也不必再处理笨重的变通方法。此外，他们可以为用户如何以一种更容易维护的方式操作块设置参数。

现在是 "神奇 "的部分。WordPress将读取你的theme.json 文件中的设置并为你输出必要的CSS。没有必要在你的样式表上乱砍一气，只有一个文件需要改变。这多酷啊？

还有一些性能上的好处。通常情况下，在编辑器中定制块样式意味着同时加载原始和编辑的版本。

正如手册中所说的，"......如果一个主题和一个用户设置了段落的字体大小，我们就只对来自用户的样式进行排队，而不是主题的。"更少的CSS行数意味着更快的加载时间。

在我们开始配置我们的theme.json 文件之前，有几个要求需要弄清楚。

WordPress 5.8及以上版本是必需的。

该文件应该位于你的主题的根目录下。比如说。/wp-content/themes/mytheme/theme.json

可用的设置预计会随着时间的推移而增加，有些是实验性的。因此，你可能需要安装官方的Gutenberg插件来访问某些项目。

不过，还是有很多好东西可以玩的!让我们来探讨一个基本的例子。

正如其名称所示，theme.json 文件是用JSON写的。而且，一旦你有了一个基本的模板，就可以按照既定的语法来编辑或添加到文件中。

最终，人们可以设想出大量的模板和代码生成器供开发人员使用。在这个演示中，我们使用了Gutenberg Theme.json Creator。它提供了一个生成自定义文件的简单接口。

Gutenberg Theme.json Creator home page.

我们的任务是清理我们网站上的颜色选项。在默认情况下，用户可以选择的颜色简直太多了--包括创建自己的自定义色调。

这可能会导致一个不一致的用户界面。因此，我们将把事情缩减到只有我们品牌的调色板。

The WordPress block editor with a full palette of color options.

为此，我们将在Gutenberg Theme.json Creator中进行以下调整。

现在，我们可以将生成的输出复制到一个新的theme.json 文件中，并将其保存到我们主题的根目录中（这里我们使用的是Twenty Nineteen）。

我们的自定义theme.json 文件如期工作。我们配置的简化调色板已经取代了默认设置。而且，用户创建自定义色调和梯度的能力已经从块状编辑器中移除。

此外，WordPress已经为我们编写了所有需要的CSS。因此，我们在块状编辑器中所作的任何颜色变化也会反映在前端。

Color palette changes reflected on the front end of a website and within the CSS.

最后，因为所有这些都在一个文件里，所以将来的修改和添加将是一个相对简单的过程。

我们只是触及了theme.json 的能力的表面。如果你想进一步了解你的知识，请查看这些有用的资源。