古騰堡編輯器 (Gutenberg)是 WordPress 5.0 版本後開始推出的新型態內容編輯介面,因為與舊版的差異非常大,對於早期的使用者可能會不習慣,甚至安裝外掛將後台編輯器改回傳統編輯器。事實上如果你曾經使用過一些WordPress的內容編輯器(WordPress Page Builder Plugins),那麼你對於古騰堡的設計概念應該會有一定的了解。

區塊的編輯概念

古騰堡編輯器是以區塊 (實際上Wordpress是以標籤 p 來作區塊分隔) 為概念來作為組成網頁的基本要素,其原理和其他的內容編輯器相仿,都企圖讓網頁的編排能夠視覺化,而不需依靠其他外掛的輔助。下圖是古騰堡編輯器介面的初步介紹。

古騰堡編輯器介面介紹
古騰堡編輯器介面介紹

我們以一個網頁來說明編輯器的設計概念。

古騰堡編輯器的區塊概念
古騰堡編輯器的區塊概念

WordPress編輯器提供了:內嵌元素、一般區塊、格式設定、版面配置元素、小工具、嵌入內容這幾種基本項目可以放進區塊中。

古騰堡編輯器可以在內容新增不同格式的區塊
古騰堡編輯器可以在內容新增不同格式的區塊

例如我可以在區塊中放入小工具裡的最新文章或其他內容,而這些項目還可以隨著安裝的外掛不斷增加。這樣的設計與目前流行的內容編輯器概念幾乎是相同的,差別在於古騰堡編輯器產生的內容是單純的html格式,對於seo不會有很大的影響。而每個區塊之間,可以透過滑鼠進行前後的順序拖曳,對於編輯相當方便。

從古騰堡編輯器這個特性,就可以看出WordPress的企圖心,除了自家擁簇者開發的許多內容編輯器,坊間以Wix這種拖曳式設計網站的方便特點,標榜一般人也可以輕鬆製作出精美網站的口號,在市場上也逐漸占據利基。

可以想見,隨著古騰堡逐漸穩定,並且擴充其功能後,WordPress.org所提供的免費帳號,對想要省錢的架站者,更有其吸引力。重要的是,WordPress提供了隨時搬家的方便性、在編輯器所產生的代碼的乾淨程度、數量龐大的外掛與主題開發者,都將成為無倫比的競爭力。

古騰堡編輯器加上了千呼萬喚的表格功能

傳統編輯器最讓使用者詬病的其中一個功能就是「表格設計」,完全像是殘廢一樣,如果大家要使用表格功能一般都是外連到表格頁面或使用外掛來達成目標。古騰堡編輯器在表格的支援上雖然還是很簡單,卻有著非常大的改進,對於簡單表格來說非常堪用。

古騰堡編輯器提供了表格編輯功能
古騰堡編輯器提供了表格編輯功能
表格有許多基本設定的功能細項可以調整
表格有許多基本設定的功能細項可以調整

古騰堡編輯器的複製功能

重複使用的區塊是古騰堡編輯器非常重要的一個功能,可以把一些常用的模組儲存起來,需要用的時候再一直複製使用即可。

模組能被複製到許多頁面或文章上使用,修改時,只需要更改模組,使用到該模組的文章都會被統一修改,算是非常節省時間的新功能。

重複複製區塊的功能,可以複製相同設定的格式,只要再修改內容即可。
重複複製區塊的功能

所見即所得(WYSIWYG)編輯

古騰堡編輯器的核心是在WordPress中創建內容的方式所代表的巨大變化。古騰堡編輯器介紹了一個完整的所見即所得(WYSIWYG)界面,該界面可確保您可以直觀看到儲存發佈後的頁面樣式。

如果你在編輯器中進行了更改,那麼你所看到的內容就會更接近網站前端的內容。這改變了過去你不得不經常在「保存和預覽」之間切換介面。古騰堡的運作讓你可以始終保持編輯器的無干擾環境,在執行效能的感受上,也比其他內容編輯器相對快速。

部分內容編輯器,在編輯時,需要啟動特製的操作介面,Elementor、WPBakery Page Builder等,因此在管理網站時,需要經常切換,非常不方便。

Elementor編輯器介面
Elementor編輯器介面

動態選項

古騰堡編輯器只顯示與你當前正在編輯的特定塊相關的選項,而不是如同過去的靜態工具欄,在主編輯器周圍散佈眾多設置。

例如,如果您正在編輯文本段落,則只會看到格式選項以及與該塊相關的其他設置。

類似左圖就是進行編輯段落時,右側出現的操作介面。操作介面會只有與段落相關的設定。

如果你開始編輯圖像,那麼側邊欄中的選項將會更改。

這樣顯然考量了操作介面的簡潔與便利性,在其他編輯器也有類似的設計。

文件大綱

當你在編輯的網頁內容中,添加一個標題時,你可以通過點擊編輯器左上角的按鈕來查看文件大綱。文件大綱不僅會顯示編輯文件的字數以及它包含的區塊數,還會列出增加的所有標題。

這個文件大綱進一步也可以當作是文件內容的目錄,你甚至可以在標題點選後,立即定位到該區塊,並進行編輯。這是經典編輯器完全缺乏的功能,有助於更快速地快速瀏覽內容的結構。

按鈕

WordPress缺乏的另一個相對基本的功能是簡單的按鈕。幸運的是,Gutenberg推出了一個按鈕塊,可讓您輕鬆地將此功能添加到您的內容中。創建按鈕塊時,您將能夠編輯其文字和鏈接。
然後,您可以將基本樣式應用於按鈕,並為文字和背景選擇所需的顏色。

可以預期,古騰堡編輯器也將迎來一波延伸外掛,剛剛發佈不久,很快就有人貢獻擴充模組 Editor Blocks for Gutenberg

Gutenberg Blocks