WordPress 向全站编辑的演进

Avatar of Geoff Graham
Geoff Graham

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

块编辑器彻底改变了 WordPress。我们可以创建内容并以组件式的方式排列它们的想法,意味着我们在创建内容方面拥有很大的灵活性,以及开发新型模块化内容的大量机会。

但自编辑器最初引入以来,块生态系统中发生了更多事情。去年,Dmitry Mayorov 撰写了关于块变体的出现以及它们如何通过扩展现有块来创建其样式变体从而提供更多灵活性的文章。

Screenshot of the block inserter in the WordPress post editor. The word buttons is typed into the search field and three button options are displayed below it, one for buttons, one for wide buttons, and one for full buttons.
WordPress 块插入器中的三个按钮变体

然后我们得到了块模式,或者将块拼接成可重用的模式的能力 的能力

Full page screenshot of the WordPress post editor. On the right is the post content, which includes a large bold title in black above two paragraphs. On the left is the block inserter expanded with the Patterns tab active and displaying two options for header patterns.
块模式夹在块插入器中的块和可重用块之间,这完美地比喻了它在 WordPress 编辑更大图景中的位置。

因此,这意味着我们有块变体可重用块块模式。这对于直接在编辑器中设计布局来说是很多很棒的工具!

但是您可能听说过 WordPress 计划让块超越帖子编辑器。它们直接针对全局元素——菜单、页眉、页脚等——以期在 WordPress 中建立全站编辑 (FSE) 功能

Matt Mullenweg 介绍了 Twenty Twenty-One 主题及其 Beta 版全站编辑功能。

哇。我当然不能代表其他人,但我的脑海中立刻浮现出这对主题开发者意味着什么。我的意思是,当模板是在编辑器而不是代码中设计的时候,主题是什么?我想主题很像一个包含很少标记的壳集合。也许更多的开发工作将用于创建块、块模式和块变体,以将所有内容拼接在一起。

实际上就是这样,而且您可以立即进行测试。确保您使用的是 WordPress 5.6 或更高版本,然后安装实验性的 TT1 Blocks 主题Gutenberg 插件

打开主题,它实际上是两个 PHP 模板,然后——就是这样——用于块模板和块模板部分的 HTML 文件。

块模板和块模板部分的分离方式与当前将模板与模板部分分离的常用方法非常相似。

我个人完全支持这个方向。我甚至可以这么说(偷偷瞥了一眼 Chris),CSS-Tricks 也完全支持这个方向。 我们去年切换到了块,它重新点燃了我们对撰写像这篇博客文章一样的文章的热爱。(老实说,我过去可能会先用代码编辑器写这样的东西,然后用经典编辑器将其移植到 WordPress。当时对我来说,那是一种更好的写作体验。)

Full-page screenshot of the WordPress full site editor with a solid black sidebar on the left with navigation to switch between them templates and site content, and the editor on the right with a mint green background and blocks arranged on the page for the site header, navigation, placeholder content, and three footer widgets.
TT1 Blocks 主题添加了一个“站点编辑器”,它从主题的块模板和块模板部分获取提示。

虽然我对块持乐观态度,但我了解其他人并不这么认为。事实上,我与许多人合作过(我的意思是善意的),他们对块编辑器一无所知。为块编辑器开发是一个巨大的思维转变,目前 缺乏相关文档。事情仍然处于积极开发阶段,并且每次发布新的 WordPress 版本都会对块编辑器进行迭代。不能责怪人们决定等待下一班车,因为事情会逐渐稳定下来,标准也会随之发展。

但是,与此同时,这确实符合 Matt Mullenweg 在 2015 年对 WordPress 开发人员臭名昭著的建议深入学习 JavaScript。

我(并且仍然非常)对块感到兴奋。全站编辑让我有点害怕,但这主要是因为它将块的概念移到了编辑器之外,而我目前才开始对它们有很好的了解。

无论这一切意味着什么,我最期待的是一个支持 FSE 的默认主题的正式发布。还记得您第一次打开 WordPress 主题时的感受吗?我对标记感到惊叹,并花费无数个小时挑选代码行,直到我把它变成自己的。这就是我第一次打开新主题时所期待的体验。

在此之前,这里有一系列保持循环的方法

  • WordPress 设计 – 手册将 FSE 列为团队当前的优先事项之一,并概述了该项目。它上次更新于 2020 年 5 月,因此我不确定信息有多新以及该页面是否仍在维护。
  • 如何测试 FSE – 在本地设置 FSE 站点并参与测试的说明。
  • TT1 主题仓库 – 查看正在报告的内容以及这些问题的状态。这是关注主题开发的地方。
  • Gutenberg 插件仓库 – 报告的插件问题。这是关注块开发的地方。
  • 主题实验仓库 – 查看更多正在尝试使用块和 FSE 的主题。
  • #fse-answers – 一系列关于 FSE 的问题的回复集合。
  • #fse-outreach-experiment – 用于讨论 FSE 的 Slack 频道。