古騰堡開發示例：谷歌地圖（第 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提供的特色圖片。