掌握 WordPress 古騰堡背後技術的資源

開發人員必鬚麵對 WordPress 的最大挑戰之一是回收我們的知識以適應新塊編輯器背後的新編程範式。 Gutenberg 的主要變化是使用了新的技術堆棧。 通常，WordPress 開發人員主要使用 PHP 創建插件，少數部分是用 JavaScript 編寫的。 現在關鍵工具是 JavaScript，而 PHP 只是創建插件和主題結構的基礎。

您可能認為情況並非如此，PHP 在 WordPress 中還有很長的路要走。 我不怪你，因為變化總是難以接受。 然而，我認為你錯了。 JavaScript 不再是 WordPress 的未來，而是現在。 如果你想保持你的位置，你現在就需要跟上它的速度。

幸運的是，儘管他們一直堅持我們必須深入學習 JavaScript，但我認為並非如此。 了解任何教程可以教給您的一些最低要求就足夠了。 借助我將在本文中描述的資源，您可以快速了解開始為 Gutenberg 開發所需的所有其他內容。

學習 JavaScript

當你學習一門新的編程語言時，你需要知道的第一件事就是理解它的語法。 只有這樣，您才能開始使用它進行編程。 完成此操作後，您就可以開始創建一切了。

如果您以前從未使用過 JavaScript，以下是一些不同格式的教程，可以幫助您入門：

• JavaScript 語言基礎：Zac Gordon 的免費視頻課程。
• JavaScript 30：在這個免費課程中與 Wes Bos 一起在 30 天內每天通過挑戰來學習。
• A re-introduction to JavaScript：Mozilla 的人對 JavaScript 的簡要介紹。
• JavaScript For Cats：對 JavaScript 的另一個介紹，帶有一些貓幽默。
• Exercism.io：免費網絡，您可以在其中使用 JavaScript 進行練習並上傳您的解決方案供導師評估。
• JSBooks：如果您是喜歡看書學習的人之一，這裡有很多免費的。

相反，如果你已經有一些使用 JavaScript 的經驗，可以通過學習有關函數的高級概念、使用 promises 和 async/await 的異步執行以及簡而言之與 ESNext 相關的所有內容來擴展你的知識。

一天的 JavaScript 培訓應該足以獲得基本知識，以便輕鬆掌握與在 WordPress 塊編輯器之上開發相關的所有內容。

學習 React 和 Redux

除了 JavaScript，要在 WordPress 塊編輯器上進行開發，您還需要具備一定的 React 和 Redux 概念。

這是每個人都會告訴你的，但事實並非如此。 您可以為 Gutenberg 進行開發，而無需任何 React 或 Redux 概念。 當然，如果你知道它們的工作原理和用途，那就更好了。

React，最重要的是 JSX

您無法避免的是了解 JSX 語法如何在 React 中創建元素，我們將使用它來定義組件的接口（無論它們是 Gutenberg 塊還是編輯器中的視圖）。

想像一下，您想為Product和ShoppingList組件定義接口，然後在 Gutenberg 塊中使用它們。 使用標準符號，您可以使用 Gutenberg 提供的wp.element.createElement()函數以下列方式執行此操作：

另一方面，如果你在render()方法中使用 JSX，它只不過是一種類似於 HTML 的符號，你將擁有以下內容：

使用 JSX 簡化了組件的編寫和重用，因為代碼更加簡單易讀。 如您所見，在前面的示例中，我們在沒有任何 React 概念的情況下創建 React 組件，只知道如何處理 JSX 並像使用具有超能力的 HTML 一樣使用它。 此外，您還可以使用 Gutenberg 中的現有組件。 您可以在此查看器中查看它們，該查看器也鏈接到官方文檔。

只有一個問題。 您需要使用 Babel 轉譯代碼，以便 JSX 符號最終轉換為任何瀏覽器都可以解釋的常規代碼。 但是，這不是戲劇，因為您可以使用 WebPack 自動完成。

Redux 維護您的應用程序的狀態

另一方面，您可能聽說過 Redux。 它是一個保存和管理 JavaScript 應用程序狀態的工具。 同樣，如果您有興趣學習如何使用它，我推薦這些 Wes Bos 視頻，但這也不是必需的。

如果你需要創建自己的數據存儲，你不會用 Redux 來做，但你會使用 Gutenberg 中包含的 @wordpress/data 包。 這個包在內部使用 Redux，但這並不重要。 此外，我們正在討論一個您可能不需要的複雜用例，至少在初始階段是這樣。 所以暫時忘記它。

NPM、WebPack、Babel、PostCSS 和 ESLint

除了 JavaScript 和 React 和 JSX 的基本概念之外，對於 WordPress 已經存在的新時代，您將需要了解以下技術，以便您的開發人員任務更加簡單和高度自動化：

• NPM：JavaScript 的依賴管理器。 只需定義您需要的依賴項並通過執行npm install來安裝它們。
• WebPack：JavaScript 捆綁器。 剛開始配置並不容易，但是一旦有了它，它就方便了管理 JavaScript 文件的工作：轉譯、縮小……
• Babel：JavaScript 編譯器，現在能夠使用該語言的下一個版本的語法。
• PostCSS：與 Babel 相同，但用於您的 CSS 樣式表。
• ESLint：檢測 JavaScript 使用和样式錯誤，以便您在編寫代碼時避免它們。

我已經在這裡討論了大部分這些技術。 但是，我很快會寫另一篇文章，我將解釋如何將它們集成到 WordPress 開發項目中，以便您可以在實際案例中使用它們。

如何為古騰堡創建新塊

現在，讓我們開始最重要的部分：開始為 WordPress 編輯器創建新塊需要什麼。

開始創建自己的塊所需的第一件事是掌握函數wp.blocks.registerBlockType() 。 您將在 Gutenberg 官方指南中找到有關此功能的最完整文檔。

這個函數的參數是一個帶有塊名稱的字符串，它必須是唯一的，以及一個帶有塊配置的對象，其中最重要的部分是塊的save和edit功能。 我已經在本文中向您簡要解釋了這一點。

如果這看起來太複雜，您可以開始使用名為create-guten-block Ahmad Awais 工具包。 這將創建一個文件夾結構，其中包含創建第一個塊所需的所有依賴項。 您可以在以下視頻中看到有關其使用的教程：

最後，如果這看起來仍然太複雜，您還有最後一個選項可用。 你肯定知道插件 Advanced Custom Fields（簡稱 ACF）。 好吧，這個插件將允許您在不了解 JavaScript 的情況下為 Gutenberg 創建塊。

但我不會向你解釋，我會讓 Mauricio Gelves 來做。 去看看他在 WordCamp Zaragoza 2019 中關於這個主題的演講，你已經在 WordPress.tv 上（西班牙語）：

如何在 WordPress 中擴展塊編輯器

除了創建新塊之外，您還可以使用 Gutenberg 做許多其他事情。 例如，您可以在 Gutenberg 中創建一個插件，以便在編輯器的右側添加一個選項面板，其中包含您想要的所有內容。 最好的一點是官方 WordPress 文檔包含這個完整的教程，其中包含您可以在其中做什麼的具體示例。

除此之外，您可以通過向現有塊添加新樣式、向塊添加更多自定義設置、刪除塊或隱藏它們或過濾您可以在編輯器中擁有的塊類別來擴展 WordPress 編輯器。

我建議您查看您可以在此處找到的針對開發人員和設計人員的古騰堡手冊中的官方文檔。 放輕鬆，因為有很多信息，這是您可用的最佳資源之一。

克里斯蒂安·弗雷格南 ( Christian Fregnan ) 在Unsplash中的特色圖片。