古騰堡開發示例：谷歌地圖（第 3 部分）
已發表: 2019-04-18歡迎來到關於如何為古騰堡創建地圖插件的第三篇也是最後一篇文章。 我們的上一篇文章非常密集，我們看到了很多不同的東西：我們的塊具有的屬性，如何使用 React 組件插入地圖，如何使用 WordPress 組件甚至創建我們自己的組件來定義用戶界面等。今天我們將討論一些更簡單的東西。
在這篇文章中，我們將看到如何在前端渲染 Google Maps 地圖。 為此，我們將仔細研究save.js ，並對插件進行一些更改，以使一切按預期工作。 我還將使用最後一篇文章來評論迄今為止可能不清楚的任何觀點。
如何保存我們的地圖塊以在前端顯示它
要在前端顯示地圖，我們首先必須定義要在前端呈現的 HTML。 在 Gutenberg 塊中，這是通過定義registerBlockType函數的save方法來實現的。 正如我在上一篇文章中已經提到的，這個方法是在packages/blocks/nelio-maps/文件save.js中定義的。
同樣，這是一個非常容易理解的函數：
- 從第 7 行到第 25 行，我們提取了與我們的塊相關的所有屬性。 也就是說，我們在
attributes.js中定義的所有屬性都會調整地圖的外觀。 - 在第 41 行，我們打開將用作塊容器的
div。 - 在第 47 行，我們找到了一個
div，它將包裹地圖本身。 看看一些非常有趣的東西：這個div在它的定義中包含了所有的attributes對象。 這意味著屬性中的所有attributes（例如，第 34 行'data-lat': lat）將呈現為 HTML 屬性（例如，假設變量lat為2.48171 ，lat將作為data-lat="2.48171"出現在最終的 HTMLdata-lat="2.48171"）。 - 在第 49 行，添加了一個包含標記坐標的小
div。 - 在第 59 行，我們在
edit.js中定義的RichText的內容。
因此，本質上，方法save會生成一個 HTML，其中包含與在前端渲染地圖相關的所有屬性。 那麼，會出現什麼問題呢？ 好吧，如果你現在打開前端，你看到的將是：
一個只有一些RichText內容的空塊。 發生了什麼？
如何修改插件以呈現使用我們的 Gutenberg 塊創建的 Google 地圖
要在前端顯示谷歌地圖，我們需要加載谷歌地圖庫和一個使用它來構建地圖本身的腳本。 這非常簡單，如果你曾經為 WordPress 開發過，你應該知道如何去做。
我們應該做的第一件事是創建一個腳本，該腳本可以使用我們放入 HTML 中的數據構建一個 Google 地圖。 該腳本位於assets/src/js/public/public.js中。 仔細看看以了解它是如何工作的：
- 在第 9 行中，我們搜索包含地圖的所有節點（通過我們包含在
save方法中的類之一進行過濾），並且對於每個節點，我們調用initGoogleMap方法。 - 這種方法依賴於兩個函數來完成它的工作。 一方面，它使用第 55 行的函數
extractMarkerPositionIfAny提取可能標記的坐標，另一方面，它使用從第 26 行開始的函數extractMapOptions。請注意，這兩個函數都只是專門用於讀取屬性data-something我們已將其放入save方法中。 - 最後，我們分別使用 Google 地圖庫提供的
Map和Marker類創建了一個地圖（第 18 行）並添加了一個標記（第 21 行）。
現在我們有了這個腳本，我們只需要在我們的項目中進行兩個額外的調整：
- 一方面，我們必須修改webpack配置文件
webpack.config.js以便它轉譯我們剛剛創建的public.js腳本。 這聽起來可能很困難，但實際上很容易：只需查看我在此提交中對該文件所做的更改即可。 - 另一方面，我們必須修改插件以將這個新腳本（和谷歌地圖庫！）排入前端。 同樣，您可以在此提交中看到一個非常簡單的更改。
完成所有這些更改後，這是最終結果：
我知道你在想什麼：為什麼我們不使用我們在edit.js中使用的 React 組件，而不是手動完成所有這些工作？ 這不會節省一些時間嗎？
事實上，使用我們在上一篇文章中看到的 React 組件會為我們省去一些麻煩……但有一個問題：它依賴於 React，這意味著我們也必須在前端加載 React 才能使用。 這似乎太多了，你不覺得嗎？
待定詳情
最後，讓我簡要討論一個非常重要的方面，否則您的插件將無法正常工作：Google Maps API Key。
谷歌地圖 API 密鑰
要使用 Google 地圖，您需要擁有 API 密鑰。 如何獲得它是安東尼奧幾天前向我們解釋的。 現在，我們如何使用它？
一種選擇是在插件中硬編碼我們的 API 密鑰。 如果您是唯一將使用該插件的人，那就可以了。 但是，如果您打算將插件分發給真正的用戶，這是一個非常糟糕的主意，因為並非所有 Google 服務都是免費的——有些是付費的，而且如果每個人都使用您的密鑰，費用可能會非常昂貴。
在這些情況下該怎麼辦？ 這個想法很簡單：只需在插件中添加一個配置選項，供人們輸入自己的 API 密鑰。
在我們的例子中，如果您添加沒有 API 密鑰的地圖，您將看到以下警告消息：
敦促您添加 API 密鑰。
通常，您會創建一個特殊頁面來管理插件的設置。 但是對於像我們正在創建的插件一樣簡單和簡單的插件，我認為如果我們選擇不同的解決方案會更容易。
在 WordPress 中， /wp-admin/options.php中有一個選項屏幕，如下所示：
這是一種“不錯的界面”，可以編輯（幾乎）所有已在 WordPress 中註冊並位於表wp_options中的選項。 因此，我們的插件所要做的就是確保該選項始終存在於數據庫中（即使還沒有設置 API 密鑰），並且我們將為用戶提供一個“漂亮的界面”來粘貼他們的 API 密鑰，而無需我們做任何事情！
為此，請使用init鉤子（參見本次提交的第 73 行）和一個始終為您的 key 選項設置值的函數（第 134 行）。 如果該選項尚不存在，此函數會將其值設置為默認值（空字符串）並保存該選項。 如果它已經存在，則新值將與我們已有的相同，因此更新函數不會做任何事情。 一個聰明而有效的黑客！
總之
在這篇文章中，我們克服了項目中的最後一個障礙：如何保存地圖以及如何在前端顯示它。 基本上，我們只需要一個包含地圖所有相關信息的div （它的中心、用於顯示按鈕的選項、標記等）和一個在前端重建它的小腳本。
我希望本教程能讓你滿意，並作為一個例子來承擔你自己的項目。 如您所見，如果您開始一個具有良好基礎的新項目，例如我們在 Nelio 中使用 Gutenberg 開發樣板創建的項目，那麼將您的想法具體化到實際項目中會容易得多。
如果您有任何問題，請在下面的評論部分告訴我們。 祝你好運！
Artem Bali在Unsplash上的特色圖片。