開發這款新式編輯器的目標,是為了在 WordPress 加入豐富內容時變得簡單而有趣。使用 Gutengerg 編輯器編輯內容,整篇內容會由類似樂高積木的塊狀內容所組成,作者可以移動這些塊狀內容並與之互動。移動游標的同時,應該會注意到不同的區塊會以外框及箭號加以標示;按下箭號即可快速重新排列區塊位置,且不必擔心會因為複製及貼上的操作而遺失內容。

有如山脈般壯觀的印刷機

目前正在閱讀的是段落區塊,這是最基本的區塊;段落區塊有自有的控制項,可隨意移動文字內容位置…

…就如同這個區塊,文字內容為靠右對齊。

[標題] 是有助於呈現內容大綱及組織的獨立區塊。

一圖勝千文

以最嚴謹的方式處理圖片及媒體檔案是新版編輯器的主要重點。希望作者們會發現加入圖說或全幅寬度圖片的方式,比以往更容易也更完整。

美麗的風景
如果使用中的佈景主題支援這項功能,便會在圖片工具列出現 [寬幅寬度] 及 [全幅寬度] 按鈕。請試試這項功能的效果。

請試著選取、移除或編輯圖說,而不必再擔心因為犯錯或毀損內容而必須小心翼翼的選取圖片或文字。

插入程式

想像一下,在同一處介面中便可以快速完成 WordPress 可以做的一切,無須瞭解 HTML 標籤、類別或記住複雜的短代碼語法。在編輯器中隨處可見的 (+) 按鈕,可讓作者瀏覽全部可用的內容區塊,並將它們加入內容中,這就是插入程式的運作方式。外掛及佈景主題透過註冊,為多樣化的編輯及發佈拓展了各種可能性。

請試著插入區塊,便會發現 WordPress 已在內容中加入之前未見過的元件。這是目前這篇示範內容中用到區塊的簡短清單:

  • 段落及標題
  • 圖片及視訊
  • 圖庫
  • 可嵌入第三方內容,例如 YouTube 影片、Twitter 的推文或其他 WordPress 網站的文章。
  • 提供各式版面配置區塊,例如按鈕、宣傳圖片、分隔符號等等。
  • 以及以清單區塊所製作的這份範例清單 🙂

視覺化的編輯方式

區塊的明顯優勢就是作者可以就地編輯並直接控制內容。作者可以直接修改內容,而不是透過欄位編輯引文來源或按鈕文字等內容。請試著編輯以下引文:

透過這個編輯器,便可建立頁面及文章,而這兩者均能輕鬆建置出呈現多樣化內容、具備能使用短代碼、自訂 HTML 或常用嵌入內容區塊的使用體驗。

Matt Mullenweg 撰於 2017 年

與引文來源對應的資訊,是類似圖片下方圖說的個別文字欄位;因此即使進行選取、修改或移除來源,引文結構仍會受到保護,要將它再次加入也非常簡單。

區塊可以滿足任何寫作需求。舉例來說,作者或許會想要加入低調的引文作為內容的一部份,或是偏好顯示一個大型風格化的引文,而插入程式提供了全部相關設定。

作者可拖曳位於資訊欄區塊中的滑桿,藉以變更圖庫的內容欄設定。

多樣化的媒體檔案呈現方式

如果目前使用的佈景主題整合了圖庫圖片的 [寬幅寬度][全幅寬度] 顯示方式,作者便能非常快速地建立具有多樣化媒體檔案呈現方式的版面配置:

協助工具相當重要 — 請記得填寫圖片替代文字屬性

當然,全幅寬度圖片會以相當大的尺寸顯示,但的確適合呈現某些圖片。

上方是個只有兩張圖片的圖庫。這是能夠更輕易建立引人注意版面配置的方式,而無需處理其他細節。如有需要,還可以使用區塊切換程式輕鬆地將圖庫轉換成一張張的單張圖片。

任何區塊均具備對齊設定,下方嵌入內容的區塊亦同,且嵌入內容後會立即具備回應式設計。

作者可以使用任何自己喜好的區塊,無論是靜態或動態、具備裝飾樣式或純文字。以下便以重要引述區塊作為示範。

程式碼,如詩

WordPress 社群

如想進一步瞭解如何建置其他區塊的相關資訊,或是有興趣協助這個專案,請造訪 GitHub 存放庫


感謝加入測試 Gutenberg 的行列

👋