PHP 开发者入门区块开发指南
作为 Web 开发者，我们不受航空或核电站等安全关键系统那种严苛要求的约束。
我们 Web 开发者习惯于在创建后端应用程序和前端浏览器端 JavaScript 时采取更随意的方法。当然，我们会浏览一下文档，可能阅读一两篇教程博客文章，或者在 StackOverflow 上搜索当前遇到问题的解决方案，但通常我们不需要采取安全关键系统所需的严格方法。
这种“黑客”心态在大多数情况下可能对我们有用，但在为 WordPress 区块编辑器（也称为 Gutenberg）开发时，它的作用就不那么大了。这有几个原因。区块编辑器是一个庞大而复杂的软件。它还有一个独特的 API。此外，它使用的技术让我们这些更习惯使用 PHP 的 WordPress 开发者感到有些陌生和令人生畏，甚至可以说是可怕——例如 node、React、JSX、ES6 等。
因此，作为希望涉足区块开发这片浑水的 Web 开发者，我们应该采取更系统的方法，做好功课，以便正确了解 API，学习相关流程和技术，并确保我们遵循最佳实践。
这本身就是一个令人生畏的前景。您可能会问自己以下问题：我需要知道什么？如何开始？有哪些资源可以帮助我学习？当我遇到困难时，有哪些资源可以帮助我？确实，有很多东西要学，而帮助您学习的资源并不总是容易找到。
本文旨在引导您穿越迷雾，步入清晰的光明。它是由一位走过同样道路的人撰写的。在学习区块开发之前，我是一名 PHP 开发人员，从创建自定义主题开始，后来开发插件以在 WordPress/WooCommerce 站点上实现自定义功能。最近，我需要学习 JavaScript，以便为我的客户在 Web 应用程序中创建客户端交互性并与 WordPress REST-API 协作。
因此，请允许我引导您了解前面提出的四个问题的一些可能答案，即：
- 我需要知道什么？
- 如何开始？
- 有哪些资源可以帮助我学习？
- 当我遇到困难时，有哪些资源可以帮助我？
我需要知道什么？
您会发现，作为一名经验丰富的 PHP 开发人员所拥有的过程式编程技能在区块开发中并不太需要。相反，对函数式编程的理解将对您有很大帮助，尤其是 React。
React 是一个基于 JavaScript 构建的框架，近年来变得非常流行。区块编辑器几乎完全是用 React 构建的，创建自定义块需要理解 React。如果您不熟悉 React，请找一个好的教程。有很多可用的教程，包括免费和付费的，但官方教程是打下基础概念的好地方。
当然，不用说，您应该已经了解JavaScript，特别是您应该熟悉ES6。
React 应用程序通常使用 JSX 来渲染组件，区块编辑器也不例外，因此您应该确保熟悉JSX。
您需要在开发机器上安装NodeJs才能进行区块开发，但您实际上不需要学习太多关于 node 本身或任何配置选项的知识，正如您将在下一节中看到的那样。
如何开始？
如前所述，您需要在开发机器上安装 node。您还需要一个本地的 WordPress 安装。如果您还没有设置本地 WordPress 安装的环境，那么有多种选择。您可以在安装本地服务器页面上了解更多信息并选择最适合您需求的选项。
显然，您还需要一个代码编辑器，例如VS Code、Sublime Text或Brackets。此外，您还需要一个终端应用程序——大多数计算机操作系统已经有一个，一些代码编辑器也集成了终端。
虽然了解配置 node 很有用，但您实际上并不需要知道如何配置。您可以通过在终端中使用以下命令，获得一个基本的区块应用程序脚手架以及一个完整且完全配置好的构建环境：
npx @wordpress/create-block my-project其中 my-project 是您为项目选择的名称。
@wordpress/create-block 工具为您提供了启动和运行所需的一切，您可以在脚手架搭建完成后，在终端中运行此命令来对您的区块进行交互式开发：
npm start有哪些资源可以帮助我学习？
您的第一站应该是区块编辑器手册。这是区块开发方面的权威资源。
诚然，它并不完美，例如它的结构可以更好，因此导航起来可能相当困难，但这正是本文的目的——帮助您解决这个问题。手册在不断更新和改进，因此任何不足之处都会随着时间的推移而改善。
手册中有一些重要的精华内容可以帮助您入门，虽然有时可能有点难找，但我在这里为您指出最突出的信息。
首先，“入门”部分有一个创建区块教程。这将让您启动并运行一个基本区块，并教您区块开发的基础知识。
完成该教程后，还有另一个有用的教程可以帮助您在此基础上继续学习。
一旦您对构建区块有了基本的了解，就值得花一些时间来理解区块编辑器的架构，并且当您正式开始一个区块开发项目时，几乎肯定需要参考各种参考指南。
随着您的知识和理解的进步，您几乎肯定会发现操作指南部分很有用，尽管这部分在结构上是比较混乱的章节之一，特别是关于创建动态区块的章节肯定应该在您的关注范围内。即使您不打算构建动态区块，了解静态区块和动态区块之间的区别也很重要。
如果您的 JavaScript 有点生疏，有一个完整的章节是关于如何在区块编辑器中使用 JavaScript的。
理解某物如何工作的最好方法莫过于查看一些源代码。区块编辑器的所有源代码都包含在Gutenberg GitHub 仓库中。各个核心区块（即内置在区块编辑器中的区块，如段落、标题、按钮和图库等）的源代码位于/packages/block-library/src/目录中。这是了解核心开发人员如何创建特定区块的好地方。
更多有用且有趣的示例（也说明了最佳实践）可以在gutenberg-examples Github 仓库中找到。该仓库也定期更新新鲜和最新的示例。
您使用组件构建区块，当浏览手册中的组件参考以决定在区块开发项目中使用哪些组件时，您可能会认为在将代码添加到项目之前能够试用它们以了解其工作原理会很有用。嗯，您可以！有一个Storybook 工具，允许您浏览可用组件并交互式地试用它们。
最后，如果以上所有内容都让人有点不知所措，而您想要的只是一个关于创建区块的温和、循序渐进的入门教程，那么最近在learn.wordpress.org上发布的课程，即区块开发入门：构建您的第一个自定义区块，可以满足您的需求。
当我遇到困难时，有哪些资源可以帮助我？
您学习区块开发的旅程不会一帆风顺——相信我，我经历过！
好消息是，调试 JavaScript 和 React 比调试 PHP 容易得多。使用 PHP，您需要将错误记录到日志文件中，然后去检查日志文件。而对于 JavaScript 和 React，错误会出现在终端和浏览器的控制台中。手册中有一个有用的故障排除指南，涵盖了控制台的使用。
您很早就会遇到的一个错误是：
这是一个您会经常遇到的错误。实际上，每次您更改 save() 函数时，它都会在编辑器中弹出。save() 函数是将区块内容保存到数据库的函数。
通常这不是问题，您只需点击蓝色按钮，一切就会恢复正常。
发生此错误是因为当您更改 save() 函数时，从数据库检索的内容不再与 save() 函数指定应保存的内容匹配，并且无论更改多么微小或不重要，都会发生这种情况。如前所述，您会发现它经常发生，并且您会习惯看到它。
每当您遇到此错误或编辑器中出现的任何其他问题时，您都可以在浏览器的控制台中查找有关错误的更多信息。事实上，浏览器控制台是区块开发时您最好的朋友之一。您可以在代码中随意使用任何控制台方法，例如 console.log()，来获取有关应用程序状态的信息。实用提示：在开发区块时，您将广泛使用对象，而 console.table() 是检查对象（例如 attributes 对象）的好方法。
您也可以使用浏览器内置的调试器，它允许您在代码中使用断点。请访问各自的网站以了解更多关于在Chrome和Firefox中调试的信息。
您会发现非常值得安装的是React DevTools，可作为Chrome和Firefox的扩展使用。随着您更深入地研究区块开发，您可能还会发现 Redux DevTools 很有用。它也适用于Chrome和Firefox。React 和 Redux DevTools 为您提供了标准浏览器调试工具无法提供的应用程序状态洞察。
只要您的应用程序达到可以在浏览器中运行的阶段，基于浏览器的工具就很有用。有时您会遇到编译时错误，因此请务必也关注终端，因为编译时错误会在那里显示。
有时您会卡在某个问题上，而浏览器工具和编译错误无法帮助您解决问题。在这种时候，您会发现求助于在线开发者社区是很有用的。
以下是几个您可以提问的地方，社区已被证明既友好又乐于助人：
您也可以使用Gutenberg 仓库来获得帮助。例如，您可以创建一个带有“[Type] Help Request”标签的问题，或者在讨论板上提问。
在线提出技术问题时，请记住要有礼貌。您应该尽可能清晰、完整地说明问题是什么。您还应该解释您已经尝试过什么，并概述您已经做了哪些研究来尝试解决问题。
总结
我希望这篇文章能帮助您有信心深入研究可用资源并开始区块开发。如前所述，您应该花时间使用系统的方法来学习区块编辑器，我希望我已经能够引导您走上适合您的道路。
最后，我祝愿您在应对区块开发的旅程中一切顺利。它并不像最初看起来那么难，只要方法得当，您可以有信心最终取得成功。