古騰堡開發示例：谷歌地圖（第 1 部分）

已發表: 2019-04-04

幾天前，我們在 WordPress.org 插件目錄中發布了一個新插件：Nelio Maps。 顧名思義，它是一個地圖插件，在 WordPress 編輯器中添加了一種新類型的塊。 有了它，我們可以輕鬆地在我們的頁面或帖子上添加谷歌地圖。 這是它的外觀：

Nelio 地圖截圖
Nelio Maps 插件允許您在頁面和帖子中插入和自定義 Google 地圖。

Nelio Maps 是我們第一個完全為 Gutenberg 設計的插件。 儘管是一個相對簡單的插件，但它是一個非常有用的產品。 一方面，因為任何想要將地圖添加到其網站的用戶現在都可以通過安裝一個簡單且輕量級的插件來實現。 另一方面，因為任何想要在 Gutenberg 開發的開發人員現在都有一個如何“從頭開始”創建插件的真實示例，只需閱讀這篇文章即可。

我知道開發這樣的插件並不是世界上最簡單的事情，我將本教程分為三個不同的部分。 今天我將解釋如何“從頭開始”創建插件，以便我們最終得到我們將用來構建最終產品的骨架。 在第二篇文章中，我將解釋如何在 WordPress 塊編輯器中獲取交互式地圖，我們將看到我為製作插件而創建的所有組件。 最後，在第三篇也是最後一篇文章中，我們將看到如何將地圖保存在數據庫中以及如何在前端顯示它。

定義我們的項目和我們想要的插件

這似乎是老生常談，但在開始任何新項目之前，我們必須做的第一件事就是定義我們想要通過該項目實現的目標。 根據我們想要包含的功能，我們將有一組不同的要求。 因此，讓我們定義我們想要在本教程中實現什麼樣的地圖插件。

這些是項目的要求：

  1. 一個人應該能夠在他們的頁面或帖子中添加一張地圖（或多張地圖）。
  2. 應該可以通過
    • 要么用鼠標拖動地圖
    • 或在搜索框中查找位置。
  3. 地圖的大小應該是可調整的，寬度和高度都可以調整。
  4. 地圖應包括不同的樣式（黑白、自定義調色板等）
  5. 用戶應該能夠在地圖中添加標記。
  6. 如果有標記，則地圖必須附有一個文本框，其中包含有關該標記的附加信息。

雄心勃勃，對吧？ 好吧，讓我們開始吧！

如何“從頭開始”創建古騰堡插件

如果您關注我們的博客，您可能已經看到幾天前 Antonio 發布了一篇文章，解釋瞭如何使用我們在 Nelio 中創建的插件樣板來創建插件。 如果您還沒有閱讀他的帖子，我建議您先閱讀它，因為我們的插件將基於 Antonio 在那裡解釋的插件樣板wp-beb 。

要開始我們的項目，我們要做的第一件事是鏡像 Nelio 的樣板插件。 首先，在您的 GitHub 帳戶中創建一個新的存儲庫。 然後，按照 Github 幫助頁面中描述的步驟來鏡像我們的樣板：

 git clone --bare https://github.com/avillegasn/wp-beb.git cd wp-beb.git git push --mirror https://github.com/your-username/your-repo.git

一旦您的項目準備就緒，請按照README.md中的說明編譯項目，從而能夠在您的 WordPress 站點中看到它。

如何將插件樣板轉換為您的插件

正如插件樣板文檔中顯示的那樣，我們要做的第一件事是在源代碼中更改項目的名稱。 也就是說，您必須通過我們的插件名稱（在我的例子中為nelio-maps ）更改所有出現的wp-beb （大寫和小寫，帶有連字符或下劃線）。

為此，我們可以使用以下腳本：

請記住，您必須將字符串nelio 映射int 第 5、8、9 和 10 行替換為您的插件名稱。

另一方面，現在也是更改插件文檔的好時機。 一方面，您必須編輯文件README.md和readme.txt以反映新插件的用途（當然，不要忘記提及您使用我們的樣板作為基礎的事實）。 另一方面，您應該更改主 PHP 文件中的第一條註釋，因為它是 WordPress 用於在插件屏幕中顯示插件的數據。

您可以在 Nelio Maps 項目的第一次提交中看到我是如何進行所有這些更改的。

如何清理不必要的插件樣板

Nelio 的樣板插件默認包括幾個組件：(a) 一個演示塊和 (b) 一個 Gutenberg 插件。 由於我們只對創建一個塊（地圖）感興趣，我們將消除剩下的所有內容（古騰堡插件）。

這一步非常簡單，因為基本上它是基於從插件中“刪除”不必要的東西。 具體來說，我們應該：

  1. 刪除assets文件夾中顯示的所有內容（這是添加 Gutenberg 插件的位置、樣式和圖標）。
  2. 清理文件webpack.config.js ，因為有一些規則使用了我們剛剛刪除的assets中的文件。
  3. 清理插件的主文件，因為它將不再存在的樣式表和 JavaScript 文件排入隊列。

您可以看到此提交中的所有更改。 如果再次編譯代碼，您會看到Demo塊仍然存在，但出現在屏幕右上角的 Gutenberg 插件不存在。

概括

在今天的帖子中，我們已經了解瞭如何為 Gutenberg 創建插件。 首先，我們已經定義了我們想要創建的項目的類型，並且我們已經確定了它的需求。 接下來，我們看到了將 Nelio 的樣板插件適應新項目所需的步驟。 也就是說，我們已經看到瞭如何克隆 Nelio 的樣板項目並對其進行清理以滿足我們的特定需求。

下週見本教程的第二部分，我們將在其中修改Demo塊，以便它執行我們在本文開頭描述的所有功能。

Brett Zeck在Unsplash上的特色圖片。