古腾堡开发示例：谷歌地图（第 2 部分）

你好呀！ 我们带着在古腾堡开发的教程回来了。 上周我们开始了一个在 WordPress 中添加地图块的项目。 在第一篇文章中，我们定义了我们的插件必须满足的要求，我们准备了最终产品的骨架，从我们在 Nelio 创建的出色插件样板开始。

今天来介绍如何创建地图块的教程的第二部分。 在这篇文章中，我们将看到如何在 WordPress 编辑器中添加 Google Maps 地图，以及如何实现允许我们操纵其行为的用户界面。

快速浏览项目的当前状态……

在项目的当前状态下，我们在packages/blocks/demo/中定义了一个简单的Demo块。 这个小块是 Nelio 插件样板中的示例，如下所示：

显然，这不是我们想要的。 我们对后跟一些文本的心形图标不感兴趣，而是对这样的内容感兴趣：

也就是说，我们想要一个带有可选标记的Google Map块。 我们如何才能从我们的样板文件所具有的原始示例块转移到另一个更强大的块？ 好吧，这就是我们今天要回答的问题！

但在此之前，让我花几分钟时间解释一下我们现在拥有什么以及我们将如何前进。 我认为，如果您了解项目的当前状态，您将更轻松地了解接下来的内容。

了解演示块...

正如我已经说过的，演示块是在packages/blocks/demo/中定义的。 在此文件夹中，您将找到块的样式、图标和几个文件，其中包含实现其操作的代码。 让我们看看最重要的文件。

一方面，有主文件： index.js 。 此文件导出三个变量：块的名称 ( name )、块的定义 ( settings ) 和块支持的样式 ( styles )。 这三个变量在packages/blocks/index.js中用于在 Gutenberg 中注册块（使用registerBlockType ），从而使其可供最终用户使用。

然后，这个主文件作为理解我们正在创建的块的入口点。 在对象设置（ settings ）中，我们看到了三个重要的属性： attributes 、 edit和save 。 这些属性中的每一个都有自己的 JavaScript 文件（为了简单和易于理解），每个属性都以其对应的属性命名。 让我们快速浏览一下它们：

• attributes.js文件定义了我们块的所有动态属性，因此我们的用户应该可以对其进行调整。 在我们的Demo块的例子中，唯一存在的属性是用户写的文本，但是地图块会有更多的选项：地图中心的坐标，地图应该使用的默认缩放级别，什么按钮（如果有的话）应该是可见的，以便与地图等进行交互。
• 文件edit.js定义了块在 WordPress 编辑器中的显示方式以及向用户提供的设置（在工具栏和块设置的侧边栏中）。 在Demo中， edit只包含 WordPress 的RichText组件来编写内容。 正如我们将看到的，地图块将更加复杂，并且还将包含其他设置。
• 最后， save.js定义了将我们在 Gutenberg 中编辑的块转换为必须在前端呈现的 HTML 的方法。 同样，在Demo中，我们看到此函数只是使用RichText.Content保存RichText的内容，但它可以是其他任何内容（正如我们将在下周本教程的第三部分和最后一部分中看到的那样）。

基于插件样板中包含的演示块创建地图块

一旦我们确切地了解了Demo块的工作原理，就该问自己：我们如何创建我们的块？ 嗯，很简单：正如 Toni 几天前告诉我们的，我们只需将目录packages/blocks/demo/复制到packages/blocks/nelio-maps/并开始修改所有必要的内容。 我知道，说起来容易做起来难。

让我们从简单的东西开始： attributes.js 。 该文件包含我们的最终用户应修改的所有属性。 在上一篇文章中，我们指定了我们的插件应该满足哪些要求，因此，我们概述了哪些东西应该可以调整。 好吧，看看生成的attributes.js ，您会清楚地看到可以从我们的地图块中调整的内容：缩放级别、地图中心、不同按钮的可见性……超级简单的东西！

下一个要修改的点是与古腾堡块的版本有关的所有内容。 为此，我们必须深入edit.js 。 如果你仔细观察，你会发现它并不比我们原来的Demo块复杂多少。

最重要的是块的render方法（第 33 行），我们从名为this.props的对象中检索刚刚定义的属性。 当然，我们将使用此属性来渲染块及其设置。 这就是我们所拥有的：

1. 一个工具栏ToolbarControls （第 66 行），我们在名为toolbar.js的外部文件中定义了它（别担心，我们马上就会看到它的内容）。
2. 出现在编辑器侧边栏（第 68 行）中的块设置，我们可以在我们在inspector.js中定义的名为Inspector的组件中找到这些设置。
3. 块本身的内容，它有两种状态：
   • 如果我没有可用的 Google Maps API 密钥，我们会显示用户通知（第 122 行）。
   • 如果我们有这个键，我们使用MapBlock显示地图（第 83 行）。 该地图可能包括一个Marker （第 97 行），它仅在激活该选项时可见，并且还可能伴随一个div （第 104 行）以及有关它的其他信息。

谷歌地图作为 React 组件

如果我们想在我们的编辑器中放一张谷歌地图，我们必须使用一个允许我们使用谷歌地图的地图 API 的组件。 考虑到 Gutenberg 是建立在 React 之上的，合乎逻辑的事情是找出 Google Maps 是否有 React 组件。 而且，当然，有一个！

正如您在项目文档中所读到的，首先我们必须将组件添加到我们的项目中。 只需安装并添加运行以下命令的依赖项：

 npm install react-google-maps --save-dev

它在我们的package.json中添加了一个新条目，并将包下载到node_modules中。

如何创建封装 React 组件的 WordPress 组件

如果我们继续查看 Google Maps 的这个 React 项目的文档，我们会看到他们建议我们用我们自己的组件包装他们的GoogleMap组件。 一旦它被封装，我们将不得不在我们的插件中使用我们的组件。

好吧，让我们跟随他们的脚步，在自己的文件map-block.js中创建一个名为MapBlock的组件。 就是这样！ 我们现在已经准备好可以在 Gutenberg 块中使用的地图组件。

如何在 WordPress Editor's Inspector 中添加块设置

下一步是配置此地图在编辑器中的外观，并添加一些设置来调整其外观。 为此，我们必须在 Gutenberg 侧边栏中添加几个设置部分。 正如我已经介绍的那样，我们使用称为Inspector的组件来实现这一点，我们在文件inspector.js中定义了该组件。

如果你看一下这个文件，你会发现它和往常一样遵循相同的模式：我们正在定义一个带有render方法的Component 。 该方法拉取this.props中的相关属性并返回包含所有控件的 JSX。 在这种特殊情况下，它返回一个带有多个PanelBody部分的InspectorControls实例（这告诉 WordPress 该内容进入侧边栏）。 让我们详细看看每个部分。

基本地图设置

我们找到的第一个PanelBody （第 47 行）没有title ，因此始终显示为无法关闭的部分：

该部分定义了一对RangeControl ，您可以在前面的屏幕截图中看到其结果。 这两个控件允许我们修改地图的高度及其缩放级别。

另一个有趣且简单的部分是在第 121 行找到的部分。在这里，我们添加了一些选项来激活或停用在前端显示时应在地图上显示的按钮：

为此，我们只需使用默认的 WordPress 组件CheckboxControl 。

如何为我们的地图块添加自定义样式部分

我们代码块中另一个有趣的部分是样式部分（第 68 行）。 您可以在以下屏幕截图中看到最终结果：

这是一个特殊的部分，因为我们使用的组件（ MapStyles ）不是默认存在于 WordPress 中的东西，而是我们专门为这个块创建的东西。 正如您在上一个链接中看到的，它是一个在ImagePicker类型的组件中加载一组预定义样式的组件（顺便说一下，WordPress 中默认也不存在该组件 - 您可以在packages/components/image-picker/中找到它packages/components/image-picker/ ）。

当用户选择ImagePicker中包含的任何样式时， MapStyles组件会调用它提供的onChange函数（参见inspector.js的第 76 行）传递两个值：所选样式的名称和关联的 JSON。

最后，请注意MapStyles包含的选项之一是自定义样式：

选中后，组件会呈现一个额外的文本框（第 45 行），以便用户可以以 JSON 格式输入自己的样式。 如果你不知道，谷歌地图的地图可以定制很多！

如何在我们的地图中添加标记

我们的下一部分是控制我们的标记的部分（第 81 行）。 本部分允许我们显示或隐藏标记（第 86 行），并且在激活时为我们提供一些额外的设置：

如您所见，会出现一个搜索框来搜索 Google 地图中的位置（我们再次使用名为AddressSearch的自定义组件实现了该功能），并且能够显示或隐藏用于放置有关标记的附加信息的文本块。

顺便说一下，请注意AddressSearch组件基于一个名为StandaloneSearchBox的组件，它也是 React 项目的一部分。 重用别人的作品是多么幸福啊！

如何配置块的工具栏

我们要讨论的最后一件事是工具栏。 如果您了解侧边栏的工作原理，那么工具栏就是小菜一碟。

我们插件的工具栏由toolbar.js中定义的ToolbarControls组件表示。 在这里，我们只需添加一个组件来定义块的对齐方式（ BlockAlignmentToolbar ，第 42 行），一对下拉菜单以使地图居中（第 50 行）并修改标记的位置（第 79 行），以及几个额外的按钮来更改文本框的位置，我们可以在其中放置有关标记的其他信息（第 107 和 120 行）。

总之

今天我们看到了如何创建我们的地图块的整个编辑界面。 正如您所看到的，这是一个乍一看可能看起来很复杂的过程，但很快就会变得非常自然。 最后，秘诀是从一个组织良好的示例开始（就像我们的插件样板一样）并逐步构建界面，重用 WordPress 提供的或已经存在的组件，甚至创建自己的组件。

下周见本教程的最后一部分，我们将在其中看到如何保存我们的地图以及如何在前端查看它。

在Unsplash上由rawpixel提供的特色图片。