我脑子里已经有了块主题的想法有一段时间了。在考虑构建单页个人资料/卡片主题几个月后,我终于在周末坐下来开始工作。在某种程度上,我只是想找乐子。然而,我的另一部分想从开发人员的角度了解块主题是如何演变的。

这个主题的灵感来自许多其他人和项目。从 2020 年 10 月开始,Shel Regstad 的双栏着陆页实验首次触发了它。Ask the Bartender 专栏紧凑而舒适的主题最近提出的一个问题让我的创意再次涌动。然而,看到主题团队批准了一个类似的块主题,MiniBlocks OOAK,Carolina Nymark 意味着现在的规则已经足够宽松,有可能将这样的东西推向世界。

其中一个问题是基于块的主题曾经让我很生气。去年,我在宝贵的空闲时间里花了几个月的时间构建一个新项目,但几周后 Gutenberg 插件更新却扼杀了我的进度。我知道在不稳定的基础上使用 alpha 软件会发生变化,但它仍在缩小。不用说,我再也找不到重新拿起它的动力了。

就在几天前,有了WordPress 5.9和更稳定的块主题系统,是时候再试一次了。

我想了解有关区块主题的更多信息。我能做到这一点的唯一方法就是回到起点。我需要重新熟悉常见的 HTML、CSS 和 PHP 的基本元素。忘掉我认为我知道的一切,在现代网络上构建。我需要再次成为菜鸟。

从技术上讲,在不诱发某种健忘症的情况下忘记我所知道的一切是不可能的。然而,也许——只是也许——我可以回到网络是由什么构成的。

如果我的 /node_modules 文件夹中没有跨越 900 多个项目的复杂依赖网络,我可以启动 WordPress 主题吗?

我可以在不通过 Composer 尽职尽责地引入我的基本 PHP 脚本的情况下创建一些东西吗?

您知道我可以构建 WordPress 主题吗?

第一步是在门口检查我的自我。当我搁置多年来围绕它们构建的现代工具和工作流程时,我发现这是一个非常简单的主题系统,它向 WordPress 的根源致敬,但足够灵活以扩展高级构建。

这并不是说一路上没有打嗝,但我们已经听够了。另外,我认为编程/开发是解决问题的艺术。

我度过了一个不安分的周末。从星期五到星期六晚上,我睡了四个,也许五个小时。也许我有太多的项目和事情要做,我无法将它们排除在外。不管怎样,我在星期天早上 3:30 醒来,很累但无法抓住那些急需的 Z。所以,我破解了我的代码编辑器并创建了一个新的主题项目。

不到一个小时,它就开始工作了。它的状态非常好,可以在 Twitter 上与朋友一分为二地分享。

以下是当前主页的截图。从技术上讲,这是唯一的页面。自从我第一次提交以来,我做了一些更改。

一页个人资料卡片主题。

这是一种称为“反射”的块状图案。 This Mountain Reflected on a Lake 照片来自 WordPress Photos,由 Anne McCarthy 拍摄。用于背景的渐变也是图像颜色的反映,我认为这是一种很好的触感。

本主题包括其他几种模式。目标是让用户选择自己喜欢的个人资料卡,自定义内容并保存。很简单。我遇到了这个问题,我在文章末尾深入探讨了这个问题。在大多数情况下,一切正常。

我从经验中学到的东西

用块创建 WordPress 主题很容易。大多数事物都是根据一套标准规则组织和运作的。模板在这里。零件去那里。在那里插入您的设置。我们可能会在未来的 WordPress 版本中看到更多结构。

我只使用代码编辑器和本地 WordPress 安装从头开始构建主题。没有节点模块。没有 PHP 库。没有任何构建设置。

我可能会在这个项目完成之前使用这些东西。有些工具只是让开发更容易。但是,不需要它们或钻研更复杂的 PHP API 会降低进入门槛。

感觉就像我回到了 2000 年代中期,只是有了一个更好的系统来处理所有复杂的部分。这一次,我几乎可以完全专注于设计。

底层系统存在很多问题。编辑器中仍然存在一些怪癖,例如宽对齐块周围的额外包装元素。此外,还有一些块需要更新 - 我正在查看您的 File 块,因为它没有重用现有的 Button 块。

基本上,有怪癖。作为一个主题,您学习与他们合作,等待上游修复,或者冒险尝试找到解决方法。

我对分享未完成的工作犹豫不决,但我也应该提供证据。有兴趣的人可以在本文发布之日查看 GitHub 存储库,至少在我对它做任何疯狂的事情之前是这样。

一些主题作者可能看过我的项目并认为这是一个过于简单的例子。然而,我可以很容易地将它的一切应用到一个成熟的主题上。不管大小,标准都是一样的。

也许我们应该开始重新思考什么是主题。基于块的主题如此年轻,我们都应该尝试一下。

错失的机会

此时我会讲一些技术性的知识,因为它对于解释错失的机会以实现整体用户体验至关重要。站点编辑器位于易于为更高级用户构建的位置。模式有助于为那些技术水平较低的人弥合差距,但它们还不够。

想想网页的主要部分。页眉、页脚、侧边栏、内容,甚至其中的小节。作为用户,如何用不同的内容模式替换屏幕上已有的整个内容区域设计?

您可以删除那里的一个并插入一个新的。但是,删除和插入页面部分是一项高风险操作。

如果您要更改的区域是模板部分,您可以将一个替换为另一个。这是假设主题作者已经为该区域注册了任何内容。这是一种低风险操作,也是站点编辑器的最佳功能之一。

例如,以下是出现在“替换”工具栏菜单项下的“二十二个标志”的标题模板:

替换二十二中的标题模板部分。

然而,这并不是主题的所有标题模式 - 它总共有 18 个。我想大多数最终用户永远不会发现它们。

为特定模板部件创建模式的缺点之一是最终用户无法用新模式替换或转换部件。

主题作者可以通过将模式代码复制到模板部分来复制他们的工作,假设它没有混入 PHP。或者,他们可以创建这些部分并通过模式块引入相关模式: