相对较新的 WordPress 编辑器,也称为 WordPress 区块编辑器,一直通过 Gutenberg 插件不断开发,自 2018 年起一直与我们在一起。只要主题加载区块使用的 CSS,您就可以在任何 WordPress 主题上使用区块编辑器。但有一些新主题更深入地利用了区块编辑器。
WordPress 区块主题允许您使用区块构建整个网站,这意味着主题的责任主要是设计指南,而不太关注控制页面和页面上的内容。这在 WordPress 中被称为**全站编辑**,为此而构建的主题被称为**区块主题**,因为您用区块构建所有内容。
让我们深入探讨这一切。

目录
- 介绍
- 相关术语
- 将区块编辑器与经典主题一起使用
- 基于区块的主题的解剖学
- 创建 WordPress 区块主题
- 全局设置和样式(theme.json)
- WordPress 区块主题方法
- 当前正在使用的区块主题
- 构建区块子主题
- 一些个人想法
- 资源
介绍
除了那些在 GitHub 上关注其日常开发迭代的人之外,围绕区块编辑器的绝大多数开发对于用户来说都是可见的——这并非坏事。我一直在努力通过 WP Tavern 和 Gutenberg 帖子来更新自己有关区块编辑器的信息,并且在我的个人学习项目网站中一直使用传统——或者“经典”编辑器——以及区块编辑器。
在绕道去 学习和体验无头 WordPress 网站 与 Gatsby 和 Frontity 框架之后,我现在回到了我的原生 WordPress 家园。
虽然我一直知道 WordPress 主题实验 GitHub 存储库已经有一段时间了——完全由区块组成的主题!——但我只是最近才开始深入研究区块主题。事实上,我一直在使用一个实验性的基于区块的主题 在此项目网站中。
WordPress 5.9 现已发布,并为大众带来了基于区块的主题。这个名为 Joséphine 的版本是 WordPress 全站编辑和区块主题的正式介绍。
即使基于区块的主题功能在之前的版本中以各种迭代形式可用,但这对于 WordPress 平台及其依赖的生态系统来说也是一件**大事**。我已经亲身体验过它,并想分享我在实践经验中学到的有关区块主题的信息,以及我对它工作原理的一些个人想法。
**免责声明:**我不是区块主题专家。我精通 WordPress,并且是该内容管理系统的忠实粉丝。我在这里的目标不是批评 WordPress 5.9 或者指导你是否应该喜欢它或者想要使用它。我只是从一个思维开阔的学习者的角度出发,他正在构建个人网站,并且对 WordPress 区块编辑器有相当深入的了解和熟悉度。
相关术语
在我们直接深入区块主题之前,我认为有必要先形成一个基线理解,了解我们谈论的区块和网站编辑这些术语究竟意味着什么,因为它们对于我们几十年来所知和喜爱过的 WordPress 来说是如此新颖和具有颠覆性。
区块编辑器
每当我们提到“WordPress 编辑器”时,我们实际上指的是这个。我们称 WordPress 编辑器为区块编辑器,因为它允许我们创建页面和帖子,其中每个元素——包括文本、图像、视频、标题、页脚等——都使用 区块 插入到帖子中,这些区块可以模块化地排列以完成页面布局。它从现在称为“经典”编辑器发展而来,后者更多地基于在预定义布局中输入要发布到页面或帖子上的内容。

图片来源:WordPress 区块编辑器手册。
这有点像内容和布局结合在一起,两者都在 WordPress 编辑器中管理。因此,我们过去依赖编辑器来处理内容,而依赖主题模板来定义布局,现在这两者都可以在 WordPress 编辑器界面中直接编辑。
您可以在 此处找到有关使用区块编辑器的更多详细信息。
区块主题
区块主题是 WordPress 主题,其模板完全由区块组成,因此除了不同帖子类型(页面、帖子等)的帖子内容外,区块编辑器还可用于编辑网站的所有区域:标题、页脚、侧边栏等。
这份 WordPress 文档在其知识库中提供了对区块主题的概述,包括 如何在本文档中创建区块主题和样式。
最重要的是:区块主题与“经典”WordPress 主题不同。它们不是严格依赖符合 WordPress 模板层次结构 的 PHP 文件,而是包含基于区块的 HTML 模板——在 WordPress 网站编辑器(接下来会介绍)中组装的区块组,这些区块可以进行样式设置和排列,并且使用 theme.json
文件用于全局样式标记。
网站编辑器
这是 WordPress 5.9 的核心功能。虽然它正式被称为 WordPress 网站编辑器,但在开发过程中它通常被称为 全站编辑**(FSE)**,并被描述为“一个连贯的体验,允许您直接编辑和导航各种模板、模板部分、样式选项等等。” 哇,这可真不少!
WordPress 网站编辑器允许我们创建和编辑由区块组成的模板。因此,您可以组装一组区块,这些区块可以全局应用于网站。例如,一个标题组件。这可能包含一个用于网站徽标、主菜单和标语的区块。网站编辑器允许我们创建一个新的区块主题,或者修改现有的主题,以完全改变网站的全局外观,而无需编写一行代码。
因此,您知道过去如何使用一堆 PHP 模板来构建主题吗?这种情况不再存在。主题“开发”现在具有直接在 WordPress 中可用的 UI。
有关使用网站编辑器的更多详细信息,请参见 WordPress 文档。
官方的 WordPress 词汇表 中包含您可能想在深入研究 WordPress 区块主题和 FSE 时探索的其他术语和定义。
在经典主题中使用块编辑器
WordPress 块编辑器可以在经典主题和块主题中使用。 当 Gutenberg 编辑器项目开始时,经典的基于 TinyMCE 的编辑器从 WordPress 核心分离到 Classic Editor 插件。 只要 Classic Editor 插件安装并激活,内容写作与块引入之前一样正常。
在正式引入块编辑器功能之前,我们必须安装实验性的 Gutenberg 插件。 只需切换插件,即可使用任一编辑器创建单个页面或帖子内容。 WordPress 5.0 版本 引入了块编辑器以及默认的 Twenty Nineteen 主题,展示了如何 添加块编辑器功能 并 探索其强大功能。
换句话说,向 FSE 的演进 一直在进行。 正因为如此,我们才能享受高水平的向后兼容性,使我们能够在准备就绪时采用基于块的功能。
基于块的主题的结构
实验性的基于块的主题 正在开发中,从 2020 年初开始。 在我写这篇文章的时候,GitHub 主题实验存储库 列出了 12 个块主题,这些主题探索了使用块或块模板创建主题的某些方面。
但可能是 Twenty Twenty-One 主题 第一个将块作为一等公民的“默认”主题,引入了 块样式和块模式,尽管最近更新的 Twenty Nineteen 和 Twenty Twenty 版本也包含捆绑的块样式和块模式。 目前,社区中有超过 130 个主题 带有捆绑的块编辑器模式,块样式功能,包括我最喜欢的 Anders Noren 的 Eksell 主题。
随着 WordPress 块编辑器 FSE 功能的不断发展,更多 基于块的主题 也正在被引入。
那么,对于那些深深沉浸在构建 WordPress 主题的“经典”方式中的人来说,基于块的主题的开发意味着什么? 这正是我想在这部分内容中探讨的。
基于块的主题的文件结构
在经典的 PHP 驱动的主题中,标记元素使用 PHP 和 JavaScript 生成,而在块主题中,这些模板完全由 HTML 块和块编辑器提供的结构性 CSS 组成。 这对于许多人来说可能听起来很可怕,但很容易想象这对其他人来说是多么解放,因为它降低了开发 WordPress 主题的门槛。
块主题的结构与我们熟悉的经典 WordPress 模板层次结构 大不相同。 在经典的基于 PHP 的主题中,页面元素标记必须使用 PHP 和 JavaScript 生成,而在块主题中,WordPress 核心 提供了标记和基本样式。 例如,默认的 Twenty Twenty-One 主题包含 48 个 PHP 文件和 11 个 JavaScript 文件,总计 4.5 MB。 它的基于块的兄弟主题,实验性的 TT1 Blocks 主题,仅包含 4 个 PHP 文件、1 个 JavaScript 文件和 8 个 HTML 文件,总计 3.5 MB。


块主题结构可以非常简单,只需几个 必需文件:index.php
、style.css
和 template/index.html
。 以下是典型的块主题文件结构,摘自 WordPress 编辑器手册
#! basic block-theme structure
theme
|__ style.css
|__ functions.php
|__ index.php
|__ theme.json
|__ templates
|__ index.html
|__ single.html
|__ archive.html
|__ ...
|__ parts
|__ header.html
|__ footer.html
|__ sidebar.html
|__ ...
styles.css
:包含主题的样式表functions.php
:包含主题设置,可能包括其他文件,启用编辑器样式表,以及如果存在,则将style.css
排队。index.php
:一个空文件,用于在没有 WordPress 块编辑器的情况下激活块主题时切换到默认文件。theme.json
:用于启用或禁用功能并为网站和块设置默认样式的可选配置文件templates
:包含由块组成的页面模板。 这些文件遵循与传统主题相同的模板层次结构。index.html
:用于生成帖子或页面的主要模板,类似于经典主题中的index.php
single.html
:用于生成单个帖子或页面的模板archive.html
:用于生成帖子存档列表的模板
parts
:将在块模板中使用的块的常用集合header.html
:全局页眉块footer.html
:全局页脚块sidebar.html
:一个可选的全局侧边栏块
在 WordPress 块编辑器手册 中提供了特定于块主题的主题块列表。
模板和模板部件
模板 基本上是组装块的集合,可能包括可重复使用的块部件,例如网站页眉或页脚。 不同的块用于组成页面模板。 例如,这可能是一个博客帖子列表,一个产品列表,甚至是一个小部件。
以下是 WordPress 块编辑器手册 中摘录的块模板示例。
<!-- wp:site-title /-->
<!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large">
<img src="https://cldup.com/0BNcqkoMdq.jpg" alt="" />
</figure>
<!-- /wp:image -->
<!-- wp:group -->
<div class="wp-block-group">
<!-- wp:post-title /-->
<!-- wp:post-content /-->
</div>
<!-- /wp:group -->
<!-- wp:group -->
<div class="wp-block-group">
<!-- wp:heading -->
<h2>Footer</h2>
<!-- /wp:heading -->
</div>
<!-- /wp:group -->
创建 WordPress 块主题
WordPress 网站编辑器现在是定义 WordPress 网站外观和感觉的主要工具。 您可能习惯于使用 WordPress 自定义器来执行这些操作,并且一些主题已经充分利用了这一点来完成网站编辑器现在旨在完成的操作。
因此,块编辑器不再是用于页面和帖子的工具;它是创建 WordPress 主题的方式。
我假设你们中的许多人已经使用过块编辑器,并且不需要深入了解它是什么或如何使用它。 也就是说,它值得研究一下,因为它是在 WordPress 5.9 发布后,推动所有与 WordPress 主题相关的进展的动力。
事实上,当我们谈论块编辑和主题时,没错,我们谈论的是块编辑器。 但实际上,我们谈论的是 WordPress 网站编辑器。
WordPress 网站编辑器界面
即使是 Gutenberg 插件的早期采用者,我也发现网站编辑器的体验令人畏惧和沮丧。 它经常发生变化,并且在每次新版本发布时都发生剧烈变化。 但是,我仍然希望 WordPress 5.9 能够成为某种意义上的分水岭,帮助稳定这种不稳定的感觉。
访问网站编辑器的方式与您已经习惯于访问 WordPress 自定义器的方式相同。 它位于仪表板菜单中的**外观**下,名为**编辑器**。

让我们简要地浏览一下新的编辑器界面。
首先,通过从 WordPress 管理菜单中点击**外观 → 编辑器**来导航到网站编辑器。 该菜单项可能在其上有一个红色的“beta”标签,就像它目前在 WordPress 5.9 中一样。
这将带您进入站点编辑器,它将显示您的主页或帖子归档,具体取决于您在**设置 → 阅读**中将主页设置为哪个。从那里它看起来有点像创建或编辑页面或帖子时的块编辑器的全屏版本。但是,单击屏幕左上角的 WordPress 徽标,左侧面板将打开,显示 WordPress 站点编辑器及其菜单,用于在站点的不同部分之间导航。这包括**站点**、**模板**和**模板部分**。

让我们点击模板。这将显示主题提供的可用模板列表,其中包含每个模板的描述以及其注册位置(例如,父主题或子主题)。

进入此屏幕的另一种方法是从我们进入站点编辑器时最初访问的页面。单击顶部管理栏中的模板名称,将显示一个按钮,可将您直接带到相同的模板屏幕。

任何模板都可以像块编辑器中的任何页面或帖子一样进行编辑。假设我不希望在我的首页上显示特色图片,并希望将其删除。只需删除特色图片块并保存模板即可。
站点编辑器 UI 的另一个关键部分是列表视图,它概述了当前放置在模板中的块。自引入块编辑器以来,此功能已存在于 WordPress 中,但这次的新功能是您可以像手风琴一样打开和关闭包含子块的父块。不仅如此,它还支持拖放块以直接从那里更改布局。

站点编辑器 UI 中的另一件事:您可以通过单击按钮清除自定义设置。在模板屏幕中,单击模板旁边的 kebab 菜单,然后选择**清除自定义设置**选项。如果您需要,这是一个很好的方式来重置并从头开始。

WordPress 核心团队在Make WordPress Core上发布了有关新功能的定期更新。将其添加为书签以便及时了解 WordPress 块编辑器和站点编辑器的最新更改。
创建模板和模板部分
如您所知,模板是 WordPress 主题的核心。它们强制执行一致且可重用的布局。这在 WordPress 5.9 中没有改变。我们还可以创建**模板部分**,它们就像模块部件,可以在多个模板中使用,例如存在于存档模板和主页模板中的帖子查询。
WordPress 5.9 中的不同之处在于,它们是在站点编辑器而不是主题文件夹中的 PHP 文件中创建和管理的。
块编辑器手册列出了三种创建模板和模板部分的方法:(a) **手动**,通过创建包含块标记的 HTML 文件;(b) **使用站点编辑器**;(c) **在块编辑器中使用模板编辑模式**。
在块主题手册中提供了有关在站点编辑器中创建模板和模板编辑模式的简要说明。WordPress 5.9 允许使用编辑模式创建新模板。

然后可以将自定义模板导出以包含在块主题中。因此,是的,我们现在有能力创建完全功能的 WordPress 主题,而无需编写一行代码!导出的文件夹目前不包含theme.json
文件,但是GitHub 上有一个提案允许导出块主题和样式。

但对于那些更喜欢与代码紧密合作的人,手动创建 WordPress 模板和模板部分仍然是一件好事。您仍然可以打开代码编辑器并创建包含块标记的 HTML 文件。
theme.json
)
全局设置和样式 (在经典主题中,我们在style.css
文件中编写样式规则。在块主题中,样式更具挑战性,因为 CSS 来自不同的来源(例如核心块、主题和用户)。WordPress 5.8 引入了全局样式的概念,它本质上是一个theme.json
文件,根据文档,将“与样式相关的各种 API 整合到一个点 - 一个theme.json
文件,该文件应位于主题目录的根目录中。”

据说theme.json
文件旨在为主题作者提供更细粒度的样式结构,可以选择管理和自定义来自各种来源的 CSS 样式。例如,主题作者可以设置某些对用户隐藏的样式功能,定义默认颜色、字体大小和其他用户可用的功能,并且还可以设置编辑器的默认布局。此外,theme.json
允许您根据每个块自定义样式。它功能强大、灵活且易于维护!
块编辑器预计将提供所有基本的样式,主题作者可以根据theme.json
文件中定义的样式进行自定义。但是,对于复杂的主题,theme.json
文件可能会变得很长,目前无法以更易于理解的方式对其进行分区。有一个GitHub 工单来对其进行重组,以便不同的theme.json
文件映射到/styles
文件夹。这对开发人员体验来说将是一个不错的增强。
默认的Twenty Twenty-Two 主题是一个很好的例子,说明了 WordPress 全站编辑功能如何使用theme.json
进行全局设置和样式块。
WordPress 块主题方法
也许您一直都是从头开始创建 WordPress 主题。也许您依赖于 Underscores 主题作为起点。或者您可能有一个您使用子主题扩展的收藏夹主题。WordPress 站点编辑器的最新功能真正改变了我们创建主题的方式。
以下是与 WordPress 站点编辑器深度集成的基于块的主题开发的一些新兴策略。
通用主题
Automattic 团队构建了一个Blockbase 通用主题,它被称为构建主题的一种新方法,类似于Underscores 入门主题。Blockbase 主题提供临时“ponyfill”样式,块编辑器“尚未在theme.json
‘custom’属性中考虑”,一旦 Gutenberg 插件完全成熟并集成到 WordPress 核心,这些样式可能会最终过时。
使用通用父主题方法,Automattic 已经发布了八个 Blockbase 子主题,还有几个其他主题正在 GitHub 上进行。
Twenty Twenty-Two 默认主题
Twenty Twenty-Two 默认主题是另一个极佳的起点,因为它确实是第一个与 WordPress 一起发布的旨在与站点编辑器一起工作的 WordPress 主题。
在我看来,对于已经熟悉 FSE 功能的主题开发人员来说,此主题非常适合展示其可能性。对于其他不是开发人员并且不熟悉 FSE 功能的用户,在块编辑器中对其进行自定义,然后将其导出为子主题可能会非常令人沮丧和不知所措。
混合主题
关于 FSE 中“混合”主题的概念,可以在这个 GitHub 问题单中找到讨论。其理念是为所有用户提供途径,让他们能够使用网站或模板编辑器来覆盖传统的主题模板。
Justin Tadlock 在这篇 WP Tavern 文章中预测了四种类型的主题:仅限区块、通用、混合和经典,并推测主题作者可能会在“区块主题和经典/混合主题的混合体”之间进行选择。
Frank Klein 在“我从构建混合主题中学到了什么”中提供了实际证明。
一个混合主题将传统的主题方法与全站编辑功能相结合。
theme.json
文件是其中的一个关键组件。它提供了对区块编辑器设置的更多控制,并简化了区块的样式设置。混合主题也可以使用区块模板,但这是可选的。
Frank 是Block-Based Bosco 主题的作者,他通过创建默认 Twenty Twenty 主题的混合版本,进一步扩展了“混合主题”的定义。该主题在 GitHub 上可用。目前,WordPress 主题目录中没有混合主题。
WordPress 社区主题
截至撰写本文时,主题目录中提供 47 个具有 FSE 功能的基于区块的主题。不出所料,这种方法差异很大。
例如,这篇文章中,Aino 区块主题作者Ellen Bower 讨论了他们如何将他们的经典主题转换为区块主题,详细说明了是什么使一个主题成为“区块”主题。这种方法的文件结构与我们之前介绍的标准区块主题结构不同。
另一个流行的区块主题,Tove,由Andars Noren 创建,被描述为一个灵活的基准主题,它遵循标准的区块主题文件结构。
还有一个非常简单的单页概念验证主题,由 Carolina Nymark 创建,它只包含一个名为Miniblock OOAK 的 index.html
文件。它已经可以在主题目录中找到,还有来自 Justin Tadlock 的另一个主题,它还在开发中(他写了一篇单独的文章 来描述他的流程)。
区块主题生成器应用程序
虽然我们已经确定了 WordPress 区块主题对非开发人员的友好程度,但有一些工具可以帮助创建完整的区块主题,或者仅仅是一个自定义的 theme.json
文件。
David Gwyer 是 Automattic 的一名工程师,他一直在开发一个区块主题生成器 应用程序,截至撰写本文时,该应用程序处于测试阶段,可应要求进行测试。

在我简短的测试中,该应用程序只允许我生成自定义的 theme.json
文件。但Gwyer 告诉 WP Tavern,该应用程序还没有完全成熟,但功能经常被添加。一旦完成,这对于主题作者创建自定义的区块主题来说将是一个非常有用的资源。
当前正在使用的区块主题
这Twitter 线程 来自 Carolina Nymark,展示了一些截至撰写本文时已投入使用并处于生产阶段的区块主题示例。在最近的 Yoast 文章中,Carolina 列出了一些使用区块主题的个人和企业网站。
个人网站
企业网站
正如我之前提到的,我也一直在使用一个区块主题来构建我的一个个人网站,有一段时间了。默认的 Twenty Twenty-Two 主题目前也显示超过 60,000 个活跃安装,这告诉我还有更多基于区块的主题实施示例在使用中。
构建区块子主题
子主题在 WordPress 区块的新时代仍然存在,尽管这仍然是一个早期的阶段。换句话说,目前还没有明确的方法来创建基于区块的子主题,也没有现成的工具可以提供帮助。
尽管如此,创建 WordPress 区块子主题的一些方法正在出现。
创建 Blockbase 主题插件
Automattic 团队正在开发一个名为Create Blockbase Theme 的插件。这将使基于我们之前提到的 Blockbase 通用主题创建子主题变得非常容易。Ben Dwyer 已经讨论了主题作者如何用简单的六个步骤创建 Blockbase 子主题,并且无需编写任何代码。
我在自己的本地环境中测试了该插件,只对我的 Blockbase 主题安装进行了微小的更改,并且一切似乎都正常运行。请注意,该插件仍处于实验阶段,正在开发中,但您可以关注路线图,了解最新情况。
theme.json
文件
使用备用 Kjell Reigstad 是默认的 WordPress Twenty Twenty-Two 主题的作者,他展示了如何用包含不同样式配置的另一个 theme.json
文件替换单个 theme.json
文件,从而改变基于区块的主题设计的视觉效果。
上周我创建了一个快速演示,展示了如何通过 Twenty Twenty-Two 的
— kjellr (@kjellr) 2021 年 10 月 22 日theme.json
设置来彻底改变其视觉美观。这个例子用包含不同字体、颜色、双色调和间距值的默认 json 文件替换了另一个 json 文件。pic.twitter.com/ab9tyGwLOS
Kjell 已经打开了一个拉取请求,展示了一些实验性的子主题,这些主题可以在GitHub 主题实验 GitHub 仓库中进行测试。

同样,Ryan Welcher 正在开发一个theme.json
构建器 工具,该工具将生成一个自定义的 theme.json
文件,以方便非编码人员创建类似的子主题。在这篇 WP Tavern 文章中可以找到更多信息。
Framboise 子主题(在主题目录中可用)是这种方法的早期示例,它只包含一个 theme.json
文件。
子主题真的还有必要吗?
Rich Tabor 提出了这个问题
如果一个主题由 JSON 和区块模板组成,而两者都可以通过全局样式进行修改,那么子主题的作用是什么呢?
— Rich Tabor (@richard_tabor) 2021 年 10 月 25 日
确实,单个 theme.json
文件 本身就可以作为一个子主题。有一个正在进行的讨论,讨论是否允许主题作者为提供多个全局样式变体的区块主题提供多个 theme.json
文件。这样,WordPress 用户可以选择一个变体在网站上使用。
全局样式变体 的一些功能已经包含在 Gutenberg v12.5 中,预计将在 WordPress 6.0 中可用。
一些个人想法
如果我不谈谈自己对这一切的看法,那我会很失职。我会简要地从几个方面来谈谈。
区块主题是 WordPress 对 Jamstack 批评的回应
Jamstack 爱好者对 WordPress 平台提出了批评,最显著的批评是 WordPress 主题充斥着 PHP 文件。好吧,WordPress 区块主题不再是这种情况了。
我们之前看到过一个完整的主题可以是一个 index.html
文件和一个 theme.json
文件。没有膨胀,只有标记。
我怀念 WordPress 自定义器
特别是注入自定义代码的能力。从现在开始,要实现相同的功能,需要对 WordPress 网站编辑器 UI 有深入的了解。
网站定制轻而易举。
自定义经典主题,即使是像更改字体这样简单的事情,如果你不知道自己在做什么,也可能很困难。现在,随着网站编辑器和 theme.json
文件的引入,这种情况发生了改变,可以在不编写任何代码的情况下自定义(甚至导出)主题。
不过我仍然坚持我的观点,网站编辑器的界面很混乱。我认为一个令人愉快的用户体验还很遥远,但我期待着 下一个 WordPress 6.0 版本,希望能带来更好的用户体验。
设计主题的门槛越来越低。
现在,它不再是关于 PHP 和模板文件,而是关于开发模式和创建内容。这听起来正是内容管理系统应该设计的目的!我已经对 WordPress 6.0 版本中考虑的新功能 感到兴奋。
资源
已经有很多关于 WordPress 区块主题、全站编辑和区块编辑器的文章。其中很多是在 WordPress 5.9 发布之前就写好的!
所以,除了这篇文章之外,这里还有一些其他的文章,你可以参考这些文章来开始或继续你的 WordPress 区块和网站编辑之旅。
WordPress 5.9
- WordPress 5.9 介绍(官方发布视频)
- 探索 WordPress 5.9(Ann McCarthy 的视频)
- 探索导航区块(Ann McCarthy 的视频)
- 二十二十二介绍(Kjell Reigstad)
- 5.9 如何为未来奠定坚实的基础(Gutenberg Times)
- WordPress 中的全站编辑 (FSE) 是什么?(Yoast)
网站编辑器和区块主题
- WordPress 区块编辑器手册
- WordPress 模式目录
- WordPress 主题实验(GitHub)
- WordPress Gutenberg 区块基础(WP Apprentice 的视频)
- 基于区块的主题介绍(视频,Kjell Reigstad)
- 使用全站编辑进行简单的网站设计(学习 WordPress)
- 如何在区块主题中使用 PHP 模板(Carolina Nymark)
精选博文
- WordPress 主题的新时代(Anders Noren)
- Gutenberg 全站编辑和基于区块的主题(The Publishing Project)
- 所以你想制作区块模式?(WordPress.org 新闻)
- theme.json 的未来(Matia Ventura)
- 切换到基于区块的主题(Kelly Ryelle)
其他有用链接
- WP Tavern:该网站涵盖了区块主题、Gutenberg 版本和插件,帮助读者了解 WordPress 的最新消息。
- Gutenberg Times:该网站每周都会报道重要的 Gutenberg 新闻,并提供与区块编辑器、全站编辑相关的链接。
- Make WordPress Themes:发布主题和 Gutenberg + 主题系列的会议记录。
- Make WordPress Core:每两周发布一次新内容,以跟踪每个 Gutenberg 版本。
正如测试版中所预期,网站编辑器仍然很直观且令人困惑,不过我发现使用区块主题非常有趣。事实上,我已经将 Twenty Twenty-Two 作为子主题进行修改,并计划使用单个 `theme.json` 文件创建样式替代方案。
您在项目中使用过区块主题吗?如果有,请分享您的体验和想法;我非常乐意阅读任何评论和反馈!
非常感谢您撰写了这篇经过充分研究且内容详尽的文章,向更多人介绍区块主题的广阔世界。提前透露一些即将发布的内容尤其有用!有很多值得期待和需要弄清楚的事情。
感谢您,Anne。您的这些评论对我来说意义重大!我感到很荣幸。我从您的文章和短视频中学到了很多。
我错过了什么?似乎除了 Twenty Twenty-Two 和一个我可以在一分钟内轻松创建的子主题之外,我永远不需要其他主题。由于我可以轻松修改和/或创建满足我需求的模板,因此主题曾经提供的任何网站样式和创建都变得不必要了。第三方模板和区块似乎可能有用,但主题则不然。我理解正确吗?这是“房间里的大象”吗?
另一个愚蠢的问题……为什么 json 文件中的 drop-cap 为 false?当我将其更改为 true 时,drop-cap 开关就会显示出来……。
参见 theme.json “typography”: {
“dropCap”: true,
我还没有在 WordPress 中使用过区块编辑器,但这非常有用的信息。我们 网页设计 页面正在使用 Elementor 插件,以方便操作,但需要付费。
我仍然感到困惑。似乎我们需要忘记我们学到的关于 WordPress 的一切,才能学习设计和开发 WP 网站的这种新概念。我们正处在一个十字路口。以前专注于 PHP 来创建自定义功能的 WordPress 开发人员现在该怎么办?将来使用 PHP 进行 WordPress 开发的相关性如何?我记得 Matt 告诉开发者,他们必须学习 JS,并且要深入学习。
感谢您,我不确定这是好是坏,但感觉像是 WP 很大一部分的终结。作为一名开发者,我认为 WP 区块主题编辑器缺少很多文档,例如关于 Ajax 的内容?另外,根据我的经验,区块编辑器不够灵活(Elementor 更出色)……。
此外,the_content 现在变得非常大,我不确定这是否会让 WP 更快……我不确定是开始开发区块主题还是继续使用经典主题,您认为呢?
它仍然存在,并且仍然有额外的 CSS 区域。只需使用 /wp-admin/customize.php。
同样,/widgets.php 和 /nav-menus.php 也是如此。
一些区块主题将这些链接保留在 wp-admin 的外观下,而另一些则将其删除,但页面仍然存在。它们必须存在才能用于经典主题。
Widgets.php 在您拥有像 BasePress 插件这样的可以注入自己的侧边栏的插件之前,几乎没有用处。
我使用古老但仍在运行的 LH Dash Notes 插件,并保留一个仪表板小部件,其中包含指向上述内容的链接以及指向模板和模板部件页面的链接。
我很少使用外观下的网站编辑器链接,因为网站编辑器页面加载/使用速度很慢。我宁愿直接加载单篇文章模板或页眉模板部件等。如果我想更改全局设置,只需打开空白模板,该模板加载速度很快。
我发现以旧的方式创建菜单更容易且速度更快,然后在添加导航区块时选择该“传统菜单”菜单。它实际上不会使用传统菜单,而是会将其重新创建为导航区块,并赋予它相同的名称,例如主菜单等。
我非常喜欢区块主题。我不是 PHP 编码员,但我一直希望能够创建多个页眉、页脚和侧边栏(即使使用没有这些功能的主题),并在任何需要的地方使用这些部分。
添加 Gutenberg 插件,您可以为 CPT 单篇文章和 CPT 归档页面创建模板。
我刚刚使用区块主题和 Pods 插件将某人的 7 个不同的 Blogspot 网站转换为一个 WP 网站。它包含四个不同的 CPT 以及一些作者归档/单篇文章模板,以保持这种分离,并具有一个统一的页眉,该页眉在 Blogspot 上,他是用手工编码的 html 创建的,并用于所有 7 个 Blogspot 网站。
我已经将所有网站切换到 BlockPress 主题,除了一个之外,所有网站的页面速度得分都在 98-100 之间。得分不高的那个是 WooCommerce 网站,因此它很重,但仍然获得了 A 等级。
我喜欢 WordPress 的发展方向,但有时它令人困惑,我们需要忘记一些东西。在我们公司,教育客户 WordPress 正在发生变化并帮助他们从旧方法转向新方法也是一项挑战。