许多人抱怨开始构建古腾堡区块和应用程序的障碍。学习曲线陡峭，主要是由于开发环境的安装和配置困难。此外，扎实的JavaScript、Node.js、React和Redux知识是这个相当复杂的秘诀的必备要素。
官方的WordPress区块编辑器手册为开发人员提供了大量信息，但您可能会发现自己迷失在这些细节的海洋中。
值得一提的是，Gutenberg项目的首席架构师Matías Ventura在接受WP Tavern采访时所报告的内容：
虽然有些人可以快速学习它，但这对人们来说仍然是一个很大的障碍。我认为这有几个层次；文档在组织和演示方面可能要好一个数量级。我希望我们可以在那里做更多的事情。
考虑到这一点，我们决定提供一个分步教程，旨在帮助我们的读者开始使用Gutenberg区块开发。
- 古腾堡区块开发先决条件
- 什么是古腾堡区块？
- 设置您的WordPress开发环境
- 初学者区块脚手架的演练
- 项目：建造你的第一个古腾堡区块
古腾堡区块开发先决条件
对于本教程，唯一需要的技能是对WordPress插件开发有很好的了解，并且至少对HTML、CSS、JavaScript和React有基本的了解。
这会是一个雄心勃勃的项目吗？你打赌它会的！
在完整性和简单性之间找到正确的折衷方案或决定包含哪些主题和省略哪些主题并不容易。
希望中高级读者能原谅我们没有深入研究某些概念，例如React状态、Redux存储、高阶组件等。这些主题需要额外的空间和注意力，并且可能对于开始区块开发来说太高级了（除非您是 React 开发人员）。
出于同样的原因，我们不会涵盖与Gutenberg区块开发相关的一些更高级的主题，例如动态区块和元框。
有了本文结尾您将获得的知识，您将能够立即开始享受乐趣并提高工作效率。
一旦您开始构建区块，您将准备好进一步提高您的技能并自行构建更高级的古腾堡区块。
什么是古腾堡区块？
自2018年12月首次发布以来，区块编辑器在各个方面都得到了极大的改进：更强大的API、更高级的用户界面、改进的可用性、大量新区块、全站点编辑的首次实现等等.
简而言之，即使古腾堡仍在大力开发中，它也已经走过了漫长的道路——如今，区块编辑器已成为可靠的功能性页面和网站构建器的成熟候选者。
从开发人员的角度来看，Gutenberg是一个基于React的单页应用程序(SPA)，它允许WordPress用户在WordPress中创建、编辑和删除内容。但是，这不应该让您想到传统内容编辑器的增强版。
我们想明确这一点：
Gutenberg不是常规的WYSIWYG编辑器。相反，它重新定义了WordPress中的整个编辑体验。
在古腾堡，内容被划分为区块，这些区块是用户可以用来创建文章和页面或整个网站的“砖块”。
但从技术上讲，什么是区块？
我们喜欢WordPress的定义：
“区块”是用于描述标记单元的抽象术语，这些标记单元组合在一起形成网页的内容或布局。这个想法将我们今天在WordPress中实现的概念与短代码、自定义HTML和嵌入发现结合到一个一致的API和用户体验中。
标题、段落、列、图像、画廊以及构成编辑器界面的所有元素，从侧边栏面板到区块工具栏控件，都是React组件。
那么，什么是React组件？W3Schools提供以下定义：
组件是独立且可重用的代码。它们的用途与JavaScript函数相同，但独立工作并通过render()函数返回HTML。
在WordPress 5.8中使用Gutenberg区块
虽然Gutenberg提供的编辑体验与经典的WordPress编辑器相比是全新的，但WordPress将您的内容片段存储在数据库中的方式根本没有改变。这是因为Gutenberg是一个在WordPress中运行的应用程序，但不会改变CMS的核心工作方式。
使用Gutenberg创建的文章（包括文章、页面和自定义文章类型）仍存储在wp_posts表中，与经典编辑器完全相同。
但是在使用Gutenberg创建的文章中，您会在表格中找到更多信息，这些信息代表了通过Classic Editor与Gutenberg创建的文章之间的根本区别。
这些信息看起来像HTML注释，它们有一个特定的功能：分隔区块：
代码编辑器视图中的博客文章。
区块分隔符告诉WordPress要在屏幕上呈现什么区块。它们还为JSON对象中的区块属性提供值。这些道具决定了区块应该在屏幕上呈现的方式：
wp_posts存储在表中的博客文章
设置您的WordPress开发环境
设置现代JavaScript开发环境需要扎实的高级技术知识，例如Webpack、React和JSX、Babel、ESLint等。
被吓倒了？不要！WordPress社区已经通过提供强大的工具来帮助您避免混乱的手动配置过程。
为简单起见，我们不会在本文中介绍转译（不过，我们建议您在了解区块开发的基础知识后熟悉一下）。相反，我们将介绍两种替代工具，您可以使用它们在几分钟内快速轻松地设置现代JavaScript开发环境。您可以选择对您的项目最方便的一个。
设置JavaScript开发环境以构建Gutenberg区块是一个三步过程：
- 安装Node.js和npm
- 设置开发环境
- 设置区块插件
让我们开始吧。
1. 安装Node.js和npm
在安装您的开发环境并注册您的第一个区块之前，您需要安装Node.js和Node包管理器 (npm)。
注：Node.js是基于Chrome的V8 JavaScript引擎构建的JavaScript运行时。npm，通常被称为Node包管理器，被认为是“世界上最大的软件注册表”。
您可以通过几种不同的方式，安装Node.js和npm。但首先，您可能需要检查该软件是否已安装在您的计算机上。
为此，请启动终端并运行以下命令：
node -v
如果结果为command not found，则您的计算机上未安装Node.js，您可以继续安装。
对于本文，我们选择了最简单的安装选项，即Node Installer。您需要做的就是下载与您的操作系统相对应的版本并启动安装向导：
Node.js下载页面
安装Node.js后，再次在终端中运行node -v命令。您还可以运行npm -v命令以确认您有可用的npm包。
您现在配备了以下工具：
npxNode.js包运行器（请参阅文档）。这允许您运行npm命令而无需先安装它。npmNode.js包管理器（请参阅文档）。这用于安装依赖项和运行脚本。
下一步是安装开发环境。
2. 设置你的开发环境
在本地计算机上安装最新版本的Node.js和npm后，您将需要一个WordPress开发环境。
您可以使用本地开发环境，也可以使用官方WordPress工具。让我们来看看这两种选择。
选项 1：本地开发环境
您可以选择不同的本地开发工具，例如MAMP或XAMPP：
在本地环境中创建一个新的WordPress网站。
选项 2：wp-env
您也可以选择官方wp-env工具，它提供了一个本地WordPress开发环境，您可以直接从命令行启动。Noah Alen将其定义如下：
本地WordPress环境现在就像运行单个命令一样简单。wp-env是用于本地WordPress环境的零配置工具。它提供有关选项的决策，以便用户可以快速启动WordPress而不会浪费时间。事实上，我们的目标是让所有人都能轻松访问这些环境——无论您是开发人员、设计师、经理还是其他任何人。
如果您决定试一试，安装wp-env所需的工作量很小。只需按照以下步骤操作：
第 1 步：确认Docker和Node.js安装
为了满足技术要求，您首先需要在您的计算机上安装Docker和Node.js。那是因为wp-env创建了一个运行WordPress网站的Docker实例。对代码所做的任何更改都会立即反映在WordPress实例中。
第 2 步：从命令行安装@wordpress/env
在您的计算机上运行Docker和Node.js，您可以继续安装WordPress开发环境。
您可以全局或本地安装wp-env。要在全局范围内执行此操作，您需要从插件目录中运行以下命令（更多信息请参见下面的“重要”通知框）：
npm install -g @wordpress/env
让我们分解一下：
提示：默认情况下，在Mac或Linux上，节点包安装在/usr/local/lib/node_modules中。
如果当前用户对该目录没有写权限，则会发出EACCES错误。了解有关在全局安装包时解决EACCES权限错误的更多信息。
要确认wp-env已成功安装，请运行以下命令：
wp-env --version
您应该会看到当前wp-env版本，这意味着您现在可以使用插件文件夹中的以下命令启动环境：
wp-env start
您可以使用以下地址访问WordPress仪表盘：
- http://localhost:8888/wp-admin/
默认凭据如下：
设置你的区块插件
现在您需要一个入门区块插件来构建。但是，无需手动创建包含所有必要文件和文件夹的开发区块插件，您只需运行一个开发工具，即可提供开始区块开发所需的所有文件和配置。
同样，您有几个选项可供选择。让我们来看看每一个。
选项 1：使用@wordpress/create-block设置区块插件
@wordpress/create-block是用于创建Gutenberg区块的官方零配置工具：
创建区块是一种官方支持的创建区块的方法，用于为WordPress插件注册区块。它提供了一个没有配置的现代构建设置。它生成PHP、JS、CSS代码以及启动项目所需的所有其他内容。
它很大程度上受到create-react-app的启发。向@gaearon、整个Facebook团队和React社区致敬。
本地环境启动并运行后，您可以通过简单地运行命令npx @wordpress/create-block 来设置起始区块，它将提供创建插件脚手架和注册新区块所需的所有文件和文件夹。
让我们运行一个测试，看看它是如何工作的。
从命令行工具导航到/wp-content/plugins/目录并运行以下命令：
npx @wordpress/create-block my-first-block
当要求确认时，输入y继续：
使用@wordpress/create-block创建一个区块
该过程需要一些时间。完成后，您应该得到以下响应：
区块插件已创建
现在启动您的WordPress开发环境并转到WordPress仪表盘中的插件屏幕。一个名为“My First Block”的新插件应该已添加到您的插件列表中：
区块插件已成功安装
注：如果您使用wp-env工具并从包含插件的目录运行wp-env start，它将自动挂载并激活该插件。如果您从任何其他目录运行wp-env start，将创建一个通用的WordPress环境（另请参阅WordPress开发站点）。
如果需要，激活插件，创建一个新的博客文章，向下滚动区块插入器到小工具部分，然后选择你的新区块：
使用@wordpress/create-block创建的示例区块
现在返回终端并将当前目录更改为my-first-block：
cd my-first-block
然后运行以下命令：
npm start
这使您能够在开发模式下运行插件。要创建生产代码，您应该使用以下命令：
npm run build
选项 2：使用create-guten-block设置区块插件
create-guten-block是用于构建古腾堡区块的第三方开发工具：
create-guten-block零配置开发工具包 (#0CJS) 可在几分钟内开发WordPress Gutenberg区块，无需配置React、webpack、ES6/7/8/Next、ESLint、Babel等。
就像官方工具create-block一样，create-guten-block基于create-react-app，可以帮助您轻松生成您的第一个区块插件。
该工具包提供了创建现代WordPress插件所需的一切，包括以下内容：
- React、JSX和ES6语法支持。
- 幕后的webpack开发/生产构建过程。
- ES6之外的语言附加功能，例如对象扩展运算符。
- 自动前缀CSS，因此您不需要 -webkit或其他前缀。
- 一个构建脚本，用于将JS、CSS和图像与源映射捆绑在一起进行生产。
- 使用单个依赖项cgb-scripts对上述工具进行无忧更新。
请注意以下警告：
权衡是这些工具已预先配置为以特定方式工作。如果您的项目需要更多自定义，您可以“eject” 并自定义它，但是您需要维护此配置。
一旦你手头有一个本地WordPress网站，启动你的命令行工具，导航到你安装的/wp-content/plugins文件夹，然后运行以下命令：
npx create-guten-block my-first-block
在创建项目结构并下载依赖项时，您必须等待一两分钟：
使用create-guten-block创建Gutenberg区块
该过程完成后，您应该会看到以下屏幕：
使用create-guten-block成功创建Gutenberg区块
下一张图片显示了在Visual Studio Code中运行终端的项目结构：
Visual Studio Code中的区块插件
现在回到您的WordPress仪表盘。插件屏幕中应该会列出一个新项目——它是my-first-block插件：
使用create-guten-block创建的新插件的插件屏幕
激活插件并返回终端。将当前目录更改为my-first-block，然后运行npm start：
cd my-first-block
npm start
您应该得到以下响应：
