WordPress 正在迅速发生如此多的变化，以至于即使对于开发人员来说，也越来越难以跟上，更不用说网站所有者和最终用户了。长期以来，我们所知道的经典编辑器不再是 WordPress 网站上的默认选项。尽管许多人至今仍在使用它。WordPress 现在有了新的块编辑器，用于撰写您的帖子和页面。
在本文中，我们将介绍如何使用 WordPress 的“创建块”工具开发新块。它生成所有必要的文件和文件夹，您可以在这些文件和文件夹上快速构建以开发新块。
那么，你问这两个编辑器有什么不同呢？
经典的可以主要操纵特定页面上的内容。设计和布局是相当固定的，除了联系你的开发人员之外，对此无能为力。该内容还包含 HTML 标记，这可能会使非技术人员的编辑令人生畏。
现在，有了新的块编辑器，块是排列新页面上内容的核心。不仅是内容，您还可以根据需要安排页面的布局。不再需要处理 HTML 标记。您不仅有用于创建内容的块，而且还具有用于添加间距的块和根据需要排列布局的列。
但奇怪的是，有了所有这些新功能，许多网站所有者仍在使用插件，使他们能够继续使用经典编辑器。也许他们只是需要更多时间来适应新界面。也许他们只需要克服对新事物的恐惧！
不可否认，WordPress的未来属于区块。因此，对于所有刚走上这条道路的开发人员，让我们看看如何自己快速创建一个新区块。
我们需要什么才能开始区块开发
首先，我们需要确保我们的系统上安装了 Node。您可以从以下位置下载 Node：https://nodejs.org/en/download
它将安装开发 ReactJS 应用程序所需的 NodeJS 和 NPM（节点包管理器）。NPM 将允许您安装开发现代块和基于块的主题所需的包。在任何命令提示符下键入“node -v”和“npm -v”都应该为您提供相应软件包的版本号，确认您已经安装了这些软件包，并且您已准备好继续进行开发。
接下来，您需要有一个可用于编写一些代码的 IDE。我使用 Visual Studio Code，但您可以选择任何您喜欢的内容。只要能完成工作，哪一个并不重要。
接下来，您需要设置一个本地开发环境，您可以在开发阶段在本地测试站点。一些本地开发环境包括：
- XAMPP的
- MAMP
- 本地飞轮
- 等
我使用 XAMPP。我已经使用它很长时间了，它可以完成工作。我听说过其他一些人的好话，所以不要犹豫，去尝试一下。以下是您可以选择的用于 WordPress 开发的本地 Web 服务器列表。
WordPress 块开发所需的技能
在最基本的条件下，您需要具备：
- 了解HTML，CSS和JavaScript。
- 你需要熟悉 ES6 语法和箭头函数，因为 React 使用了很多这些函数。
- 熟悉 React 也是可取的。
- 是的，最后但并非最不重要的一点是，您需要熟悉现代开发工作流程，其中包括使用 NodeJS 和 NPM 等工具在开发过程中安装和管理所需的包。
- 一些WordPress开发知识，包括钩子、过滤器和函数。
- 了解 Git 等版本控制工具是一个额外的优势。
现在让我们创建一个新的 WordPress 块
让我们一起做这个练习。让我们创建一个新块，名称为“my-practice-block”。我们还需要为块选择一个命名空间。它必须是独一无二的。因此，我将添加我的公司 Ray Creations 的首字母，以及区块名称的首字母。因此，我们可以提出这个独特的命名空间“rcmfb”。我们在后续步骤中需要它。
我们将使用创建块工具，它是用于搭建 WordPress 插件以注册块的官方工具。该工具将创建我们需要的块所需的文件和文件夹结构。一旦我们有了初始文件和文件夹，我们就可以对其进行扩展，以从中创建我们需要的所需功能。
打开任何命令提示符，导航到 plugins 文件夹，然后在命令提示符下运行它。
npx @wordpress/create-block my-practice-block
当系统提示您进行确认时，按 y，安装应开始。
安装完成后，您应该会看到这样的屏幕。
现在，您的插件文件夹中有一个名为“my-practice-block”的新文件夹。您可以使用首选的 IDE 打开该文件夹。我正在使用 Visual Studio Code 打开它。大多数 IDE 都会为您提供直接在 IDE 中运行命令的选项，这非常方便。命令提示符已经指向项目文件夹。因此，无需手动切换到项目文件夹。
如果继续使用上面的命令提示符，则可以通过运行此命令直接切换到项目。
cd my-practice-block
并通过运行此命令启动开发环境。
npm start
在 Visual Studio 中，在集成终端中运行命令，如下所示：
如果命令成功运行且没有错误，您将看到如下所示的屏幕：
现在，程序正在监视您对代码所做的任何更改。您所做的任何更改都会立即编译，并且“build”文件夹中的文件也会相应地更新。
现在让我们看一下我们块的文件和文件夹结构。因此，我们可以进行一些重要的修改。
文件“block.json”包含与我们的区块相关的所有元数据。我们应该打开文件并将命名空间从“create-block”更改为我们之前决定的命名空间，即“rcmfb”。您可以自由使用自己的独特名称。
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "create-block/my-practice-block",
"version": "0.1.0",
"title": "My Practice Block",
"category": "widgets",
"icon": "smiley",
"description": "Example static block scaffolded with Create Block tool.",
"supports": {
"html": false
},
"textdomain": "my-practice-block",
"editorScript": "file:./index.js",
"editorStyle": "file:./index.css",
"style": "file:./style-index.css"
}
因此，name 属性将更改如下：
"name": "rcmfb/my-practice-block",
我们这样做是为了避免与您之前以这种方式创建的任何其他插件发生任何冲突。
激活插件并将其添加到页面
现在登录到您的 WordPress 仪表板，导航到插件页面并激活我们的新插件。
现在，我们的新块应该在每个页面和帖子上都可用，如下面的屏幕截图所示：
保存带有块的页面后，编辑器页面将显示如下：
站点的前端将显示如下消息：
插件准备立即定制
该插件现在已准备好以您认为合适的方式进行利用。你现在可以用它做任何事情。我不会详细解释每个文件以及所有文件是如何连接在一起的。也许这是另一篇文章的主题。
但是，如果您有任何问题，我很乐意为您解答:)