如何使用 Node.js 在 Gutenberg 之外使用 WordPress 块

WordPress 块编辑器正在改变与我们如何使用该平台创建内容相关的一切。 WordPress的新版本带来了许多关于块的新奇事物，未来还有很长的路要走。

出于这个原因，使用 WordPress 作为开发平台的开发人员应该对使用块感到越来越舒服。 然而，从 PHP 到基于 JavaScript 的技术的飞跃可能很困难。

无论如何，你必须更新你的技能，不要害怕新的 WordPress 开发堆栈。 我们越早适应它，我们就越有机会进行创新。

今天我们将了解如何在无需进入 WordPress 编辑器的情况下使用 Gutenberg 块。 为什么？ 有几个原因…

第一个也是最明显的是因为我们可以。 一段时间以来，Gutenberg 编辑器中的核心块定义已作为单独的代码包提供。 这意味着借助 NPM 包管理器，我们可以在 WordPress 之外使用它们。

此外，还有一整套功能来管理和使用它们。 它们也包含在自己的包装中。 因此，如果我们想使用标准的 WordPress 块，我们只需要将这两个包作为依赖项导入到我们的项目中。

为此，我们必须为我们的项目创建一个文件夹，运行npm init以使用项目数据创建一个package.json文件，然后运行以下命令来安装这两个依赖项：

 npm install @wordpress/block-library @wordpress/blocks

下一步是使用我们要执行的代码创建一个index.js文件。 这段代码是用 Node.js 编写的，Node.js 是在服务器上运行的 JavaScript 的一种变体。 对于今天的例子， index.js的内容可以如下：

 const { registerCoreBlocks } = require( '@wordpress/block-library' ); const { createBlock, serialize } = require( '@wordpress/blocks' ); registerCoreBlocks(); const myBlock = createBlock( 'core/paragraph', { content: 'This is a block created programmatically', } ); const serializedBlock = serialize( myBlock ); console.log( serializedBlock );

前面代码中出现的前两个语句是导入依赖项的require语句。 正如我之前所说，我们要导入标准的 WordPress 块定义。 我们使用require('@wordpress/block-library')做到这一点。 因为我们只想从这个包中导入registerCoreBlocks函数，所以在等号的左边我们解构了这个函数。

以同样的方式，我们将@wordpress/blocks包作为依赖项导入。 这个包是具有处理块的功能的包。 包中定义了很多函数（你有它们在这里），但对于这个例子，我们只希望createBlock创建新块并serialize以将它们转换为我们可以保存在 WordPress 帖子内容中的字符串。

现在我们已经导入了依赖项，我们调用registerCoreBlocks函数，它加载标准 WordPress 块类型的定义，以便我们可以使用它们。 从那时起，我们可以创建块，正如您在调用createBlock函数时所看到的那样，将我们要创建的块类型的名称和具有其属性的对象作为参数传递。

在前面的示例中，我们将创建一个段落块，因此我们传递名称'core/paragraph'并在属性对象中传递要创建的段落内容作为content键中的字符串。

最后，我们调用serialize函数，将我们刚刚创建的块传递给它。 结果，我们将得到一个可以使用console.log函数输出的字符串。

现在我们可以在终端中输入node index.js来运行上面的代码。 如果我们这样做，会发生以下情况：

执行中有错误！ 原因是我们需要有可用的window变量，它没有被定义。 但是这个变量是什么，我们为什么需要它？

Window 是浏览器定义并表示浏览器窗口本身的 JavaScript 对象。 由于我们在终端中执行代码（或者如果它在生产环境中运行，在服务器上），我们没有带有所述变量的浏览器。 这是否意味着我们不能在浏览器之外使用 WordPress 块？ 当然不是！

Node.js 有几个包允许我们模拟我们在浏览器环境中运行我们的代码。 在这种情况下，我们将使用 browser-env 包。 我们只需要像之前使用 WordPress 软件包一样安装它：

 npm install browser-env

在我们的index.js文件中，我们必须添加一个新的require来导入browser-env依赖项。 而且，我们必须“修复” window对象，因为它没有提供所需的matchMedia方法。 如果复制下面的代码，添加到index.js文件的开头，问题就解决了：

 // Setup environment to simulate a browser // (mandatory to register Gutenberg blocks). require( 'browser-env' )(); window.matchMedia = window.matchMedia || function () { return { matches: false, addListener: function () {}, removeListener: function () {}, }; };

现在你可以再次运行代码，你会看到它没有失败，并且它返回了我们刚刚使用createBlock函数创建的段落块的文本表示：

 $ node index.js <!-- wp:paragraph --> <p>This is a block created programmatically</p> <!-- /wp:paragraph -->

您拥有此 GitHub 存储库中的所有代码。 从编辑器外部处理块的可能性是巨大的。 您可以创建块、克隆它们、将它们转换为不同类型的块等等。

能够在 WordPress 编辑器之外使用块允许我们操作 WordPress 的内容并在任何地方使用它们。 这为我们刚刚开始探索的开发人员打开了一个充满无限可能的世界。

我们 Nelio 已经在利用这些可能性。 我们将很快推出一项新服务，希望您会觉得它非常有趣。 请继续关注我们将在未来几周发布的消息吗？

Kelly Sikkema 在 Unsplash 上的特色图片。