根據您對WordPress社區的插入方式，您可能已經或可能不熟悉即將推出的WordPress Gutenberg編輯器。古騰堡編輯激起了過道兩邊的各種討論。但這篇文章並沒有試圖權衡這場辯論……

相反，這篇文章認識到Gutenberg的必然性，旨在為您提供有關如何在您的網站上使用WordPress Gutenberg編輯器的全面資源，以便您可以在Gutenberg上市時繼續製作出令人敬畏的內容。

無論這是您第一次聽到WordPress Gutenberg編輯器還是您已經熟悉它，本文將幫助您了解如何使用新編輯器為您的WordPress內容構建佈局。

什麼是古騰堡？

簡而言之，Gutenberg是即將取代WordPress TinyMCE編輯器（當前所見即所得的文本編輯器，您可以在其中編寫帖子和頁面）。作為一個快速復習，這是WordPress TinyMCE編輯器的樣子：

以下是新WordPress Gutenberg編輯器中的內容：

不過，它不僅僅是一種美學更新。Gutenberg將通過轉向基於塊的內容方法來完全改變編輯體驗（更多的是關於什麼塊在一秒內！）。

雖然目前的重點是內容創建，但最終的目標是讓Gutenberg“ 超越帖子進入頁面模板，最終實現完整的網站定制。”

這意味著最終您將能夠使用Gutenberg構建整個網站，包括登錄頁面和其他重要內容。

古騰堡何時成為WordPress的一員？

在下一個主要版本 – WordPress 5.0之前，Gutenberg將不會正式成為WordPress核心的一部分。

目前，WordPress 5.0 暫定於  2018年11月19日舉行。話雖如此，該團隊已經為這些日期建立了一些靈活性。如果測試時間超過預期，可能會推遲到2018年11月27日。如果  仍然沒有足夠的時間，發布日期將進一步推遲到  2019年1月22日，以避免在假日期間發布。在此之前，您仍然可以通過插件安裝和使用WordPress Gutenberg編輯器。

由於Gutenberg在技術上仍處於測試階段，因此我們不建議您在現場網站上執行此操作。古滕貝格

作者：Gutenberg Team46％評分5,578,110下載4.9.8要求更多信息

gutenberg.4.6.1.zip

當前版本： 4.6.1

最後更新時間： 2018年11月30日46％評分5,578,110下載4.9.8要求WordPress.org插件頁面古滕貝格

WordPress古騰堡編輯如何運作

一秒鐘之前，我告訴過你Gutenberg是一個基於塊的編輯器。如果你像大多數人一樣，你可能不知道那意味著什麼，那麼讓你感到有點粗魯。

所以這裡是基於塊的編輯101：

從本質上講，Gutenberg用許多單獨的“塊”替換了當前WordPress TinyMCE編輯器的單個編輯字段。

這些塊允許您構建比當前WordPress編輯器中允許的設計更複雜的設計。

什麼是塊？

好吧，一個街區可以是幾乎任何東西。例如，您可以擁有以下塊：

• 常規文字
• 圖片
• 視頻嵌入
• 鈕扣
• 小部件（是的，您在側邊欄中使用的那些小部件）
• 表
• 等等。

而且很簡單，開發人員將能夠創建自己的第三方塊，您可以通過插件訪問這些塊以獲得更大的靈活性。

每個塊都是它自己的實體，您可以單獨操作。例如，這是一個包含三個塊的快速Gutenberg帖子：

• 2個文本塊
• 1個圖像塊

觀看我可以輕鬆地通過拖放來重新排列這些塊：

並且因為每個塊都是“獨立的”，所以您還可以為特定塊添加自定義背景等內容。

通常，它為您提供更大的靈活性和深入的控制。

那麼Gutenberg是一個頁面構建器，對吧？

呃，不太好。至少不是目前的形式。

Gutenberg將使定制內容（如博客文章或標準頁面）更加容易，但它不是當前形式的頁面構建器的1：1替代品。

從表面上看，古騰堡已經缺乏兩件必不可少的東西：

• 靈活的列，雖然有一個基本的列塊，一些第三方開發人員創建了interesteing塊。
• 真正的拖放 – 較新版本的Gutenberg允許您通過拖放重新排列塊，但它仍然不像大多數頁面構建器那樣是自由形式的。

話雖如此，Gutenberg準備消除對大多數“標準”內容的頁面構建器的需求，並且它還創建了一個統一的方法來在WordPress中創建更複雜的帖子佈局。

但是，當涉及到構建更複雜的頁面（如登錄頁面）時，您可能會欣賞頁面構建器提供的更大靈活性（至少在Gutenberg的初始版本中）。

例如，在我們對Elementor與Divi Builder與Beaver Builder之間的比較中，您可以看到首頁構建器如何提供以下內容：

• 自由格式拖放編輯
• 真正的多列支持，您可以在其中創建任意數量的列以將各個元素拖入
• 大量的預製模板
• 高級樣式選項，帶有自定義邊距/填充的斑點等等
• 響應式設計設置

古騰堡有一天可能會去那裡。但至少在其初始發布形式中，頁面構建器仍將為您提供設計更複雜的獨立頁面的靈活性。
轉到頂部

如何在您的網站上安裝Gutenberg

準備好看看古騰堡是如何運作的？

就像我說的，Gutenberg將取代WordPress 5.0中的默認WordPress編輯器。但就目前而言，你唯一的選擇就是安裝Gutenberg插件。

請記住，雖然 – 古騰堡仍處於測試階段，但我們絕對不建議您將其安裝在實時網站上。

以下是如何安裝Gutenberg插件……但是，這是一個相當標準的過程：

• 轉到插件→添加新
• 搜索“古騰堡”
• 單擊立即安裝
• 等待“ 立即安裝”按鈕更改為“ 激活”
• 單擊“ 激活”

激活插件後，當您轉到帖子→添加新內容時，您的網站將自動使用Gutenberg編輯器：

轉到頂部

使用Gutenberg主題可獲得最佳效果

雖然Gutenberg旨在使用任何WordPress主題（就像WordPress編輯器一樣），但選擇一個專門提供Gutenberg兼容性的主題將提供一些非常實際的好處。

首先，主題可以為Gutenberg塊提供內置樣式。更好的是，主題實際上可以在編輯器中加載這些樣式  。這意味著您可以在構建內容時看到塊的真實樣式，以獲得更好的WYSIWYG體驗（請參閱此處的基本版本）

Gutenberg主題還將能夠提供由各種塊組成的預製模板，以便您只需將內容插入現有塊並點擊  發布即可。

我們現在看到一些人開始發布Gutenberg準備好的主題。您可以使用的一些好選擇是：

• Hestia – 我們將Gutenberg的兼容性添加到我們流行的Hestia主題中。
• Ohana主題 – 您需要從Github安裝它
• 原子塊 – 可從Array免費獲得

轉到頂部

使用WordPress Gutenberg編輯器構建您的第一個佈局

好的 – 現在您已經安裝了Gutenberg，讓我們深入了解本文的內容。下面，我將向您展示如何實際使用新的WordPress Gutenberg編輯器來構建完整的頁面佈局。

這樣，當WordPress 5.0掉線時，你就可以開始運行了。

快速瀏覽Gutenberg界面

在開始添加一些塊之前，讓我們快速了解一下主Gutenberg接口的元素：

• （A）  – 允許您添加新塊。
• （B）  – 撤消/重做按鈕
• （C）  – 允許您訪問文檔設置，包括類別和標籤，特色圖像等。這類似於WordPress編輯器中的當前側邊欄
• （D）  – 當您選擇了單個塊時，可以訪問特定於該塊的設置
• （E）  – 允許您訪問帖子的實時預覽或發布/更新您的帖子
• （F）  – 一旦你添加了一些塊，這就是你實際使用帖子內容的地方

向Gutenberg添加塊

正如我在介紹中所討論的那樣，您將使用單獨的“塊”來構建Gutenberg的佈局。要添加新塊，您只需單擊+ Plus圖標並選擇要添加的內容類型：

在上面的示例中，我向您展示瞭如何添加基本段落塊。但古騰堡實際上包含了大量不同的塊，分為不同的部分：

在頂部，您會看到最常用塊的列表。但是如果向下滾動，您還會看到公共塊，格式，佈局元素，窗口小部件和嵌入的部分：

• 內聯元素  – 僅包含一個內嵌圖像塊。
• 公共塊 – 包含基本構建塊，如圖像，段落（常規文本），標題，引號等。
• 格式化 – 允許您添加更多格式化的內容，如拉引號，表格或經典的WordPress文本編輯器
• 佈局元素 – 允許您將文本拆分為兩列，包括按鈕，分隔符或“更多”標記
• 小部件 – 允許您添加短代碼，最新帖子或類別。甚至可以在Gutenberg中顯示側邊欄小部件。
• 嵌入 – 幫助您嵌入來自Twitter，YouTube，Facebook，Instagram等外部來源的內容。

使用Gutenberg構建基本佈局

讓我們開始吧。假設您只想構建一個基本的博文佈局，其中包括：

• 常規文字
• 一個圖像
• 一句話
• 嵌入的YouTube視頻

以下是您與Gutenberg合作的方式：

首先，您要在編輯器中編寫完整的帖子。或者，如果您喜歡我並且喜歡在Google Docs中書寫，則可以將其全部粘貼，然後Gutenberg會自動將其轉換為塊。

添加非文本塊

現在您的內容被拆分為塊，您可以將鼠標懸停在要插入第一張圖像的位置，然後單擊加號圖標。這將創造一個休息時間。然後，再次單擊加號圖標以插入圖像塊：

這將允許您插入一個圖像塊，您可以從該圖像塊以與當前WordPress編輯器類似的方式上傳或選擇圖像：

選擇圖像後，您應該在頁面佈局中看到它：

接下來，將鼠標懸停在要插入拉引號的位置，並使用相同的方法插入另一個塊。您可以搜索“quote”或轉到Common Blocks部分：

然後，你會看到你的新拉引號塊。要創建報價，您只需單擊該塊並鍵入：

要插入YouTube視頻，您可以從“ 嵌入”標籤中添加新的YouTube塊。要插入視頻，您只需輸入網址並點擊嵌入：

可選 – 創建不同的列

想要更有創意嗎？Gutenberg現在包含一個實驗性列功能，可讓您快速創建多個列。您需要做的就是從佈局元素部分添加列（Beta）塊。然後，您可以插入其他塊裡面：

完成後，您只需單擊“ 發布”按鈕：

並且您將在前端獲得格式化的博客文章。

如何自定義單個Gutenberg塊

因為WordPress Gutenberg編輯器包含大量不同的塊，所以我無法向您展示如何使用每個塊。

但我可以給你一個適用於所有塊的基本框架。基本上，您可以控制編輯器實際主體中的內容：

對於基本文本樣式和對齊，您可以使用將鼠標懸停在塊上時顯示的菜單欄：

對於更高級的樣式，您通常會在“ 塊設置”選項卡中設置塊的樣式。

要訪問該選項卡，請選擇要編輯的塊，然後瀏覽到“ 阻止”選項卡：

如何重新排列單個Gutenberg塊

要重新排列塊，您有兩種選擇。懸停在塊上時，可以使用向上或向下箭頭在相應方向上移動塊：

或者，您可以拖放塊。要激活拖放功能，您需要將鼠標懸停在向上和向下箭頭之間的六個點上

把它們放在一起

一旦你了解了Gutenberg的工作方式，它就會非常輕鬆和直觀。

起初，您可能會遇到一些成長的痛苦，並且難以執行您認為理所當然的基本行為。

但是，一旦你掌握了一切 – 你應該通過建築佈局巡航。使用Gutenberg提供的更高級的塊，您將比TinyMCE WordPress編輯器具有更大的靈活性。
轉到頂部

一些整潔但更先進的古騰堡技巧

隨著您越來越熟悉WordPress Gutenberg編輯器，您可能會發現其中一些技巧可以節省時間。

通過鍵入快速創建新塊

上面，我向您展示瞭如何使用插入按鈕創建塊。但是為了節省時間，您只需鍵入以下語法即可創建塊：

/BLOCK-NAME

將出現一個自動建議框，以幫助您找到相關的塊。

例如，以下是僅使用鍵盤創建圖像塊的方法：

非常方便，節省大量時間！

直接編輯源代碼

在任何時候，您都可以通過單擊右上角的三個點並選擇代碼編輯器來編輯整個帖子的源代碼：

激活全屏模式，固定工具欄等。

Gutenberg包含幾種不同的模式，可讓您更改編輯體驗。您可以：

• 添加一個固定的工具欄，如TinyMCE編輯器
• 全屏顯示
• 在活動塊上放置一個“聚光燈”

要使用這些“視圖”，請單擊右上角的  三個點圖標。

使用Gutenberg鍵盤快捷鍵可以節省時間

除了標準的格式化快捷方式，Gutenberg還提供了許多專用鍵盤快捷鍵，可以幫助您：

• 在所選塊的上方或下方插入新塊
• 刪除一個塊
• 複製一個塊
• 等等。

要打開鍵盤快捷鍵的完整列表，請使用  Shift + Alt + H快捷鍵。

創建可重用的塊模板

如果您需要在多個位置重複使用特定的塊集合/排列，則可以將一組塊保存為可重用模板。您將能夠為模板命名。然後，您可以像常規塊一樣插入它。

要創建模板：

• 選擇要包含的塊
• 單擊  三個點圖標
• 選擇  添加到可重用塊

用插件擴展Gutenberg

如果你想獲得幻想，你現在可以找到很多添加自己的塊的Gutenberg擴展插件。Stackable是一個很好的選擇，讓你入門，你可以在WordPress.org找到更多：

轉到頂部

您的所有舊內容會發生什麼變化？

在我完成任務之前，讓我快速介紹WordPress 5.0發布後所有舊內容會發生什麼。

別擔心 – 它不會消失！但經驗有點不同：

當您在具有使用原始TinyMCE編輯器構建的現有內容的站點上激活Gutenberg編輯器時，Gutenberg會將您的所有舊內容放入單個Classic塊中。這個Classic塊基本上是TinyMCE編輯器……但是嵌入了Gutenberg。

要使用舊內容，您可以：

• 將它保留在Classic塊中並像使用舊的WordPress編輯器一樣進行編輯
• 使用  三個點圖標，然後選擇  轉換為塊。這將把所有東西都分解成單獨的塊。然後，您可以使用您的內容，就像您最初使用Gutenberg創建它一樣。

轉到頂部

古騰堡是未來

雖然古騰堡有其批評者，但它仍然在WordPress 5.0中。

對於大多數臨時用戶而言，經過一些成長的努力，它將帶來更靈活的內容創作體驗。

非開發人員將能夠使用按鈕，內容嵌入等更多元素直觀地製作更複雜的佈局。希望這將有助於WordPress繼續發展。

在WordPress 5.0發布之前，您可以通過安裝插件來使用WordPress Gutenberg編輯器。如果您想要了解最新的Gutenberg更新，您可以在Make WordPress Core中使用#gutenberg標籤。

現在，我們很樂意聽取您的意見。我相信你們中許多人對古騰堡有很強烈的想法 – 所以請在評論中告訴我們！