深入了解 2222 和 WordPress 块主题

虽然比原计划晚了一点，但我们正在获得一个新的 WordPress 默认主题。 它的名字是二十二十二！

新的 WordPress 默认主题随即将发布的 WordPress 5.9 版本一起提供。 我们很想了解更多关于新主题的信息，因此我们在运行 WordPress 5.9 的本地开发环境中安装并测试了 Twenty Twenty-2。

在结束我们的想法之前，我们将向您展示我们的结果，为您带来对新 WordPress 主题来龙去脉的深入概述。

Twenty Twenty-2 被设计为有史以来最灵活、最轻量级和可自定义的默认主题。 它为测试块、模式和模板提供了一个很好的游乐场。

作为一个块主题，它将帮助您更好地探索全站点编辑、全局样式、导航块和新的图像库，这些是 WordPress 5.9 中最受期待的功能。

我们必须马上说二十二十二是第一个默认块主题！

新主题最雄心勃勃的目标之一是赋予用户权力。 有了这么多开箱即用的模式和模板，用户只需单击几下即可构建复杂的布局。 剩下的只是样式定制。

从技术的角度来看，写关于 222 的文章与写 WordPress 5.9 附带的最新和最强大的功能没有太大区别。 但是二十二十二为我们提供了一个放大镜，可以更好地欣赏新的站点编辑功能并更好地了解平台的未来。

因此，我们在这里向您介绍新主题。

首先，我们将探索用户将使用 WordPress 5.9 和 Twenty Twenty-2 体验到的新站点编辑流程。

之后，我们将深入探讨在 2222 中实现的主要块主题功能。 您将了解全局样式、块模式、模板和模板部分。

但是关于二十二十二和 WordPress 块主题还有很多话要说。 因此，作为附加章节，我们将简要介绍如何利用theme.json文件来扩展二十二十二的功能。

这是下一个 WordPress 默认主题的初步介绍！ 我很高兴能与@jffng 共同领导它，我们都希望你能为它做出贡献和/或享受使用它！ https://t.co/covjrpgFIO

— kjellr (@kjellr) 2021 年 10 月 6 日

让我们开始工作并深入了解全新的 2222 WordPress 默认主题。

2222 带来新的站点编辑流程

几个完整的站点编辑功能成为 WordPress 5.9 的核心。 使用安装了二十二十二等块主题的最新 WordPress 版本的站点所有者将很快能够：

• 使用更多块和模式创建和编辑帖子和页面
• 通过 Global Styles 接口自定义theme.json文件中定义的设置和样式
• 为页面和帖子创建和编辑模板
• 为页眉、页脚和其他模板区域创建和编辑模板部分

随着所有这些功能合并到核心，WordPress 核心贡献者一直在讨论信息架构的演变，并重新设计了整个站点编辑流程。

激活二十二十二后，您可能会注意到的第一件事是站点编辑器的入口点不再位于 WordPress 仪表板的主菜单中，而是已移至外观菜单下。

将模板和样式编辑功能放在同一个外观菜单下应该可以简化编辑体验。 它应该使您更容易理解您正在访问的功能与您的页面呈现相关。

编辑器菜单项打开站点的主页模板。 根据您的阅读设置，这可以是您的最新帖子页面或静态页面。

现在，单击左上角的 WordPress 图标会显示一个新的站点编辑器导航菜单，包括三个菜单项：站点、模板和模板部件。

让我们仔细看看。

站点选项打开主页模板（最新的博客文章或静态主页）。

从模板菜单项中，您将获得可用模板的列表。 您可以单击列表中的任何模板以在编辑器中启动它。

在撰写本文时，二十二十二提供了 11 个模板。

单击右侧的省略号 ( ︙ ) 图标可清除自定义项。

与主题模板不同，自定义模板只能重命名或删除（但您可以在帖子编辑器中编辑自定义模板）。

Template Parts菜单项列出了您可以在编辑器中打开以进行自定义的可用模板部件。

您会发现默认情况下将四个模板部分添加到二十二十二。 将光标悬停在修改后的模板上会显示一个工具提示，让您知道模板已被自定义。

您可以通过单击右侧的省略号 ( ︙ ) 图标来清除这些自定义。

编辑模板和模板部件

编辑器提供了自定义模板和模板部分结构的界面。

在这里，您可以轻松添加或编辑块和模式，您的更改将自动应用于使用该模板的每个页面。

下图显示了编辑器中的 404 页面模板。 这是一个非常简单的模板，只包括一个标题、一个段落和一个搜索框。 尽管如此，它还是让我们很好地理解了 UI 的工作原理。

在这里，您可以进行编辑和自定义模板以最好地满足您的需求。 例如，您可能希望添加图片帖子网格模式以增加访问者的参与度并邀请他们浏览您网站的内容。

模板编辑器顶部的标题下拉列表显示了可用模板区域的列表。 相同的列表出现在“设置”侧边栏中的“模板”选项卡中。

通过单击任何模板区域（例如页眉），您将被直接带到您要编辑的模板部分。

如果单击右侧的省略号图标，您将访问独立模板部件编辑器。

模板部分编辑器还提供了一对可拖动的手柄，允许您检查模板在不同屏幕分辨率下的行为。

一旦您对更改感到满意，请保存您的编辑并返回主模板编辑器以检查最终结果。

如果您想深入了解新的信息架构，您可能需要查看以下文章：

• 站点编辑 IA 概念：如何显示和访问新功能
• 站点编辑 iA 概念 - 第 2 部分

2222 的核心： theme.json的快速概述

为了全面了解二十二十二和块主题（如 Bricksy）是如何工作的，让我们看一下基于theme.json文件的新主题配置和样式机制。

这种新机制在 WordPress 5.8 中引入，允许主题开发人员配置编辑器并从中央配置点添加功能支持。

在二十二十二中， theme.json文件的结构如下：

 { "version": 2, "settings": {}, "styles": {}, "customTemplates": {}, "templateParts": {} }

让我们快速浏览一下每个部分。

版本

version字段描述了规范版本，目前是2 。

设置

settings部分定义全局或块级别的设置。 在顶层定义的设置会影响所有块，但块可以单独覆盖全局设置。 在二十二十二中，您会发现以下设置：

 { "settings": { "appearanceTools": true, "color": { "duotone": [...], "gradients": [...], "palette": [...] }, "custom": {...}, "spacing": {...}, "typography": { "dropCap": false, "fontFamilies": [...], "fontSizes": [...] }, "layout": {...} } }

设置默认值称为预设，用于根据特定命名约定生成 CSS 自定义属性和类名称：

• CSS 自定义属性： --wp--preset--{preset-category}--{preset-slug}
• CSS 类名： .has-{preset-slug}-{preset-category}

一旦主题定义了它的预设，相应的 CSS 自定义属性就可以用于样式部分中的块和元素的styles 。

风格

styles部分是主题定义块和元素默认样式的地方。 例如，请参阅以下核心 Button 块的二十二十二样式：

 { "version": 2, "styles": { "blocks": { "core/button": { "border": { "radius": "0" }, "color": { "background": "var(--wp--preset--color--primary)", "text": "var(--wp--preset--color--background)" }, "typography": { "fontSize": "var(--wp--preset--typography--font-size--normal)" } } } } }

您会注意到属性声明中使用的 CSS 自定义属性。

自定义模板

customTemplates部分是主题声明其自定义模板的地方。 name和title字段是必需的。 主题还可以通过设置postTypes属性来声明可以使用模板的帖子类型。

二十二十二提供了四个自定义模板：

 { "version": 2, "customTemplates": [ { "name": "blank", "title": "Blank", "postTypes": [ "page", "post" ] }, { "name": "page-large-header", "title": "Page (Large Header)", "postTypes": [ "page" ] }, { "name": "single-no-separators", "title": "Single Post (No Separators)", "postTypes": [ "post" ] }, { "name": "page-no-separators", "title": "Page (No Separators)", "postTypes": [ "page" ] } ] }

您将在block-templates文件夹中找到相应的.html文件。

模板零件

templateParts部分包括模板部分定义：

 { "version": 2, "templateParts": [ { "name": "header", "title": "Header", "area": "header" }, { "name": "header-large-dark", "title": "Header (Dark, large)", "area": "header" }, { "name": "header-small-dark", "title": "Header (Dark, small)", "area": "header" }, { "name": "footer", "title": "Footer", "area": "footer" } ] }

name和title字段是必需的。 主题还可以声明一个area术语，模板部分将在编辑器中呈现。

模板部件.html文件位于template-parts文件夹中。

现在您对二十二十二的theme.json 有了更多的了解，我们可以更深入地探索主题的功能和新的编辑界面。

让我们深入了解二十二十二的全球风格。

二十二中的全球风格

如果您查看 Twenty Twenty-2' style.css，您可能会惊讶地发现它包含最少数量的 CSS 声明。 原因是样式是在基于块的主题的theme.json文件中声明的。

WordPress 5.9 将更进一步，引入了一项新功能，该功能使块主题用户能够从称为全局样式的用户界面自定义站点元素的外观。

可以从位于编辑器右上角的新样式图标访问全局样式界面（另请参阅全局样式界面）。

单击该图标会显示一个新的样式侧边栏，其中包括三个单独的面板：

• 预览面板，显示您的自定义设置的预览
• 一个全局样式面板，提供对排版、颜色和布局的特定控件组的访问
• 一个Blocks项目，提供对块级样式设置的访问

二十二十二的调色板

颜色面板可以帮助您编辑可用的调色板，并为背景、文本或链接分配或更改颜色。

在调色板面板中，您可以自定义主题或默认调色板，甚至可以创建自定义调色板。

您找到生成颜色控件的代码了吗？

如果没有，请在您最喜欢的代码编辑器中打开 Twenty Twenty-2 的theme.json 。 您会发现以下调色板声明：

 { "version": 2, "settings": { "color": { "palette": [ { "slug": "foreground", "color": "#000000", "name": "Foreground" }, { "slug": "background", "color": "#ffffff", "name": "Background" }, { "slug": "primary", "color": "#1a4548", "name": "Primary" }, { "slug": "secondary", "color": "#ffe2c7", "name": "Secondary" }, { "slug": "tertiary", "color": "#F6F6F6", "name": "Tertiary" } ] } } }

下图显示了上面的代码如何匹配二十二十二的调色板。

现在让我们假设您要更改特定块的默认背景颜色。 为块的背景选择不同的颜色只会将不同的 CSS 变量分配给元素的background-color属性。 下图提供了一个示例：

就这样！ 您无需向定制器添加一行自定义 CSS 代码或为此创建子主题。

但是，让我们通过一些额外的例子继续探索二十二十二的全球风格。

排版设置

排版面板是您可以在全球范围内为网站的文本和链接元素自定义排版样式的地方。

每个项目都提供对一组控件的访问，以便您自定义字体系列、大小和行高。

您想知道生成这些控件的代码是什么吗？

打开二十二十二的theme.json并找到typography部分。 您将看到以下设置：

 { "version": 1, "settings": { "appearanceTools": true, "typography": { "dropCap": false, "fontFamilies": [ { "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif", "name": "System Font", "slug": "system-font" }, { "fontFamily": "\"Source Serif Pro\", serif", "name": "Source Serif Pro", "slug": "source-serif-pro" } ], "fontSizes": [ { "name": "Small", "size": "1rem", "slug": "small" }, { "name": "Normal", "size": "1.125rem", "slug": "normal" }, { "name": "Medium", "size": "1.75rem", "slug": "medium" }, { "name": "Large", "size": "clamp(1.75rem, 3vw, 2.25rem)", "slug": "large" }, { "name": "Huge", "size": "clamp(2.5rem, 4vw, 3rem)", "slug": "huge" } ] }, }

您可能希望从上面的代码中看到两个字体系列和五个字体大小。 你猜对了。

以下是上面的代码如何转换为全局样式排版设置：

您可能会猜到是什么设置生成了Line height控件。 在 Twenty Twenty-2 中，您不会找到特定的设置，因为它是由appearanceTools工具属性启用的，这是几个设置声明的快捷方式（请参阅下一节）。

布局和外观工具

Global Styles 侧边栏中的最后一个元素是Layout 。 在撰写本文时，它仅包含一个padding控件。

在 Twenty Twenty-2 中，Layout 面板由appearanceTools工具设置属性启用，这是一个布尔值，可用于一次启用多个设置：

 { "settings": { "appearanceTools": true } }

"appearanceTools": true仅替换以下声明块：

 { 'settings': { 'border': { 'color': true, 'radius': true, 'style': true, 'width': true }, 'color': { 'link': true }, 'spacing': { 'blockGap': true, 'margin': true, 'padding': true }, 'typography': { 'lineHeight': true } } }

好的——您现在希望了解在theme.json文件中声明的设置如何匹配相应的全局样式控件。

要获得新的 WordPress 默认主题的完整图片，我们还缺少一块拼图：块模式。

二十二十二块图案

可以说二十二十二主要是一组模式的集合——而且确实如此。 在二十二十二中，您会发现大量现成的块模式，您可以从中进行选择，为您的网页构建令人惊叹且不可预测的嵌套块结构。

这里的关键词是用户授权。 这很合适，因为使用块模式，您可以构建各种各样的东西，从吸引人的作品集到单页促销网站，即使您对 HTML 或 CSS 一无所知！

WordPress 5.9 通过新的 Pattern Explorer 对模式系统进行了重大改进，该工具允许您以全屏模式浏览模式。

新工具还使您能够直接从模式目录快速轻松地导入块模式。 这为 WordPress 用户和开发人员开辟了新的可能性，因此它的使用量在未来可能会大幅增加。

二十二十二包括五个类别的大量模式（超过 65 种）。

这套坚实的模式与模板和模板部分完美搭配，新的默认主题，带来真正令人惊叹的编辑体验。

如果您还没有机会尝试块模式，我们将通过一个简单的示例向您展示为什么它们被认为是如此强大的工具。

假设您想从 Index 和 Single Post 模板中删除默认页脚，并将其替换为不同的二十二十二块模式。

从外观菜单或 WordPress 前端工具栏按钮启动站点编辑器以自定义索引模板。

单击索引按钮以显示标题下拉列表，其中显示页面上可用的模板区域列表。 单击页脚旁边的省略号按钮，然后单击编辑页脚。

如上所述，这将启动隔离的模板部件编辑器。

现在打开块插入器并单击Patterns 。

启动新的Pattern Explorer工具，选择二十二十二页脚类别，然后选择您选择的页脚。

现在根据您的需要添加和编辑块。

当您对更改感到满意时，保存标题并重新检查您的网站。

下图比较了具有不同页眉和页脚自定义的三个模板（索引、单个帖子和没有分隔符的单个帖子）：

以儿童为主题扩展 222

为块主题创建子主题与为经典主题创建子主题完全不同。

但是，一旦您对块主题的结构有了很好的了解，您就会发现为二十二十二或任何其他块主题创建子主题并不困难。

因此，让我们弄清楚如何自定义基于 222 的网站的外观和感觉。

1. 设置二十二岁儿童主题

在您的/wp-content/themes目录中，创建一个新文件夹并将其命名为您喜欢的任何名称（根据主题开发标准）。 在此示例中，我们将子主题文件夹命名为二十二十二子。

现在你需要一个style.css文件。 打开您喜欢的代码编辑器并创建以下样式表：

 /* Theme Name: Twenty Twenty-Two Child Theme URI: https://example.com/ Author: Your name Author URI: https://example.com/ Description: A child theme for TT2. Requires at least: 5.8 Tested up to: 5.9 Requires PHP: 5.6 Version: 0.2 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentytwentytwo-child Template: twentytwentytwo Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments Twenty Twenty-Two Child WordPress Theme, (C) 2021 WordPress.org Twenty Twenty-Two Child is distributed under the terms of the GNU GPL. */

与往常一样，您可以根据需要编辑字段。

您的子主题现在可供预览。 您可以在外观 > 主题管理屏幕中激活它。

2.自定义全局设置

从 WordPress 5.9 开始，带有theme.json文件的子主题会继承父主题的设置。 如果孩子的theme.json定义了一组样式，那么这些样式将应用在其父样式之上。

因此，我们可以创建一个仅包含一小部分自定义设置和样式定义的theme.json文件，而不是重新定义我们所有的原始选择。

如何声明自定义调色板

在为二十二十二构建子主题时，最简单的任务是替换调色板。 您需要做的就是在您孩子的theme.json中定义一个新的调色板，如下所示：

 { "version": 2, "settings": { "color": { "palette": [ { "slug": "foreground", "color": "#FFFFFF", "name": "Foreground" }, { "slug": "background", "color": "#001F29", "name": "Background" }, { "slug": "primary", "color": "#D6FDFF", "name": "Primary" }, { "slug": "secondary", "color": "#FDFCDC", "name": "Secondary" }, { "slug": "tertiary", "color": "#FED9B7", "name": "Tertiary" }, { "slug": "accent", "color": "#E94435", "name": "Accent" } ] } } }

保存您的文件并返回到站点编辑器。 上面定义的调色板应该已经取代了默认的二十二十二的调色板。

颜色将按顺序显示在调色板本身上，它们的名称应遵循 Github 上讨论的最佳实践和命名约定。

您可以在Carolina Nymark 的深入概述中阅读更多关于theme.json颜色选项的信息。

如何声明自定义双色调滤镜

您还可以使用自定义过滤器集替换默认的双色调颜色。

为此，只需将以下代码添加到与palette属性相同级别的孩子的theme.json设置中：

 { "version": 2, "settings": { "color": { "palette": [...], "duotone": [ { "colors": [ "#001F29", "#FFFFFF" ], "slug": "default-filter", "name": "Default filter" } ] } } }

保存您的文件并在块编辑器中检查结果。 您应该只看到一个双色调滤镜。

3.自定义块样式

正如我们之前提到的，使用 WordPress 5.9，您现在可以从全局样式界面自定义theme.json设置和样式。

仅当块在相应的block.json文件中声明支持特定功能时，才可以从全局样式界面自定义块样式。 但是您可以覆盖子主题的theme.json中的默认块设置。

现在假设您要覆盖帖子标题和组块样式。 您需要做的就是定义要添加或覆盖的样式，如下所示：

 { "version": 2, "settings": {...}, "styles": { "blocks": { "core/post-title": { "typography": { "fontFamily": "Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif" }, "color": { "background": "var(--wp--preset--color--tertiary)" }, "spacing": { "padding": "var(--wp--custom--spacing--small)" } }, "core/group": { "spacing": { "margin": { "top": "0", "bottom": "0" } } } } } }

在上面的示例中，我们更改了core/post-title的字体系列、背景颜色和填充值，以及core/group的顶部和底部边距。

下图显示了在公共站点上的结果：

这就是审查！

我们暂时不会深入探讨儿童主题，因为它超出了本文的范围。 同时，您会在 Github 上找到更多关于二十二十二个儿童主题的示例。

概括

在仔细研究新的 WordPress 默认主题二十二十二及其功能（使其成为有史以来最灵活的默认主题）时，我们公布了 WordPress 5.9 引入的新信息架构。 我们甚至偷看了新的 Global Styles 界面。

许多令人兴奋的新功能即将推出，而且随着时间的推移，新的编辑环境似乎变得更加强大、可靠和实用。

虽然许多新的 WordPress 功能正在开发中，但其他功能正在消失或重要性下降。 许多用户想知道定制器会发生什么以及如何最好地保持与现有主题的向后兼容性。

但是，您不应该期望突然从传统主题跳跃到单一界限中的阻止主题。 我们目前有四种不同类型的主题可供选择：

• 块主题：为 FSE 设计的主题
• 通用主题：可与定制器和站点编辑器一起使用的主题
• 混合主题：支持 FSE 功能的经典主题，如theme.json
• 经典主题：带有 PHP 模板、functions.php 等的主题。

所以，暂时不要担心——如果您还没有准备好切换到阻止主题，仍然有很多解决方案可供选择。

现在由您决定！ 您准备好大跃进并立即开始使用块主题了吗？ 在下面的评论中与我们分享您的想法。