实现飞跃:构建我的第一个 WordPress 块插件

技术教程 2021年11月6日

1023 0 11

和大多数年份一样，我在这个美国独立日和毛茸茸的朋友们一起度过.我关上了所有的窗户，关上了百叶窗，打开了几个风扇来消除白噪音，然后打开电视.我和我的猫放松了.我的工作是让他们保持冷静，而我的 —通常喝醉了同胞们在夜空中烧掉数百美元.这是我的仪式，我很享受.

这个假期，我们重温了星际迷航:下层甲板的第一季，我学会了如何构建块插件.

这不是我第一次尝试.近三年前块编辑器推出时，我修改了一些块类型的想法.然而，我从未走远.文档很少，除了为前端设计构建琐碎的花里胡哨之外，我几乎没有使用 JavaScript 的经验.

离开我作为开发人员的日常工作为 WP Tavern 写作也意味着学习块开发的时间有限.而且，我过去几年的空闲时间被其他项目填满了.最近，我有一种冲动，想重新开始，再次开始为了好玩而建造东西.我从开发工作中获得的长期休假让我有时间追求其他兴趣，同时让我的创造力有机会得到补充.休息对我有好处.

昨天下午有时间消磨时间，我立即投入进去.在阅读了几个小时的文档后，研究了其他开发人员"代码和破坏性的东西，我有一个用于面包屑列表的功能块.

Marcus Kazmierczak 的版权块插件帮助我克服了最初的难题之一.看到用普通 JavaScript 编写的真实世界的非示例代码有助于深入了解系统的工作原理.

我对构建自定义块类型的总体想法?

这比我想象的要容易.同时，文档既是压倒性的，又是有限的.如果您甚至不知道自己在寻找什么，就很难找到正确的答案.入门门槛比我在 2007 年构建我的第一个插件时要高得多.Block Type API 使某些事情变得非常简单，但使其他事情变得复杂.

将我的第一个块类型成功插入到编辑器画布中令人欣慰.作为一名开发者，我认为这种感觉永远不会消失.

当站点编辑器启动时，我对可能出现的块(例如面包屑列表)感到兴奋.许多类似的功能在帖子编辑器中没有意义.然而，当用户可以直接编辑他们的模板时，就会开启一个充满可能性的世界.

学习曲线

我对 JavaScript 的了解足以对自己和他人构成威胁.我几乎整个职业生涯都在 WordPress 领域度过，这意味着专注于 PHP.但是，编程就是编程.一旦您对一种语言有了深刻的理解，那么在另一种语言中创建功能性脚本就不是不可能的飞跃.大多数相同的基本概念都在那里.障碍通常是学习一些新语法.

然而，"现代"的最大障碍是JavaScript 正在设置构建工具、打包器等.甚至输入第一行代码也是一项艰巨的任务.

当然，有些文档有普通的 JavaScript 示例，但是当您进入比基础更复杂的任何内容时，它就不再那么普通了.您将需要一种方法来捆绑 JavaScript 并转换 JSX 语法.这意味着像 webpack 和 Babel 这样的工具.

WordPress 有自己的脚本来解决大部分复杂问题，但我推荐 Laravel Mix.即使对于我们中间最不精通的 JavaScript 程序员来说，它也足够简单，并且有完整的文档.它是为那些不想担心工具而更多关注实际编写代码的人制作的脚本.

积木也是另一种飞跃.无论是自定义模板标签、短代码、小部件还是钩子，传统的 WordPress 开发都意味着在 PHP 环境中构建它们.我怀疑大多数插件开发人员都拥有大量可以通过块编辑器带给大众的功能.他们通常会依赖服务器端渲染.WordPress 有一个 ServerSideRender 组件来实际处理这个问题.

注册块类型最方便的特性之一是块"支持".系统.想要一个背景颜色选项?只需一行代码即可.希望用户访问字体大小控件吗?那也是一行.我毫不费力地扩展了我的面包屑块，为用户提供了大量的样式选项.而且，它们会适应网站的活跃主题.