一、區塊編輯器比傳統編輯器「好用在哪？」
可以把它想成：
傳統編輯器 = Word 打文章
區塊編輯器 = 標準化積木在堆版面
1. 版面控制力差很多
- 傳統編輯器：
- 其實就是一個大文字框
- 要做兩欄、圖文並排、按鈕、特別區塊……常常要：
- 表格、shortcode、自己寫 HTML/CSS，或靠其他外掛
- 區塊編輯器：
- 直接有 Columns、Group、Cover、Buttons…
- 「我要兩欄」＝插入 Columns
- 「我要一塊上面有大圖＋文字＋按鈕」＝用 Cover + Heading + Button
👉 不用會程式，也能做出簡單頁面設計
2. 每一塊都是獨立「積木」，好調整也好重複使用
- 每一個區塊有自己的：
- 顏色、字體、間距、對齊、RWD 設定
- 你可以：
- 拖曳順序調整版面
- 把一整組做好的區段存成「樣板（Pattern）」，之後一鍵插入再改文字
👉 改版面不再是「整篇文章在那邊剪剪貼貼」，而是搬積木
3. 所見即所得，比較接近前台畫面
- 傳統編輯器裡看到的「像 Word」
→ 前台常常跟你看到的不一樣（尤其是有短碼、特別排版時） - 區塊編輯器裡：
- 對齊方式、欄位、背景色、按鈕位置，大致跟前台差不多
- 不用一直「預覽 → 返回 → 再改」
👉 更接近真正訪客看到的畫面，少走冤枉路
4. RWD（手機版）更好處理
- 很多區塊（特別是 Columns、Group 等）都內建：
- 手機、平板、桌機不同比例的寬度、對齊方式
- 不用自己寫 media queries（CSS）
👉 基本的手機版排版，靠內建就能搞定一大半
二、Gutenberg 原生編輯器本身的主要功能
這些是「整個編輯器」的能力，不是單一區塊。
1. 區塊庫（Block Inserter）與搜尋
- 左上角或內容中會看到「➕」按鈕，打開 區塊庫，可以：
- 依分類（文字、媒體、設計、Widget、Theme、Embed）瀏覽
- 用搜尋快速找到「段落、圖片、表格、按鈕」等區塊
- 直接拖曳區塊到畫面上
2. 區塊工具列 & 右側設定欄
- 每個區塊點一下，上方會出現 小工具列，可以：
- 轉成其他類似區塊（例如：圖片 → 圖庫）
- 調整對齊（靠左、置中、寬版、全版）
- 拖曳、上下移動、複製、剪下、複製樣式/貼上樣式
- 右邊「齒輪」打開的 側邊欄 有兩個分頁：
- Post / Page：狀態（草稿、公開）、發佈時間、固定網址、分類、標籤、精選圖片、摘要、留言是否開啟
- Block：針對目前選中的區塊，調整字體、顏色、間距、邊框、RWD 等。
3. List View（區塊大綱 / 結構樹）
- 工具列上有一個「三條線」圖示，打開後可以看到：
- 這一篇裡所有區塊的 階層結構（哪個 Group 裡面包了哪些東西）
- 可以在這裡選取、拖動排列、刪除區塊
- 尤其是版面比較複雜（很多 Group、Columns）時，這個功能超好用。
4. Command Palette（指令面板）
- 按 Ctrl+K / Cmd+K 就會跳出一個搜尋框，可以：
- 搜尋指令（如「新增區塊」「切換模板」「打開樣式」）
- 快速跳轉到某個樣板、模板或設定頁面
5. Block Patterns（區塊樣板／圖塊）
- 在「➕ 插入器」裡有一個 Patterns / 樣板 分頁，裡面是：
- 已排版好的 Hero 區、兩欄介紹、CTA、FAQ 區、Footer…
- 一點就整組插進來，再改文字、圖片就能用
- 你也可以：
- 選一段自己做好的區塊 → 右上角三點 → 建立 Pattern / Create pattern
- 可以選擇 Synced / Unsynced：
- Synced = 以前的「Reusable Block」：改一次，所有地方一起更新
- Unsynced = 只是拿來當模板，之後各頁面可以各改各的
6. Block Directory（區塊目錄）
- 如果內建區塊不夠用，你在搜尋框打關鍵字時，會看到「從區塊目錄安裝」的結果：
- 點一下就會幫你安裝那個「單一區塊外掛」，不用先去外掛頁搜尋。
7. 文件詳細資訊、Undo / Redo、版本
- 上方工具列有：
- Undo / Redo 按鈕
- Details（內容結構）：字數、閱讀時間、段落數、標題數、區塊數
- WordPress 也會自動幫你存多個版本（Revisions），出事可以回復。
8. Full Site Editing / Site Editor（搭配區塊主題）
如果你用的是 Block Theme（例如 Twenty Twenty-Four 這種新一代主題），會多一個 外觀 → 編輯器（Site Editor）：
- 用「同一套區塊」編輯：
- Header、Footer
- 模板（文章頁、列表頁、404、搜尋結果）
- Sidebar（用 Columns + Template Part 做出可重複的側邊欄）
- 這時 Theme 類的區塊（Site Title、Navigation、Query Loop…）就會派上用場，下面會講。
三、WordPress 內建的 6 大類區塊（逐類介紹）
以下是官方文件中列出的 核心區塊分類，我會把主要用途說清楚，讓你知道：看到某個名字時它是幹嘛的。
⚠️ 注意：不同 WordPress 版本會多／少幾個區塊，以下以 6.9 的官方清單為基準。
1. Text blocks（文字區塊）
用來排版純文字、列表、表格這一類內容。
- Paragraph 段落
最基本的打字區塊，就像傳統編輯器的文字區域。 - Heading 標題
設定 H1～H6，對 SEO 與文章結構很重要。 - List 清單
- 支援有序（1. 2. 3）／無序（• • •）
- 可以巢狀子項目（縮排）。
- Quote 引言
做一般引用文字，有引號或縮排樣式。 - Pullquote 重點引言
比 Quote 更搶眼，常用來拉出文章中一句重點句子。 - Table 表格
可設定列數、欄數，做簡單表格，不用自己寫 HTML。 - Code 程式碼
顯示程式碼片段，用等寬字型，不會被執行。 - Preformatted 預格式化文字
保留你打字時的換行、空白等格式，用等寬字型。 - Verse 詩句
適合歌詞、詩，按 Enter 會在同一個區塊換行，不會產生新的段落區塊。 - Details 明細 / 展開收合
一個可以展開 / 收合的文字區塊（類似簡易 Accordion），適合 FAQ、補充說明。 - Math 數學
支援用 LaTeX 語法呈現數學公式。（6.9 文件中列為 Text 類的一員。） - Classic 傳統編輯器區塊
在一個區塊裡嵌入舊的 TinyMCE 編輯器（看起來像以前的 WordPress 編輯畫面）。適合從 Classic Editor 過渡時用。 - Stretchy Paragraph / Stretchy Heading
Paragraph / Heading 的一種變體，字體會隨容器大小彈性伸縮（新版裡才出現）。
2. Media blocks（媒體區塊）
處理圖片、影片、音訊、檔案等。
- Image 圖片
插入單張圖片，可設定替代文字、尺寸、對齊、連結、濾鏡（如 duotone 雙色調）等。 - Gallery 圖庫
多張圖片排成格狀，可設定欄數、是否裁切、點擊後連結到檔案或附件頁。 - Audio 音訊
嵌入 mp3 等音檔，顯示播放控制列。 - Video 影片
上傳或從媒體庫選取影片檔，在前台顯示播放器。 - Cover 封面（圖 / 影片 + 文字）
背景可以是圖或影片，上面疊一段文字，可調整背景顏色、透明度，常拿來當 Hero 區或區塊標題。 - Media & Text 圖文並排
左邊圖右邊文（或反過來），很適合「形象圖 + 簡介」。《以前在傳統編輯器要對齊圖文更麻煩，現在是內建版面。》 - File 檔案下載
顯示一個檔案名稱 + 下載按鈕，適合放 PDF、Word、公文下載等。
3. Design blocks（設計 / 版面區塊）
負責整體排版、欄位、分隔線、空白等。
- Group 群組
把多個區塊包在一起，好一起移動、上背景色、上邊框，還可以指定 HTML 標籤（如<section>、<main>）。 - Row / Stack / Grid
- Row：橫向排列（多欄橫排）
- Stack：垂直堆疊（但有更細的對齊控制）
- Grid：做成網格排版（多行多列）
- Columns 欄位
快速做出 2 欄、3 欄版面（各欄裡又可以放任何區塊）。 - Buttons 按鈕組
一個區塊中放一或多顆 Button，方便調整整組對齊、間距。 - Accordion 手風琴
可展開 / 收合的多段內容（每段有標題＋內容），類似 FAQ 的整組形式。 - More（閱讀更多）
在文章中插入「更多」分隔，讓列表頁只顯示前半段內容。 - Page Break 分頁
把一篇文章切成好幾頁（顯示 1 2 3… 分頁）。 - Separator 分隔線
細線或點線，把內容區塊分隔開。 - Spacer 空白
插入固定高度的空白區塊，調整區塊之間距離。
4. Widgets blocks（小工具類區塊）
原本只能放在 Sidebar / Footer 的小工具，現在可以當「內容中的區塊」使用。
- Archives 彙整
依月份列出文章歸檔清單。 - Calendar 月曆
顯示有發文的日期，點日期會跳到那天的文章列表。 - Terms List / Categories List / Tag Cloud
- Terms List：顯示某個分類法的所有 terms
- Categories List：文章分類列表
- Tag Cloud：標籤雲
- Latest Posts / Latest Comments
最新文章 / 最新留言清單。 - Page List
自動列出網站所有頁面連結（適合做簡單導覽）。 - RSS
顯示外部 RSS 資訊來源的內容。 - Search 搜尋
訪客可以搜尋站內內容。 - Social Icons
一排社群 icon（Facebook、X、YouTube…），點了連到你的社群頁。 - Shortcode
把舊有外掛提供的 shortcode 放進來執行。 - Custom HTML
自己寫 HTML／嵌入外部小工具程式碼（例如表單、第三方工具）。
5. Theme blocks（主題 / 模板區塊）
這一類主要用在 Site Editor（整站編輯） 或文章模板裡，讓你用「區塊」控制 Header、Footer、文章列表、文章 Meta 等。
大致可以分幾組來看：
5‑1. 導覽與網站品牌
- Navigation 導覽選單 + 子區塊：
- Custom Link、Home Link、Submenu 等，用來做主選單、子選單。
- Site Logo / Site Title / Site Tagline
顯示網站 logo、網站標題、副標題，通常放在 Header。
5‑2. 內容查詢與列表
- Query Loop
查詢多篇文章或自訂文章類型，條件可以是分類、標籤、日期… - 相關子區塊：
- Post Template：定義每一篇在列表中的版型
- Post Content / Title / Excerpt / Featured Image：在 Query Loop 裡顯示每篇文章的內容、標題、摘要、精選圖
- Pagination / Query Total / Query Title：分頁、總筆數、查詢標題等。
- Archive Title / Search Results Title
各種彙整頁、搜尋頁的標題。 - 各種 Term 相關：
- Categories、Tags、Terms List、Term Description、Term Count、Term Name、Terms Query…
5‑3. 文章 Meta 與作者資訊
- Title / Excerpt / Featured Image
單一文章模板中的標題、摘要、精選圖（新版名稱不再加「Post」字樣）。 - Author / Author Name / Author Biography / Avatar
顯示作者名稱、頭像、簡介。 - Date / Post Date / Modified Date
發布日期、最後更新日期。 - Categories / Tags
目前文章的分類與標籤。 - Read More / Next Post / Previous Post / Post Navigation Link
更多閱讀、上一篇 / 下一篇導覽、上下篇連結。 - Time to Read / Word Count
顯示預估閱讀時間與字數。
5‑4. 留言系統區塊
用來組合完整的留言區。
- Comments（整組容器）
內含：- Comments Title
- Comment Template（每一則留言的版型）
- Comment Author Name、Comment Date、Comment Content
- Comment Reply Link、Comment Edit Link
- Comment Pagination
- Comments Count / Comments Link
顯示留言數、或「前往留言」的連結。 - Comments Form
發表留言的表單（改名自「Post Comments Form」）。
5‑5. 其他主題相關區塊
- Login/out：登入 / 登出連結。
- Template Part：插入某個模板片段（例如整組 Header / Footer / Sidebar）。
- Post Types Label / Term Count…：在更進階的模板設計中用來顯示內容類型標籤、各種計數。
6. Embed Blocks（嵌入區塊）
嵌入外部服務（社群、影片、音訊…）。
- Embed（通用嵌入）
貼上支援 oEmbed 的網址（例如某些文章、影片），WordPress 會自動辨識。 - 特定服務的嵌入區塊（節錄一些常用的）：
- X（原 Twitter）、YouTube、WordPress、TikTok
- SoundCloud、Spotify、Vimeo、Flickr
- TED、Slideshare、Reddit、SmugMug、Crowdsignal、Amazon Kindle、Pinterest
你只要選對 block、貼上該服務的網址，就會直接顯示為可播放／可互動的嵌入內容。
二、 Spectra 是什麼？跟編輯器的關係
- Spectra 是一個 「區塊編輯器強化外掛」，主要是：
- 在 Gutenberg 裡增加很多進階區塊（按鈕、Section、Tabs、FAQ、Post Grid…）
- 增強排版、間距、RWD 控制、動畫等
- 它是為了「新版編輯器」設計的，不是為了 Classic Editor。
一旦你願意在某些頁面切換成區塊編輯器，Spectra 就變得很有價值，例如：
- 更好看的版面與排版
- 容易做出：左右兩欄、三欄、公會簡介＋照片、時間軸、FAQ 區塊
- 手機版自動換行、調整順序，不用寫 CSS
- 做「活動頁」、「單一介紹頁」特別方便
- 學術演講頁面可以有：標題、時間、地點、講師資訊、報名按鈕、FAQ、Google Map
- 全部用拖拉區塊完成，不用自己刻 HTML
- 搭配 Astra 主題，本來就很相容
- 你現在用 Astra，本來就是 Spectra 的好朋友組合
- 很多教學都用「Astra + Spectra」示範
你現在裝的 Spectra，可以把「新編輯器（區塊編輯器）」變成一個小型 Page Builder。下面我分 免費版 跟 付費 Spectra Pro 兩塊來講，順便補充幾個跟你實際用法比較有關的重點。
三、Spectra 免費版：現在就有的功能
官方 WordPress 外掛庫的 Spectra（原 Ultimate Addons for Gutenberg）就是免費版，內建大約 30+ 個區塊，加上一些編輯器功能。
1. 編輯體驗 & 全站型功能
這些不是單一「區塊」，而是整個編輯器的強化：
- Layouts 版面導覽
- 左側會有一個版面樹狀結構，可以快速選、移動、隱藏某個 Container、Row、區塊，整理頁面結構比較不痛苦。
- Starter Templates & Wireframes
- 和 Astra 的 Starter Templates 搭配，可以匯入整站或單頁模板；Wireframe Blocks 則是「線框版」區塊，先搭骨架再上設計。
- Block Patterns（區塊樣板）
- 官方跟 Spectra 提供的一組組 section：Hero、定價區、FAQ 區之類的，一鍵插入再改文字即可。
- 進階 Block Presets（區塊樣式預設）
- 每個區塊都有設計好的幾種「Preset」可以直接套，不用從 0 開始調顏色、字體。
- Spectra Copy-Paste 樣式
- 一個按鈕就可以把區塊 A 的字型、顏色、間距、陰影、動畫一口氣「貼到」區塊 B。
- Container 容器（Flexbox 排版）
- Spectra 很多版型都靠 Container 做出橫排、直排、置中、左右對齊等布局，取代舊式的「列/欄」概念。
- Global Styling 全域樣式
- 設定整站的內容寬度、預設 Container padding、欄位間距、按鈕樣式等，讓版面比較一致。
- Popup Builder（基本版彈跳視窗）
- 從後台「Spectra > Popup Builder」可以建立簡單的全站 Popup 或 Info Bar。免費版可以做彈窗，但觸發條件（例如捲到幾％才出現）相對有限，進階觸發在 Pro 才完整。
- Coming Soon 模式
- 讓整個站先顯示一個「Coming Soon」頁面，只有登入的人看得到真正內容。
- Animations（動畫）
- 支援 fade、slide、zoom、flip 等進場動畫。免費版可以用一部分效果，Pro 版則有更多進階動畫選項。
- 本機載入 Google Fonts
- 把 Google Fonts 下載到自己的主機，減少外部請求，也有助於符合隱私／GDPR 要求。
- 啟用／停用單一區塊
- 在「設定 > Spectra」裡可以勾選要不要啟用某些區塊，沒用到的乾脆關掉，減少後台雜訊跟前端資源。
- （選用）Spectra AI
- 可以連接 ZipWP 的 AI 服務，在區塊編輯器裡用 AI 產生內容、幫你改文字、生成版型。不過這牽涉 ZipWP 自己的方案，跟單純的「Free vs Pro」有點分開。
對你來說：只要你有少數文章或頁面是用「區塊編輯器」，這一整套東西就等於多了一個精簡版的 Page Builder；如果那篇文章還是用「傳統編輯器」，這些功能就不會出現。
2. 免費版區塊（Blocks）大致有哪些？
官方說大約有 30+ 個「核心區塊」，依功能分成幾類：
(1) Core Blocks – 最常用的基礎版面
- Container 容器
- Heading 標題
- Image 圖片
- Icon 圖示
- Buttons 按鈕 / 多顆按鈕
- Info Box 資訊框（圖示＋標題＋內文）
- Call To Action 召喚動作區塊
- Countdown 倒數計時
這幾個組起來就能做大部分行銷頁、單頁介紹。
(2) Creative Blocks – 增加「質感」的小工具
- Star Ratings 星等
- Marketing Button 行銷按鈕（可以加小標語）
- Icon List 圖示條列
- Image Gallery 圖片集 / Masonry Gallery
- Lottie Animation 動畫插圖
(3) Content Blocks – 內容展示
- Slider 輪播
- Content Timeline 內容時間軸
- Tabs 分頁
- Inline Notice 提示框
- Google Maps 地圖
- Taxonomy List（分類 / 標籤列表）
- Price List 價目表 等等。
(4) Post Blocks – 列出文章的版型
- Post Grid / Post Masonry 文章格狀列表
- Post Carousel 文章輪播
- Post Timeline 文章時間軸
- Counter 計數器
- Modal 彈出視窗（可搭配按鈕觸發）
(5) Social / 信任感相關
- Blockquote 引言設計
- Social Share 分享按鈕
- Team 團隊介紹
- Testimonials 客戶推薦
- Instagram Feed（IG 牆） – 目前官方有公告，因為 Meta 政策變動，之後要自己建立 Meta App 才能連 IG。
IG Feed 這個區塊有一點版本差異：有些比較新的比較表會把它放在 Pro，那實際上你可以開一篇新區塊編輯器頁面，看「新增區塊 > Spectra」裡有沒有 Instagram Feed，有就表示你那個版本可以用，只是設定流程比較麻煩。
(6) Form Blocks – 表單
- Contact / Newsletter 表單區塊
- 支援 reCAPTCHA 防機器人，可以用在聯絡表單、訂閱表單等。
會員註冊 / 登入表單是 Pro 版才有，這個下面再說。
(7) SEO Blocks – 直接輸出 Schema 的區塊
- FAQ 常見問題（FAQ Schema）
- How-To 操作教學（HowTo Schema）
- Review 評論
- Table of Contents 目錄
這幾個區塊會自動輸出結構化資料，對 SEO 友善（搜尋結果有機會出 FAQ、HowTo Rich Results）。
二、Spectra Pro（付費版）：在免費版之上的「加強」
Spectra Pro 是一個「加值外掛」，需要先裝免費版 Spectra，再另外安裝 Pro 外掛並輸入授權。
大方向是：免費版給你「做得出完整網站」的基本積木，Pro 版則讓「內頁資料更動態、互動更強、設計細節更多」。
1. Dynamic Content（動態內容）＋ Advanced Loop Builder
這一塊是 Pro 的核心價值之一：
- Dynamic Content 擴充
- 可以在標題、文字、按鈕、圖片等，直接讀取文章欄位、使用者資訊、自訂欄位（ACF、Toolset 等）來顯示內容。
- 例如：自動在卡片上抓「自訂價位欄位」、顯示作者頭像、或依分類顯示不同資訊。
- Loop Builder（迴圈建構器）
- 用「區塊的方式」自訂列表版型，當作 Blog 首頁、文章列表、產品列表使用，不用寫程式。
- 搭配 Dynamic Content，可以做非常客製化的 CPT（課程、產品、房源、作品集）列表。
多數官方說明與第三方評測都直接說：Loop Builder 和完整 Dynamic Content 是 Pro 才有，免費版只有比較一般的 Post Grid / Post Carousel 等列表區塊。
2. 會員登入 / 註冊 / 受保護內容
Pro 會多兩個很重要的區塊：
- Login Form Block
- 自訂 WordPress 登入表單外觀（顏色、欄位、錯誤訊息），放在任意頁面當作「會員登入」。
- 支援 Google reCAPTCHA 等安全性選項。
- Registration Form Block
- 前台註冊表單，設定註冊後要導向哪一頁、是否自動登入、寄出歡迎信、加上 Honeypot / reCAPTCHA 防垃圾註冊。
如果你未來要做「會員區、線上課程、社團網站」，這兩塊 + SureMembers / LearnDash / LifterLMS 等外掛一起用會很方便。
3. Popup Builder Pro & Modal / Slider / Gallery Pro
前面說過：免費版就有 Popup Builder，但比較基本。Pro 把這類「互動元素」變得很強：
- Popup Builder Pro
- 可以設定詳細的 觸發條件：捲動百分比、停留時間、退出意圖、點擊某個元素才開啟等。
- 顯示規則：只在某些頁面 / 分類 / 文章類型出現或排除（例如只在文章頁推訂閱、在商品頁推折扣）。
- Slider Pro / Modal Pro / Image Gallery Pro / Countdown Pro
- 跟免費版的 Slider、Modal、Gallery、Countdown 相比，多更多版型、分頁、動畫、淡入淡出效果、導覽控制等。這些在官方 Pro 功能列表裡都是獨立項目。
簡單講：免費版可以做「有就好」的輪播、彈窗；Pro 版可以做「真的拿來當主要行銷工具」的輪播跟彈窗。
4. 更多 Pro 專屬區塊 & 設計工具
依官方與多篇評論整理，Pro 會多出一批「高級區塊」跟設計功能：
常見的例子：
- Instagram Feed（常被列為 Pro 賣點） – 讓你拉 IG 貼文牆到網站（但現在需要自己申請 Meta App）。
- 更多動畫 & Animation Effects Pro
- Global Block Styles / Linked Styles
- 可以把某個 Block 樣式當成「全域樣式」，改一次套全站。
- Responsive / Display Conditions 進階條件
- 更細緻的「在什麼裝置、什麼使用者、什麼情境顯示／隱藏某個區塊」設定。
以及官方提到的「More Premium Blocks（20+ 進階區塊）」等。
5. 模板、整站套件與支援
如果你買的是單純 Spectra Pro，主要就是上面那些功能；
如果是 Essential Toolkit / Business Toolkit，會再包含：
- Astra Pro 主題
- 大量 Premium Starter Templates（整站模板）
- 其他工具（CartFlows、SureWriter、ZipWP Pro 等）
另外還有：
- 完整 Site Library（100+ 整站模板）存取權
- Priority Support 優先客服
- 終身版方案等（一次買斷）。
四、簡單總結（幫你抓重點）
- 免費版 Spectra
- 已經提供 30+ 區塊、Container 排版、FAQ/TOC/Review 等 SEO 區塊、基本 Popup Builder、Coming Soon 模式、部落格列表等。
- 非常適合你目前「偶爾用區塊編輯器做版型」的需求。
- Spectra Pro
- 主要是給需要 Dynamic Content + Loop Builder + 登入 / 註冊 + 強化 Popup / Slider / Gallery + 更多專業區塊和模板 的使用者。
- 如果未來你要做會員站、課程、或高度客製化的內容列表，再來考慮升級也不遲。