前幾篇我們從宏觀的角度來探討 Block Theme：範本階層、theme.json、全站編輯，這篇聚焦在微觀的角度，探討到 Block Theme 的最小單位。因為有個問題如果不先搞懂，後面第三部實作區塊時你會一直卡：一個可以在後台被滑鼠點擊可以直接打字修改的區塊，它到底是 HTML？是欄位？還是別的東西？
理解這件事最好的切入點，是一個叫 RichText 的工具。
先回憶傳統佈景主題怎麼處理內容。你在傳統編輯器（Classic Editor）裡打字、貼圖、加粗，最後存進資料庫的是一整坨 HTML 字串，塞在 wp_posts 的 post_content 欄位，這坨 HTML 沒有結構可言，標題、段落、圖片全部混在同一條字串裡，靠 <h2>、<p> 這些標籤勉強區分。
想針對「某一段」做點什麼很困難，因為在資料庫眼裡，整篇文章就是一個大字串，沒有「這是第三段」、「那是一張圖」這種邊界。傳統主題要做結構化的內容，通常得靠 ACF 之類的外掛額外開欄位存，間接證明了「傳統編輯器本身無法設計出結構化內容」這件事。
區塊編輯器（Block Editor）把這坨 HTML 打散成獨立有邊界的區塊。每一段文字、每一張圖、每一個按鈕，都是獨立的區塊，各自帶著自己的資料和設定。
存進資料庫的還是 post_content，但內容變成帶註解的結構：
<!-- wp:heading {"level":2} -->
<h2 class="wp-block-heading">今天的主題</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>這是一段內文。</p>
<!-- /wp:paragraph -->
那些 <!-- wp:xxx --> 註解就是邊界。WordPress 靠它們知道「這是一個標題區塊、那是一個段落區塊」，於是每一顆區塊都能被單獨選取、單獨設定、單獨搬移，這是傳統編輯器那坨 HTML 無法實現的功能。
那使用者在區塊裡「直接打字」的能力，是哪來的？這就是 RichText 的角色。
RichText 是 Block 開發裡一個核心的元件。你可以把它想成區塊內部一個「可以就地編輯的文字格子」，使用者點進去能打字、能選字加粗、能插超連結，而且改的當下就直接反映在畫面上，不用切換到什麼設定欄位。段落區塊的內文、標題區塊的標題文字、按鈕區塊的按鈕文字，底層都是一個 RichText。
拿傳統主題類比，這是最大的體感差異。傳統主題如果你想讓客戶改一段標題，通常做法是：ACF 開一個文字欄位，客戶到右側或另一個頁面填字，前台再用 the_field() 撈出來顯示。編輯的位置和顯示的位置是分開的，RichText 把這兩件事合而為一，客戶在哪裡看到文字，就在哪裡點下去改。
這個「就地編輯」的體驗，是 Block Theme 對客戶最有感的賣點之一，也是第三部份我們做自訂區塊時會反覆用到的元件。
不是每個區塊都長一樣。先建立一個粗略的分類，後面才不會混：
| 區塊類型 | 特徵 | 例子 |
|---|---|---|
| 文字類 | 核心是一個或多個 RichText | 段落、標題、清單 |
| 媒體類 | 處理圖片、影片、檔案 | 圖片、圖庫、影音 |
| 版面類 | 用來容納其他區塊 | 群組、欄、Cover |
| 動態類 | 內容不是寫死的，是查資料庫來的 | 最新文章、Query Loop |
| 嵌入類 | 拉外部服務內容 | YouTube、推文嵌入 |
這張表你現在不用背，只要先有個感覺：區塊有「內容寫死的靜態區塊」和「內容即時查資料的動態區塊」兩大世界，對應到傳統佈景主題的寫死內容與 WP Query。
很多從傳統主題過來的人，會下意識把區塊理解成「一段包好的 HTML」，這個理解只對了一半，區塊確實會輸出 HTML，但它同時還帶著結構化的屬性資料（attributes），一張圖片區塊不只存 <img> 標籤，還存了對齊方式、尺寸、連結目標這些欄位。這就是為什麼區塊能被工具列的按鈕即時調整，而傳統 HTML 不行。
把區塊看成「HTML 外殼 + 結構化屬性」這一組東西就抓到重點了，至於這些屬性怎麼存、內容寫死和即時查資料差在哪，下一篇我們會正式進入靜態 Block 與動態 Block 的對照，並且把它跟你熟悉的 ACF 放在一起看。
文章目錄：https://oberonlai.blog/category/2026-ithome/
Hi, 我是 Oberon Lai，十多年前我從一個不懂程式的平面設計師，一頭栽進 WordPress 的世界。從佈景主題到外掛開發，從接案到自研產品，這段旅程讓我深刻理解：好的技術不只是寫出能跑的程式碼，而是真正解決人的問題。
我積極投入參與社群，公開演講紀錄如下：
我專精 WordPress 開發，從企業形象網站的設計與開發、佈景主題客製化，到既有網站的改版升級，提供完整的 WordPress 建置服務。開發面涵蓋外掛開發與維護、區塊編輯器（Gutenberg）客製區塊、ACF 與 Custom Post Type 的資料架構設計，以及 REST API 整合與 Multisite 多站架構建置。同時也協助網站效能改善與 SEO 調校、安全性檢測與強化，並導入自動化部署與版本控制流程，搭配長期的技術顧問與維運支援，讓網站上線後也能穩定運作。
亦提供 WooCommerce 商店的建置與設定，並串接綠界、LINE Pay、藍新等台灣主流金流。可依需求進行結帳頁面客製化、訂單狀態自動化流程設計，以及商品管理與庫存系統的客製開發；也支援 WooCommerce Subscription 定期定額、REST API 應用開發、報表與數據匯出等進階需求。此外，透過購物流程 UX 改善、電商網站效能調校與 HPOS 高效能訂單儲存相容開發，全面提升營運效率，並提供電商營運技術顧問服務。
AI 浪潮席捲而來，我選擇擁抱而非恐懼，我把 AI 融入開發工作流以及客戶的產品中，也持續累積「AI 看不見的部分」：真實踩坑經驗、最新漏洞情報那些只有第一線工程師才看得見的細節，如果你有任何 WordPress 的客製化需求或是 AI 開發相關的問題非常歡迎加入 LINE 官方帳號與我聯繫：
https://page.line.me/vrf7844t?oat_content=url&openQrModal=true
如果想要獲取 AI 開發實戰經驗也能訂閱我的電子報，每週五上午準時出刊：
https://oberonlai.blog/wordpress-newsletter/
iThome鐵人賽
看影片追技術