開始使用 WordPress Gutenberg 所需的一切

2018 年，WordPress 旨在現代化和簡化 Gutenberg 的內容創建體驗。 它的名字來自印刷機的創始人約翰內斯·古騰堡。 這被認為是 WordPress 用戶體驗和主題開發工作流程的最大變化之一。

什麼是古騰堡？

我們大多數人都認為古騰堡只是一個新編輯，但不僅如此。 雖然編輯器現在是重點，但該項目最終將影響包括定制在內的整個發布體驗。

到目前為止，編輯頁面意味著調整其標題、正文和自定義字段。 有了古騰堡，這個邏輯完全改變了，它引入了塊的概念。 塊是通過 wp-admin 動態添加的獨立、隔離和動態的用戶界面組件。 我不會詳細說明這一點，因為下面的視頻會詳細解釋所有內容。

Matt Mullenweg Gutenberg 關於 2017 年世界現狀的演講

Gutenberg 已經作為插件提供，並將集成到計劃於 2018 年 4 月推出的 WordPress 5.0 中。其背後的團隊目前專注於後期編輯體驗。 但從那時起，它將擴展他們的方法，包括模板創建、站點創建等。 為了使向 Gutenberg 的過渡更加順暢，有一個名為 Classic Editor 的插件，它允許團隊在進行遷移時使用當前的編輯器。

為什麼古騰堡對我有好處，這對 WordPress 的未來意味著什麼？

Gutenberg 無疑是一個重大變化，許多開發人員將不得不適應它。 但是，在我看來，這是 WordPress 經歷過的最好的變化之一。 因為它使主題開發過程現代化，並通過更簡潔的代碼庫、更好的維護和編輯使其更加模塊化。 它提供了更高的可靠性，並且擺脫了舊的單片可破解方法。

通過使用塊，它優化並簡化了我們構建頁面的所有方式（短代碼、小部件、自定義 HTML、媒體、文本格式、嵌入和元框）。 正如馬特在他的帖子中解釋的那樣：

• 開發人員和代理商將能夠創建交互式模板，客戶可以輕鬆更新這些模板，而無需破壞或處理自定義帖子類型。
• 插件開發人員將能夠完全集成到 WordPress 的每個部分。 包括帖子、頁面、自定義帖子類型和側邊欄，而無需破解 TinyMCE 或將其整個功能壓縮在工具欄按鈕後面。
• 主題開發人員不需要捆綁大量插件或創建自己的頁面構建器。 將有一種標準的、可移植的方式來為帖子創建豐富的佈局，並在界面中引導人們完成設置。 不需要 20 步教程或長視頻。
• 核心開發人員將能夠使用現代技術工作，而不必擔心 15 年的向後兼容性。
• 用戶最終將能夠創建他們用想像力構建的網站。 他們將能夠在移動設備上做他們以前從未做過的事情。 他們再也不用看到簡碼了。 從 Word 粘貼的文本將被清理並立即自動轉換為塊。

演示和示例

在 WordCamp US 2017 的這次演講中，Morten 解釋了 WordPress 開發人員需要關注的內容以及 WordPress 將如何與 Gutenberg 一起轉型。

Morten Rand-Hendriksen：古騰堡和明天的 WordPress

在這個截屏視頻中，Human Made 演示了 Gutenberg 塊的一系列高級實現。

如何開始

玩 Frontenberg ，這是 Gutenberg 編輯器的有限前端現場演示，它將幫助您熟悉 Gutenberg 編輯環境。

Frontenberg - 用於即時測試的登出古騰堡遊樂場

閱讀以下來自Gutenberg 背後的首席工程師之一Matias Ventura Bausero 的文章。

古騰堡，或忒修斯之船——一個系統如何在不發生劇烈變化的情況下從根本上發展？

玩轉這些 Sketch 符號並嘗試設計您自己的自定義塊。

Automattic/gutenberg-themes-sketch – gutenberg-themes-sketch – 一組幫助您設計塊驅動的 WordPress 主題的 Sketch 文件

閱讀wordpress.org 上的官方開發人員手冊。 它乾淨，易於閱讀，並且不斷發展。 您還應該訂閱他們的郵件列表以接收他們的更新。

簡介——“古騰堡”是 2017 年 WordPress 編輯器焦點的代號。

深入研究 ReactJS，因為 Gutenberg 是建立在它之上的。

React – 用於構建用戶界面的 JavaScript 庫 – 用於構建用戶界面的 JavaScript 庫

查看這些由 WordPress 核心團隊構建的Gutenberg 示例。

WordPress/gutenberg-examples = gutenberg-examples – 使用塊擴展 WordPress/Gutenberg 的示例

閱讀Human Made（最好的 WP 開發機構之一）的這本詳細的電子書。

Gutenberg，新的 WordPress 編輯器（白皮書）——這份白皮書涵蓋了實施和採用方面的主要挑戰，以及關於企業現在如何行動的建議。

查看 Zac Gordon 的開發課程，他是一些最受歡迎的教育平台 FrontendMasters、Treehouse 和 Udemy 的教育家。

Zac Gordon 的古騰堡發展課程 – Gutenberg Courses

最後，安裝這個零配置開發工具包，用於構建 Ahmad Awais 的 WordPress Gutenberg 塊插件

ahmadawais/create-guten-block – 用於構建 WordPress Gutenberg 塊的零配置 #0CJS 開發人員工具包。

到此為止，非常感謝您閱讀這篇文章，如果您有任何想法、問題或建議，請發表評論。

如果您是希望提升網站性能、安全性和託管體驗的代理機構、企業或 WordPress 開發人員，請與我們的工程團隊聯繫。 我們託管的 WordPress 託管平台被認為是業內最好的平台之一，具有無與倫比的性能、可靠性和技術客戶支持。

我們團隊的使命是重新定義 WordPress 開發人員構建、託管和擴展其網站的方式，因此請保持聯繫並隨時與我們交談。