2022WordPress默认主题深度解析全新区块功能预览

虽然比原计划晚了一点，但我们终于迎来了全新的WordPress默认主题——2022！这个备受期待的主题将随即将发布的WordPress 5.9版本一同推出，为用户带来前所未有的灵活性和可定制性。为了深入了解这个新主题，我们迫不及待地在本地开发环境中安装并测试了2022，现在将为您带来一份详尽的评测，带您探索新WordPress主题的诞生历程。

2022被设计为史上最灵活、最轻量级且可自定义的默认主题，为测试区块、样板和模板提供了一个绝佳的游乐场。作为首个默认区块主题，它将帮助用户更好地探索全站点编辑、全局样式、导航区块和新的图像库等WordPress 5.9中的核心功能。

2022最雄心勃勃的目标之一是赋予用户权力。凭借丰富的开箱即用样板和模板，用户只需轻轻一点即可构建复杂的布局，而样式定制则变得轻而易举。从技术角度来看，撰写关于2022主题的文章与探索WordPress 5.9中的最新功能并无太大区别，但它为我们提供了一个放大镜，让我们更好地欣赏新的站点编辑功能，并洞察平台的未来发展方向。

本文将带您深入探索新主题的方方面面。首先，我们将了解用户将如何使用WordPress 5.9和2022体验全新的站点编辑流程。接下来，我们将深入探讨2022主题中实现的主要区块主题功能，包括全局样式、区块样板、模板和模板组件。此外，我们还将简要介绍如何利用theme.json文件来扩展2022主题的功能。

### 2022主题带来全新的站点编辑流程

WordPress 5.9将几个完整的站点编辑功能整合到核心中，安装了2022等区块主题的用户将能够轻松实现以下功能：

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

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

激活2022主题后，您会发现站点编辑器的入口点已从WordPress仪表板的主菜单移至外观菜单下。将模板和样式编辑功能放在同一个外观菜单下，旨在简化编辑体验，使用户更容易理解所访问的功能与页面呈现的相关性。

点击左上角的WordPress图标将显示一个新的站点编辑器导航菜单，包括三个菜单项：站点、模板和模板部件。让我们逐一了解。

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

**模板菜单项**列出可用模板，点击即可在编辑器中启动。目前，2022主题提供了11个模板，点击右侧的省略号图标可清除自定义项。

**模板部件菜单项**列出了可在编辑器中打开以进行自定义的可用模板部件。默认情况下，2022主题包含四个模板部分，将光标悬停在修改后的模板上会显示工具提示，提示您模板已被自定义。点击右侧的省略号图标可清除自定义。

### 2022主题的核心：theme.json的快速概述

为了全面了解2022主题和区块主题（如Bricksy）的工作原理，让我们看一下基于theme.json文件的新主题配置和样式机制。这种新机制在WordPress 5.8中引入，允许主题开发人员配置编辑器并从中央配置点添加功能支持。

2022主题的theme.json文件结构如下：

“`json
{
“version”: 2,
“settings”: {},
“styles”: {},
“customTemplates”: {},
“templateParts”: {}
}
“`

让我们快速浏览每个部分：

**版本**字段描述规范版本，当前为2。

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

“`json
{
“settings”: {
“appearanceTools”: true,
“color”: {
“duotone”: […],
“gradients”: […],
“palette”: […]
},
“custom”: {…},
“spacing”: {…},
“typography”: {
“dropCap”: false,
“fontFamilies”: […],
“fontSizes”: […]
},
“layout”: {…}
}
}
“`

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

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

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

**样式**部分是主题定义块和元素默认样式的地方。例如，以下核心按钮区块的2022主题样式：

“`json
{
“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自定义属性。

**自定义模板**部分是主题声明其自定义模板的地方。name和title字段是必需的。主题还可以通过设置postTypes属性来声明什么文章类型可以使用模板。2022主题提供了四个自定义模板：

“`json
{
“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”]
}
]
}
“`

相应的.html文件位于block-templates文件夹中。

**模板部件**部分包括模板部件定义：

“`json
{
“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文件夹中。

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

### 2022主题中的全局样式

如果您查看2022主题的style.css，可能会惊讶地发现它包含最少数量的CSS声明。这是因为样式是在基于区块的主题的theme.json文件中声明的。WordPress 5.9将更进一步，引入了一项新功能，使区块主题用户能够从名为Global Styles的用户界面自定义站点元素的外观。

可以位于编辑器右上角的新样式图标访问全局样式界面。单击该图标会显示一个新的样式侧边栏，其中包括三个单独的面板：

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

**颜色面板**可以帮助您编辑可用的调色板，并为背景、文本或链接分配或更改颜色。在调色板面板中，您可以自定义主题或默认调色板，甚至可以创建自定义调色板。

**排版设置**面板是您可以在全球范围内为网站的文本和链接元素自定义排版样式的地方。每个项目都提供对一组控件的访问，以便您自定义字体系列、大小和行高。

**布局和外观工具**全局样式侧边栏中的最后一个元素是Layout。目前，它仅包含一个padding控件。

在2022主题中，布局面板由appearanceTools设置属性启用，这是一个布尔值，可用于一次启用多个设置：

“`json
{
“settings”: {
“appearanceTools”: true
}
}
“`

“appearanceTools”: true只需替换以下声明块：

“`json
{
‘settings’: {
‘border’: {
‘color’: true,
‘radius’: true,
‘style’: true,
‘width’: true
},
‘color’: {
‘link’: true
},
‘spacing’: {
‘blockGap’: true,
‘margin’: true,
‘padding’: true
},
‘typography’: {
‘lineHeight’: true
}
}
}
“`