工具箱如果塞滿了只能鎖同一種螺絲的起子，真正要用的時候反而找不到一支順手的。許多人架設 WordPress 網站也走上同一條路：頁面編輯器裝一套，彈出視窗外掛裝一套，麵包屑外掛再裝一套，區塊編輯器裡的外掛選單越滾越長，網站前台卻越跑越慢。
GenerateBlocks 是一個免費且開放原始碼的區塊編輯器外掛，核心邏輯卻正好相反，只教會你少數幾個區塊，就讓你能用它們排出幾乎任何版面。它由 GeneratePress 佈景主題背後的開發團隊 Tom Usborne 打造，樣式面板與設計邏輯因此高度呼應，但它本身是一個外掛，任何佈景主題都能安裝使用，不強制搭配 GeneratePress。
WordPress.org 上目前有超過 20 萬次有效安裝，4.9 分的評分（滿分 5 分）背後的原因，就是這種「學少數區塊、深度使用」的設計哲學，省下的不只是外掛數量，還有網站因為外掛堆疊而變慢、彼此衝突的麻煩。
讀完這篇，你會知道 GenerateBlocks 每個核心區塊在做什麼，免費版能不能滿足你的需求，以及 Pro 版加購的功能值不值得你付費。先從它跟 GeneratePress 主題之間是什麼關係講起，再一路拆解每個區塊實際能做什麼。
GenerateBlocks 是什麼？與 GeneratePress 主題的搭配定位
把 GenerateBlocks 單純當成「GeneratePress 主題專用的區塊外掛」是最常見的誤解。它是一個獨立的區塊編輯器外掛，安裝在網站上以後，本身不含任何佈景主題的排版邏輯，把它裝在 Twenty Twenty-Four、Astra 或任何一款主題上都能正常運作。
之所以常被誤認為跟 GeneratePress 主題綁定，是因為兩者出自同一個開發團隊，樣式面板的設計語言、命名習慣與操作邏輯幾乎一致，用慣 GeneratePress 主題自訂選項的人，轉頭用 GenerateBlocks 排版幾乎不用重新學一套介面。這也是為什麼絕大多數 GeneratePress 使用者會同時裝上 GenerateBlocks，官方也把兩者的關係定位成攜手運作、但不互相綁定。
GenerateBlocks 的核心設計理念，從官方首頁揭示的定位就看得出來：不要用一堆只能做單一件事的區塊把編輯器塞得又腫又亂，而是學會少數幾個區塊，就能把任何版面組出來。這跟 Elementor 這類大型頁面編輯器外掛走的路線完全不同，Elementor 會在原生編輯器之外另外開一套獨立的編輯介面，GenerateBlocks 則是直接在 WordPress 原生的區塊編輯器裡運作，不需要另外學一套系統，也不用切換到另一個畫面才能編輯版面。
外掛市集直接安裝，啟用後立即能用
要用上 GenerateBlocks，最快的方式是直接在 WordPress 後台安裝。進入「外掛 > 安裝外掛」，搜尋 GenerateBlocks，找到之後點擊安裝並啟用，整個過程不用離開後台，幾十秒內就能完成。習慣手動管理外掛的人，也可以到 WordPress.org 下載外掛的 zip 檔，再用 FTP 或後台的「上傳外掛」功能把檔案送進外掛目錄，效果完全一樣。
安裝前值得先確認網站環境符不符合需求：目前的 GenerateBlocks 最低要求 WordPress 6.7 以上、PHP 7.2 以上，版本太舊的網站建議先升級核心程式再安裝，否則外掛可能無法正常啟用，或部分功能跑不出來。
免費版安裝完就能直接使用，不需要輸入任何授權碼或帳號登入，這一點跟不少「先試用再解鎖」的外掛不同。只有想升級到 Pro 版時才需要額外操作：先下載 Pro 版的 zip 檔安裝並啟用，再到後台 GenerateBlocks 的設定選單裡貼上購買後取得的授權金鑰，Pro 版的功能才會全部解鎖。
啟用後，區塊編輯器不需要另外設定就能直接使用 GenerateBlocks 的區塊。在任何一個空白段落輸入斜線「/」加上區塊名稱，編輯器就會自動篩選出對應的區塊讓你直接插入，比從落落長的區塊清單裡用滑鼠找快上不少。
Container 區塊撐起頁面的版面骨架
Container 是 GenerateBlocks 裡最基礎的一個區塊，作用是把內容包成一個個獨立的容器，用來組織版面的段落與區塊。幾乎每個版面最外層都會先放一個 Container，其他像文字、按鈕、圖片這些區塊，通常都會包在它裡面，而不是直接散落在頁面上。
樣式面板裡，Container 可以切換整個容器要撐滿螢幕寬度，還是限制在某個固定寬度置中顯示，這決定了一個區塊是要當成全寬背景色塊，還是限制在讀者容易閱讀的欄寬內。內外距與邊框樣式也都能個別調整，背景可以是純色、漸層，也可以放一張背景圖並控制它的位置與尺寸。
比較容易被忽略的一個細節是，Container 輸出的 HTML 標籤可以自己指定，不一定要用預設的 div，可以改成 section、article 這類語意化標籤。這對搜尋引擎理解頁面結構有幫助，也是原生區塊編輯器的段落區塊做不到的細節控制。
實務上排版的順序建議先放 Container 定出這一段的寬度與背景，再往裡面塞其他區塊。先決定這一段要多寬、背景長怎樣，之後排文字或按鈕的位置只需要在容器內部微調，不用重新處理整段的寬度與間距。
Grid 區塊用欄列排出彈性版面
價目表要並排三種方案、團隊介紹要一排排出每個人的照片與職稱，這類需要多欄並排的版面，過去得靠寫 CSS 或額外裝排版外掛才做得出來。Grid 區塊把這套邏輯直接包進編輯器裡，不寫 CSS 也能拖拉設定出多欄版面，背後運作的原理是 Flexbox。
樣式面板裡能設定的項目包含要分成幾欄、欄與欄之間的間距，以及內容在欄位裡怎麼對齊，靠左、置中，還是撐滿。實務上 Grid 很少單獨使用，常見的巢狀做法是先放一個 Container 定出這一整段的寬度與背景，裡面再放一個 Grid 決定要分幾欄，每一欄再各自放一個 Container 當作獨立的欄位容器，欄位裡面才放文字、圖片或按鈕。
三種裝置各自獨立的中斷點設定
GenerateBlocks 的樣式面板不是只有一套設定套用到所有裝置，桌機、平板、手機可以個別切換設定不同的欄數、間距與對齊方式，這是它跟單純把區塊堆疊起來排版最大的差異之一，同一個 Grid 在桌機上是三欄並排，切到手機檢視時可以自動變成單欄或雙欄，不需要另外做一份手機版版面。
免費版就內建五組固定的裝置中斷點：桌機（螢幕寬度 1025 像素以上）、桌機與平板（768 像素以上）、平板（768 到 1024 像素之間）、平板與手機（1024 像素以下）、手機（767 像素以下）。這五組涵蓋了絕大多數常見裝置的檢視情境，一般網站排版並不太需要更細的切分。真的有特殊需求，例如要單獨處理某一款平板機型的顯示效果，Pro 版才開放自訂任意數量的自訂媒體查詢，可以自己定義中斷點的像素範圍。
Text 區塊統一管理標題與內文排版
一篇文章的標題、內文段落跟按鈕文字，原本在 GenerateBlocks 舊版裡要分別用 Headline、Text、Button 三個不同區塊處理，2.0 版之後這三者整併進同一套架構。插入區塊時可以直接選擇要輸出成標題、段落還是按鈕，甚至單純的 div 容器，本質上共用同一套樣式引擎。
跟 WordPress 原生的段落區塊或標題區塊比起來，Text 區塊多出的不是能不能顯示文字，而是樣式控制的深度。同一個區塊裡就能完整設定字型，可以選 Google 字型或自己上傳的本機字型，字級大小、字重粗細，以及字距等細節，不用切到主題自訂工具或另外寫 CSS 才調得到。
除了純文字，Text 區塊還能加入自訂的 SVG 圖示，讓文字前後搭配一個向量圖示一起顯示，常見用法像是清單項目前面加個打勾圖示，或標題旁邊放一個對應主題的小圖示。
Button 區塊決定行動呼籲的樣式和圖示
按鈕的顏色、漸層背景、邊框圓角、圖示搭配，這些常見的按鈕樣式需求，Button 區塊都能直接在面板裡調整，不需要另外寫 CSS。想在按鈕裡加圖示的話，可以用內建的圖示庫，也能貼上自己的 SVG 圖示碼，圖示可以放在文字左邊或右邊。
多顆按鈕要並排或堆疊，同樣靠 Container 或 Grid 搭配使用來處理版面。想要兩顆按鈕在桌機上同排並列、手機上自動改成上下堆疊，只要把幾顆 Button 放進同一個容器，再搭配前面提到的裝置中斷點設定調整排列方式即可，不用另外寫任何響應式的樣式規則。
實務上最常見的用法，是把一段標題文字、一段說明段落跟一到兩顆按鈕一起放進同一個 Container，當作一個完整的行動呼籲區塊。這種組合在著陸頁、方案比較區塊或文章結尾的引導區都很常見，而且因為 Text 跟 Button 共用同一套樣式引擎，整組視覺調起來會比分開裝好幾個外掛拼湊出來的版面更一致。
Image 區塊能固定放圖，也能動態抓文章特色圖
GenerateBlocks 處理圖片的區塊，在外掛清單裡叫做 Image，但從 2.0 版起，底層技術其實已經換成 Media 區塊，只是使用者在插入區塊時看到的名稱仍然是 Image，操作上沒有任何差別。圖片來源可以從媒體庫裡選一張既有的圖，也可以直接貼上外部網址讓區塊抓取。
這個區塊真正拉開差距的地方，是靜態圖片跟動態圖片的差別。靜態圖片就是手動選定的一張固定圖片，不管這個區塊被套用到哪裡都顯示同一張。開啟「Enable Dynamic Data」這個選項之後，圖片就能改成自動抓取目前這篇文章的特色圖片，而不是寫死某一張固定的圖。
動態圖片最常見的用法，是搭配後面會提到的 Query 區塊做出文章列表。列表裡每一張卡片理論上該顯示自己那篇文章的特色圖，如果每張卡片都用靜態圖片，等於要為每一篇文章手動換一次圖，非常沒有效率。改用動態圖片之後，同一個 Image 區塊套進列表的每一次循環，都會自動對應到當下那一篇文章各自的特色圖，不用手動調整。
Shape 區塊免裝外掛就能加自訂 SVG 造型
波浪、斜角、曲線這類裝飾性的造型，過去多半得靠額外的 SVG 外掛，或直接手刻一段 CSS 才做得出來。GenerateBlocks 把這件事整合成 Shape 這個可以直接拖拉設定的區塊。
樣式面板裡能調整的項目包含造型的顏色、擺放的位置、寬度與高度，也能水平翻轉造型，或調整它跟其他區塊的堆疊順序，擺在前面或蓋在後面。這些設定加起來，足以應付大部分裝飾性造型的常見需求，不用碰到任何一行程式碼。
最常見的用法是拿 Shape 當成兩個 Container 之間的視覺分隔，像是在一段深色背景區塊的底部加一道波浪造型，銜接到下一段淺色背景，讓版面的段落轉換不會太生硬。也有人拿它當背景裝飾，疊在文字或圖片後面增加層次感。
Query 區塊一次做完資料查詢和分頁
Query 是 GenerateBlocks 裡功能最完整的一個區塊，作用是依照文章類型、分類、標籤等條件抓取資料，自動排版並處理分頁，等於是進階版的文章列表區塊。免費版就能設定不少進階查詢參數，像是要抓哪個文章類型、哪個分類或標籤下的內容、要顯示幾筆、要不要排除目前正在瀏覽的這一篇。Pro 版則另外開放依「文章 meta 欄位」與「選項欄位」查詢，適合要抓取自訂欄位資料，例如商品價格、活動日期的進階需求。
這個區塊最常見的用法就是做出部落格文章列表，或是在單篇文章底部放一組相關文章的區塊，只要設定查詢條件是同分類且排除目前這篇就能自動抓出符合的文章。自訂文章類型，例如作品集、案例展示，也一樣適用，同一套 Query 邏輯不限定只能拿來抓一般文章。
Looper、Loop Item、No Results 與 Page Numbers 四個輔助區塊的分工
插入 Query 區塊時，編輯器會自動一併帶進四個輔助區塊，各自負責不同的工作。Looper 負責依照 Query 抓到的每一筆資料重複輸出版面，概念上相當於迴圈本身；Loop Item 則是迴圈裡每一筆資料實際顯示出來的容器，決定單篇文章在列表裡長什麼樣子。
No Results 負責處理查無資料的情況，當查詢條件抓不到任何內容時，就會改顯示這個區塊裡設定的內容，避免版面留白顯得像出錯。Page Numbers 則負責顯示分頁頁碼，讓文章數量超過單頁顯示上限時，讀者可以點頁碼切換到下一批內容。
這四個區塊組合起來，就是一組完整的文章列表加分頁版面：Query 負責定義要抓什麼資料，Looper 負責重複輸出，Loop Item 決定每一筆長什麼樣子，No Results 補上沒有資料時該顯示的內容，Page Numbers 處理資料太多需要分頁的情況。在編輯器的列表檢視裡把這五層結構展開，能一次看清楚整組查詢版面的巢狀關係，不用逐一點開每個區塊才搞懂彼此的從屬順序。
動態標籤讓內容跟著文章資料自動更新
文章標題、發布日期、特色圖片這些每篇文章都不一樣的資料，如果每次都要手動貼進區塊裡，等於每寫一篇文章就要重做一次版面。GenerateBlocks 的 Dynamic Tags 系統解決的正是這件事，插入任何區塊之後，內容會自動對應到目前文章或頁面的實際資料，同一個區塊也能疊加使用好幾組不同的動態標籤。
免費版能用的標籤已經涵蓋大部分常見情境，包括文章標題、摘要、永久連結、發布日期、特色圖片、文章與作者的中繼資料、留言數與留言網址、作者彙整頁網址、分類清單等。Pro 版另外開放跟站台層級、使用者層級相關的資料，像是彙整頁標題與描述、站台選項、分類與使用者的中繼資料、目前年份，以及專門給 Query 迴圈用的目前是第幾筆這類索引資訊。
實務上最常見的搭配，是把「文章標題」這個動態標籤插進 Query 列表裡的 Text 區塊，讓每一篇被抓出來的文章都自動顯示自己的標題，不用為列表裡的每一篇文章各寫一次標題文字。
共用樣式面板涵蓋字體、間距、色彩、漸層與背景
前面每個區塊各自介紹的樣式選項，其實都出自同一套共用的樣式引擎，只是依區塊類型顯示對應的欄位，正好呼應官方強調的學少數區塊、深度使用這個精神：樣式面板學一次，之後套用到任何區塊上幾乎都是同一套邏輯。
Typography 管理字型相關的一切，字型來源可以選 Google 字型或自己上傳的本機字型，大小、字重、字距都能個別微調。Spacing 管理間距與邊框，內距、外距、邊框粗細與圓角都能抓到像素級的精確度。Colors 把背景、邊框、連結與文字的顏色分開設定，而且顏色設定會從外層的 Container 往內層的內容延伸，不用每一層都重新指定一次。
Gradients 讓你在單色背景之外疊加雙色漸層，可以調整漸層方向與顏色停駐點的位置，常用來做出比純色更有層次的背景效果。Backgrounds 則專門處理背景圖片，能設定圖片的尺寸、位置與重複方式，做出滿版鋪滿或局部裝飾的背景圖效果。這五組欄位並不是每個區塊都會全部出現，而是依照這個區塊本身有沒有對應的用途，只顯示相關的那幾組。
免費版已經夠用，Pro 版加購的十多項進階功能
到目前為止介紹的 Container、Grid、Text、Button、Image、Shape、Query 這 7 個核心區塊，加上共用的樣式面板跟動態標籤系統，免費版本身就已經能做出網站絕大多數常見的版型，並不是一套殘缺、逼你升級的試用品。多數個人網站或部落格，光靠免費版就足夠應付日常的排版需求。
Pro 版加購的功能，對象比較明確是需要更複雜互動或多站點重複作業的使用者。以下逐項點名這些功能類別，方便判斷自己缺不缺：
- 樣板庫：內建 300 多組預建設計樣板，可以直接套用當起手式再自行調整，省下從零排版的時間。
- Global Styles（全域樣式）：設定一次就能套用到整個站台的樣式規則，改一次全站同步更新，不用逐頁重新調整。
- Overlay Panels（疊加面板）：彈出視窗、側滑面板這類需要蓋在原本版面上方顯示的互動元素。
- Conditional Display（條件顯示）：依裝置、頁面、使用者身分等條件控制某個區塊要不要顯示。
- Mega Menus（巨型選單）：導覽選單展開時能顯示更豐富的排版內容，而不只是一條條連結清單。
- Site Header Block 與 Navigation Block：直接在版面編輯器裡自訂網站標頭與導覽選單的排版。
- Effects（效果）：透明度、轉場這類 CSS 特效，直接在編輯器介面設定就能套用，不需要寫任何程式碼。
- Accordion 與 Tabs：用核心區塊組合出來的手風琴摺疊區塊與分頁籤區塊變體。
- 進階背景：漸層與圖片背景可以套用到任何裝置，搭配前面提到的裝置中斷點各自設定。
- Asset Library（素材庫）：內建常用圖示與造型素材，不用自己另外找 SVG 檔案。
- 複製貼上樣式：把一個區塊已經調好的樣式，快速套用到另一個區塊上，不用重新設定一次。
- Device Visibility（裝置顯示）：依裝置決定某個區塊要不要顯示，跟 Conditional Display 的差別在於這個功能專門針對裝置類型。
- Custom Attributes（自訂屬性）：能替區塊加上自訂的 data-* 屬性，方便串接自己的 JavaScript 或第三方工具。
- 自訂中斷點：免費版只有前面提到的五組固定中斷點，Pro 版可以自己建立任意數量的媒體查詢。
真的會用到這些功能的，多半是常態性要做彈出視窗、巨型選單，或同時管理好幾個站台希望共用同一套樣式規則的人。單純寫部落格或架設一般形象網站，免費版的 7 個區塊搭配樣式面板通常就綽綽有餘，不用急著升級。
Pro 版年繳一次，授權涵蓋五百個網站
免費版永遠不需要任何授權碼，裝上去就能一直免費使用，沒有時間限制，也不會因為到期就被鎖功能。想解鎖前面提到的 Pro 版功能，目前是單一方案的訂閱制：年繳 99 美元，一組授權可以用在最多 500 個網站，包括幫客戶架設維護的網站都算在內，但不能把授權金鑰轉售或分享給第三方代管。
如果本來就打算連 GeneratePress 主題的進階版一起買，官方另外有一個整合多項產品的訂閱方案叫 GeneratePress One，年繳 149 美元，一次涵蓋 GP Premium、GenerateBlocks Pro 與 GenerateCloud 三項產品的授權，同樣是 500 個網站的授權規模。三項分開單獨購買加起來要 257 美元，整合包省下 108 美元，但這個方案的定位是給本來就要買多項產品的人，只需要 GenerateBlocks Pro 單一功能的話，直接買單一方案就好，不必為了省錢硬湊多買不需要的東西。
不確定值不值得升級的話，官方提供 30 天內不滿意可以全額退款的保障，可以先試用 Pro 版一段時間，真的用不到再退款也不會有損失。這裡要提醒的是，坊間有些文章記載的定價方式已經是舊制，GenerateBlocks Pro 現在是單一方案，只有 99 美元一種選項，查資料時看到分成好幾個價位的版本，那多半是尚未更新的舊資訊。
回頭看最前面工具箱的比喻，GenerateBlocks 想做的事情很單純，與其在編輯器裡塞滿十幾個只能做一件事的外掛，不如把心力放在學好這幾個共用同一套樣式邏輯的區塊。免費版本身就足夠應付大多數版型，真正需要升級的情境，就是前面點名的那幾類進階功能。
下次要幫網站排一個新的版面之前，不妨先想一次：這個版面用 Container、Grid、Text、Button 這幾個現成的區塊組合，能不能直接排出來？多半答案是可以，而且比另外裝一支單一用途的外掛更省事，也更不容易讓網站因為外掛太多而變慢。