使用create-guten-block构建古腾堡编辑器

Gutenberg 是新的 wordpress 编辑器，每个人都在谈论它。它引入了一种使用 WordPress 编写内容的全新方式。因此，不仅开发人员可以从其块建模布局中受益，最终用户也可以使用它创建动态页面布局。 

但是，对于想要将其集成到项目中的开发人员来说，使用 Gutenberg 构建自定义块可能相当麻烦。本教程将介绍一个令人难以置信的工具create-guten-block包——通过它你可以在几分钟内创建古腾堡块。

那么，让我们开始吧！

介绍create-guten-block

create-guten-block ( cgb) 是用于构建 WordPress Gutenberg 块的零配置开发人员工具包。由Ahmad Awais （我的丈夫和一位经常为 WordPress 核心做出贡献的开源开发倡导者）构建的工具包降低了创建 Gutenberg 块的难度。它是零配置的，它创建的块没有锁定，只有一个依赖。  

要构建 Gutenberg 块，您需要首先创建一个 WordPress 插件。为此，您将从配置webpack、react、ES 6/7/8/Next、ESLint、Babel 等开始，然后您终于可以开始编写代码块了。并且您需要继续更新您的工具配置作为支持包和库。 

这会减慢开发速度，因此 Ahmad 将所有这些配置隐藏在一个名为 的优化包 cgb-scripts中，您可以在块的根文件夹中找到该包。这是我之前提到的单一依赖项。 

因此，无需单独定期更新所有内容，而是将 cgb-scripts 包保持最新状态，这样您就可以随时更新它，而无需对代码进行任何更改。这是我最喜欢它的一件事。 

长话短说...

create-guten-block 是开发人员的首选零配置。无需配置webp ack、React、Modern javascript、ESLint、Babel 等 即可在几分钟内构建 WordPress Gutenberg 块的工具包—项目 GitHub 站点

特征

现在让我们深入了解该工具的一些最突出的功能。

现代开发环境

create-guten-block 为开发 WordPress Gutenberg 插件提供了最新的开发环境。它具有以下功能：

• 自动前缀css

• React  jsx和 ES6+ 语法

• Webpack 开发/生产构建过程

• 将 JS、CSS 和图像与 source-maps 捆绑在一起用于生产

一种依赖

上述所有工具的维护和更新都由一个构建依赖项处理： cgb-scripts 包。因此，尽管使用了 Webpack、Babel、ESLint 和其他令人惊叹的项目，您仍然可以使用这个始终保持最新状态的包享受无忧的开发体验。

无配置

使用该 create-guten-block工具包时，您无需进行任何配置。开发和生产环境所需的大部分东西都是预先配置好的。 

无锁定

开发人员在开始使用该 cgb 工具包之前可能会担心的一个问题是，如果项目需要一些定制，该怎么做，因为这些工具已预先配置为以特定方式工作。因此，好消息是，您可以随时 “弹出” 您的项目并对其进行自定义——但您需要自己维护配置。

要弹出您的项目，运行一个命令，所有配置和构建依赖项将直接移动到您的项目中，您可以从您离开的地方开始。

入门

入门和使用create-guten-block工具包非常简单。只需安装它，然后运行为 WordPress 创建一个 Gutenberg 块插件。但在此之前，需要设置一些先决条件。因此，请确保您具备以下条件：

• 本地 WordPress 设置

• 一个基本的 WordPress 主题

• 默认Gutenberg 插件的已安装和激活副本

接下来，请按照以下简单步骤操作：

1.安装节点.js & NPM

您需要拥有node.js 并 npm安装。如果它们已经安装，则跳到下一步。否则，下载 Node.js 并安装它。要验证安装，请键入以下命令。 

node -v
# Results into v9.1.0 — make sure you have Node >= 8 installed.

npm -v
# Results into 5.6.0 — make sure you have npm >= 5.3 installed.

2.安装create-guten-block

现在，您将安装 create-guten-block 在本地 WordPress /wp.local/wp-content/plugins/ 目录中。此外，您将为要创建的插件提供名称。运行以下命令并等待一段时间，因为安装可能需要几分钟。

npx create-guten-block demo-block

demo-block 此命令在当前文件夹内创建一个名为的插件目录 。它还创建必要的文件夹结构并安装开发依赖项。

它创建一个这样的文件夹结构：

/local.dv/wp-content/plugins/demo-block

├── plugin.php├── package.json
├── README.md
|
├── dist
|  ├── blocks.build.js
|  ├── blocks.editor.build.css
|  └── blocks.style.build.css
|
└── src
   ├── block
   |  ├── block.js
   |  ├── editor.scss
   |  └── style.scss
   |
   ├── blocks.js
   ├── common.scss
   └── init.php

3.运行启动和构建命令

完成安装设置后，打开项目文件夹并通过键入以下命令运行启动脚本：

cd demo-block
npm start

该npm start命令在开发模式下运行您的插件。还有一个 npm run build 命令可以帮助您在生产模式下运行插件。继续阅读以了解您可以使用该 cgb工具包执行的三种不同功能的详细信息。

工作流程create-guten-block

当您使用此脚本时，您将使用三个脚本来帮助您开发、构建和弹出插件。

npm start脚本_

当您在开发模式下工作时，此命令用于编译和运行 Gutenberg 块。它还监视任何更改并报告代码中的错误。

npm run build脚本 _ 

要在生产模式下工作，请在 dist 文件夹中运行此命令。在这里，您将在控制台中看到构建消息、错误和 lint 警告。此命令仅运行一次并报告gzip生成代码的文件大小。

npm run eject脚本_

如果您想在任何时候将插件弹出 create-guten-block，请运行此命令。这使您可以根据自己的要求自定义项目。但是，这是一个单向过程，无法恢复。 

编辑后，您 eject必须自己更新和维护所有项目依赖项。

与create-guten-block

成功安装和设置后，您可以打开 WordPress 仪表板并转到插件部分。在这里您可以找到一个名为 demo-block — CGB Gutenberg Block Plugin正在添加的新插件。单击激活按钮，您就可以开始了。

现在转到post s > Add New打开 Gutenberg 编辑器。（请记住，Gutenberg 插件是该工具包的先决条件 。） create-guten-block

单击+ 图标以访问所有块。在搜索栏中，键入CGB  ，您会发现正在添加的 Gutenberg 块。

单击它并在 WordPress 编辑器中添加一个 Gutenberg 块，如下所示：

点击发布按钮以查看它在前端的显示方式。

惊讶吗？我是，当我意识到 Ahmad 为前端和后端设计了不同的 Gutenberg 块时。这可以通过在代码编辑器中打开插件 的src文件夹 来进一步验证。demo-block

在这里，您可以找到两个单独的文件：  editor.scss处理后端的 CSS 和 style.css  （editor.css 排在style.scss之后，使其优先级更高）。这两个文件都已通过命令包含在主block.jsimport文件中。 

结论

与其他入门工具包和样板文件不同，takeit 提供了许多显着的功能， create-guten-block 总而言之，以下是对其主要功能的简要总结：

• 版本化 

• 易于更新 

• 新古腾堡区块的合理默认值 

• 单一 cgb-scripts 依赖 

create-guten-block 已 获得 MIT 许可，可在 GitHub 上 免费 获得。