初探 WordPress 全站編輯 (Full Site Editing) – 試做 Bootstrap Block Theme

什麼是全站編輯？

近幾年只要有稍微注意 WordPress 發展的同學應該都會發現，主導 WordPress 發展的 Automattic 公司一直大力推廣 Gutenberg 區塊編輯器，儘管它的評價很兩極，但它背後帶出來的全站編輯 (Full site editing) 概念卻是讓人十分驚豔的想法。

「全站編輯」就我個人的粗淺理解，主要是希望能為整個網站的編輯行為 (包含前、後台) 帶來一致且理想的體驗。要達成這個目標，就是要藉由「區塊 (block)」來建構網站上所有的元素，區塊可以是一個很基本的元素單位，比如按鈕，它也可以是一個程式邏輯，比如查詢迴圈。

一小堆區塊可以構成一個可重覆使用的範本組件 (template part)，而組件可以用來建構範本 (template) ，幾個主要的範本最終構建出整個網站。而開發者或設計師可以把預先寫好的版面寫成 Block Patterns 在線上分享，只要在後台點一下你喜歡的 UI 組件，像是一個價目表，這個組件就會建立在你的範本頁面裡，稍加調整就可以上線了。

這讓編輯版面上的元素變得跟編輯內容很像，並且也考慮了流通分享的便利性 (直接在後台挑選)。

要支援全站編輯，我們必須建立「區塊佈景主題」(block theme)。Block theme？這和一般 WordPress theme 的開發方式到底有何不同呢？

區塊佈景主題的開發方式

區塊佈景主題 (Block theme) 的開發方式跟傳統的 WordPress 佈景主題十分不同，如果你客製過傳統的 Theme，你會知道所謂的 Template Hierarchy ，即是 WordPress 提供的幾個內建的範本 php 檔，透過建立和修改它們來達成客製。區塊佈景主題依舊保有 Template Hierarchy 的概念，但全部的 php 檔都換成了 html 檔，並且只接受 Block 元素的語法，以保證後台在編輯這個頁面時，知道該用哪種 Block 來進行設定。

以往我們很容易會把程式邏輯寫進範本 php 檔裡，但在 Block theme 裡你完全不能這麼做，因為它是 .html 檔。在區塊的世界裡，任何功能都應該要被包裝成區塊，再將該區塊安排至 Block theme 裡。

WordPress 官方提供了如同 create-react-app 的 npm 工具 — Create Block，可以快速建立 Based on React.js + PHP 的外掛樣版 (Boilerplate)，讓區塊的開發更為便利，也將版面和程式邏輯做了很好的切分。

將 WordPress 作為開發平台的未來

其實我本來覺得 Headless WordPress 會是最適合團隊開發的形式，至少你不用讓前端的開發人員必須懂太多 WordPress 後端開發的知識。但無奈 Matt 大大 (Automattic 的老大) 不喜歡沒頭的 WP，就在我評估導入 Frontity 的時候，他老大哥把人家買下來冷凍，從此停止開發XD。

當然還是可以走 Headless 的開發方式，不過我也好奇 Block Theme 目前的發展程度和潛力，所以才有了這篇文章。但必須老實的說，我覺得 Block Theme 目前的開發方式，並不會讓我感覺特別興奮，雖然全站編輯和區塊的概念非常棒，但實作的形式和客製的流程目前看來還是不夠順暢。

練習: 試作 Bootstrap Block Theme

因為工作上最常使用 Bootstrap，所以乾脆就做一個支援 Bootstrap 的 Block Theme。雖然放上 Github 了，但這個習作完全不建議拿來直接使用，因為我為求簡單，使用了內建的群組區塊(wp:group)和欄位區塊(wp:columns)來建立容器 (container, rows, columns)。而使用內建區塊的效果並不理想，因為內建的容器型區塊 (InnerBlock)，會產生額外的巢狀容器元素，造成 Bootstrap 的樣式受到影響。

所以目前我覺得如果要完整支援 Bootstrap 的樣式，應該要開發專用的 Bootstrap Block… 有時間再寫詳細的說明XD。

Git Repo: https://github.com/mrmu/mu-bootstrap-block-theme

標籤：block, full-site-editing, gutenberg

分類：WordPress

本文作者是Audi Lu