如何在 2020 年创建自定义 WordPress 编辑器块

Peter Tasker 关于现在如何创建块

如今，使用 WP CLI 的“脚手架”命令 进行设置变得相当简单。此命令将设置一个 WordPress 主题或插件，其中包含一个“块”文件夹，该文件夹包含创建自定义块所需的 PHP 和基本 CSS 和 JavaScript。我注意到的唯一缺点是 JavaScript 使用旧的 ES5 语法而不是现代的 ESNext。现代 JavaScript 允许我们编写更简洁的代码并在自定义块代码中使用 JSX。

您还可以使用 “create-guten-block” 工具，该工具由 Ahmad Awais 开发。它为您提供了开箱即用的许多样板内容，例如 Webpack、ESNext 支持等。设置非常简单，类似于 Create React App。

到目前为止，我已将 create-guten-block 用于我创建的少量自定义块，并且发现它是一种非常不错的体验。

但是……我觉得我只是碰巧对这一切感到满意。我一只脚在 WordPress 开发中，另一只脚碰巧在 React 开发中。使用这两种技术一起构建块对我来说感觉很自然。如果块是 Angular 或其他东西，我觉得我可能根本不会尝试。

我赞同这种观点

我还发现，处理代码中正在积极更改的块非常令人恼火。每次重新加载 Gutenberg 时，您都会收到“此块似乎已在外部修改……”的消息，因为块的标记已更改。

我了解 为什么它会抛出错误，但这会降低您的速度。

最后，Peter 提到了构建块的方法， 高级自定义字段就是这样做的。这几乎感觉像一个奇怪的怪异反转世界。ACF 方法似乎更像是 WordPress 在正常情况下会做的事情（仅使用 PHP 和模板构建块），而第三方将是添加所有花哨的 React 内容的人。

直接链接 →