區塊編輯器 (Block editor)  Gutenberg 是 WordPress 2018 年更新 5.0 版本後加入於核心程式的編輯器。編輯器因為是原生 WordPress 給予的，因此完全免費提供給使用者使用。

除了免費使用，他也在速度上表現非常好，使用區塊編輯器往往比起使用頁面編輯器 (Page builder) 還要容易優化速度（幾乎不用做任何事）。而且在 RWD 版型上也已經預設好，完全不需要額外的設定。

想了解更多 Gutenberg 區塊編輯器內容，前往 Gutenberg 區塊編輯器介紹文章，或者區塊編輯器與頁面編輯器比較，了解兩者之間的優缺點差異。

在編輯頁面時，常用的 Gutenberg 區塊：

• 文字
• 標題
• 圖片
• 鑲嵌影片

這些區塊都讓整個編輯網站流程快速又簡單，但是… WordPress 提供的原生還是有其限制，光是區塊客製化選項就比起頁面編輯器還來得少，只是想要設定一下 radius 圓角就沒有辦法，也沒有陰影的選項… 

區塊編輯器的解決方案

所幸 WordPress 有個外掛程式這麼強大的功能支持，因此有非常多的外掛可以幫助我們解決這個問題，而且更重要的是，這些外掛程式都有提供免費版本！因此你也不用擔心會有大量額外的支出，整體來說我認為比起頁面編輯器還要來得划算。

區塊編輯器外掛可以協助你：

• 有更多區塊的客製化的選項，讓你很簡單的做到你希望的樣式與排版，不管是圓角方角、陰影、漸層，通通做得到！
• 龐大的設計庫，讓你很簡單複製貼上就可以有專業的設計與排版，時間不夠或沒想法的最佳功能！
• 一鍵式架站，你只需要按一個按鈕，你就可以產生完整的網站。你需要的頁面都幫你架設完畢了！

區塊編輯器外掛挑選準則

長期使用 WordPress 的用戶一定知道，外掛程式雖然這麼的多，但是挑選出好的外掛絕對是需要花上許多時間。

新手在挑選區塊編輯外掛時，常常因為廣告很華麗，或者設計版面很漂亮而以為這就是非常好的外掛軟體，但若沒有更加謹慎評估，往往會不小心踩雷，例如 Bug 很多或者速度優化很差…

平凡以上也不例外的要跟大家分幾個常用的挑選外掛的原則。

1. 速度優化
   使用 Gutenberg 區塊最重要的就是速度要夠快呀！因此速度絕對是優先考量的因素。
2. 穩定性
   每次 WordPress 的更新都是一場非常緊張的踩地雷冒險，因此穩定的外掛程式非常重要，總不能每次更新都在修正 Bug。
3. 功能性
   第三方外掛是否功能可以解決區塊編輯器的弱項，包括客製化選項、多樣化的設計樣式、以及動畫區塊、排版區塊等等。
4. 維護團隊
   外掛程式是以第三方公司所維護與管理更新，因此穩定品質的維護非常重要，如果有遇到 Bug，修正 Bug 速度也在評估範疇之內，且要看第三方公司每次端出來的產品是否有符合他們當初承諾的品質。
5. 代碼結構
   良好的代碼結構會讓維護或者後續的功能開發更加順利，甚至是簡潔的 DOM 不僅讓工程師好懂、讀取速度更快，如果你有學習 css 也可以更輕鬆找到修改的代碼，讓你客製化更加容易。

區塊編輯器外掛推薦

根據上述的原則，平凡以上整理出了 5 個非常好用的外掛要與大家分享。

Stackable

Stackable 真的是新手的福音，有著大量的設計庫與簡單的區塊，隨隨便便就可以做到超好看的排版。

Stackable 也是第一款推出的 Gutenberg 外掛，有著豐富的經驗與創新的作法，絕對是值得嘗試的產品。

Stackable 優點

• 免費版一般用戶就可以幾乎做到所有需求！
• 與佈景主題 Blocksy 有完美整合～
• 提供了 35+ 進階區塊供使用
• 免費版提供 8 款 UI kit，付費版提供 31款 UI kit 設計組合，一致化設計
• 免費提供 100 設計區塊，付費版更是高達 382 設計區塊！
• 簡易拖拉式設計 Drag and Drop
• 程式超輕，~7.8kb JS檔案，並且前端只載入必要的 css 與 js 檔案
• 付費版更提供了動畫、動態資料、分頁、角色管理等進階功能，完全支援商用接案！

Stackable 缺點

• 相較於其他區塊外掛價格較昂貴
• v3 最新版本稍嫌不成熟

*最近更新 v3 版本在速度優化上有待加強，相較於 v2 版本，v3 版本我認為還是未成熟的產品。然而根據 Stackable 過去的品質表現，其產品優化指日可待。

Stackable 價格

Stackable 免費版真的就非常好用！當然若您需要商用或者需要完整版也可參考付費版本。還有提供一次性付費版 499 美金買斷制與 149 美金一年訂閱制的彈性付費方案。

Stackable 也是平凡以上所有課程主力的教學外掛！歡迎大家來上課。

Kadence Block

如果你在找區塊客製化選項最齊全也最成熟的 Gutenberg 外掛，Kadence 絕對是你的首選！有許多進階的使用者都是以 Kadence 為主力在排版與編輯頁面。（我也是！）

他的設計庫或許沒有這麼華麗這麼好看，然而他所提供的客製化選項太多了！因此你要任何的排版以及控制項目幾乎都可以實現，且其穩定性非常的高，背後團隊陣容非常強大，不僅僅只是區塊產品，他們背後團隊還有推出 Kadence 佈景主題也是不容錯過的好商品。

Kadence Block 優點

• 穩定性極高，速度非常快！我認為他們的技術人員很強～
• 區塊的客製化選項非常多，幾乎可以做到所有排版需求。
• RWD 控制項目非常多，若要客製化排版，選他就對了！
• 免費版提供 15+ 區塊，付費版提供 27+ 區塊供使用
• 內建免費表格區塊，強化 Gutenberg 缺乏的區塊之一
• 付費版內建模組區塊 (Modal Block)，強化 Gutenberg 功能

Kadence Block 缺點

• 設計庫很基本
• 區塊客製化選項多到需要花時間熟悉

Kadence Block 價格

Kadence 免費版功能性就多到爆炸，也可以做到幾乎你想得到的排版方式。

他也有提供付費版的方案，最便宜 69美金/年 就可以架設無限網站。他也提供付費版的主題與更多 Kadence 延伸功能，因為不是以網站數量在定價而是以功能性在定價，價格 CP 值真的很高，若有需要也可以做選擇。

比較可惜的是如果要一次性買斷，就需要支付到 699 美金，且全部包括主題或延伸功能都要一起購買，無法只單買 Kadence Block Pro。

Genesis Block

Genesis Block 是由知名主機商 WP Engine 所開發的外掛軟體，他們也有開發 StudioPress 這個佈景主題。而旗下的 Genesis Framework 更是許多開發人員熱愛的主題架構！

Genesis Block 的開發方式大部分都是基於 Gutenberg Block 修改而成，因此他的速度非常快速，我認為使用上他們應該體感是最快的區塊編輯外掛，然而他們較多功能性區塊就需要升級成付費版本才可以使用。

如果你要快速撰寫一個頁面，快速的開發，非常適合使用 Genesis Block。但如果你要些比較進階的功能，就只能使用付費版本了。

Genesis Block 優點

• 速度極快
• 沒有太多控制項目，簡約好上手
• WP Engine 開發團隊，後台很硬

Genesis Block 缺點

• 設計庫較少、較簡約
• 進階功能區塊在付費版

Genesis Block 價格

Genesis Pro 付費版不只有販售 Genesis Block 付費版，他需要連同 StudioPress 主題以及其他進階功能一起購買，價格為 360美元/年，我認為這比較適合進階的開發者購買使用，雖然價格相較其他外掛高，但他的代碼乾淨度以及穩定性跟專業度絕對是值得這個價錢。

Gutenberg Block Editor Plus

相較於其他前面所介紹的外掛，這個 Editor Plus 外掛比較屬於擴充你原有的 Gutenberg 功能。

你可以新增圓角、增加陰影、改變寬度等等，更重要的是你在使用上可以跟 Gutenberg hub 這個網站做連結。

這個網站提供了超過 200+ 以上的區塊與網站頁面，只需要複製貼上就能夠使用。

而且他使用的區塊都是 Gutenberg 原生區塊，完全不用擔心效能受到影響，你就可以有高級的排版設計。

更重要的是他完全免費的使用！

Editor Plus的優點

• 免費使用，完全不用錢
• Gutenberg 原生擴充，更多控制項目，用起來很像 Page Builder
• 搭配 Gutenberg hub 版型設計區塊非常多

Editor Plus的缺點

• 編輯器本身沒有華麗的外表
• 有時要跳到 Gutenberg hub 要再開個新分頁，有點麻煩

Editor Plus 價格

完全免費！

Generate Block

我認為這款外掛適合凡事都從 0 開始的架站者，也就是連圖片你都要用自己的，排版也自己設計。

因為 Generate Block 僅僅只提供了 4 個區塊！也因著只提供 4 個區塊，你可以非常快速的上手。

團隊開發能力非常堅強，堪稱最穩定最乾淨的 Coding 外掛也不為過，旗下的 GeneratePress 主題更是令人驚訝！他們號稱第一個 Block Base 編輯主題的開發團隊！

Generate Block 優點

• 提供4個區塊，簡易上手
• 超級乾淨的代碼，完全不擔心拖垮網站速度
• 開發團隊堅強，穩定性超高，令人安心
• 付費版提供更多控制項目
• 付費版設計庫多達 150+

Generate Block 缺點

• 設計庫只有付費版才有
• 提供區塊少，凡事自己排版

Generate Block 價格

付費方式採取訂閱制，最便宜 39美金/年！

如何安裝 Gutenberg 外掛？

安裝區塊編輯器外掛與其他外掛方式一樣，本篇以安裝 Stackable 示範。

Gutenberg Block 常見問題

相信你看完這本篇文章，對於 Gutenberg 第三方外掛有一定程度了解，不過平凡以上還是列上使用者在使用 Gutenberg 外掛時會遇到的常見問題。

Summary

此篇介紹許多 Gutenberg 的第三方外掛供你參考，希望可以幫助到你更近一步評估你需要安裝的外掛。

通常為了方便管理與速度考量，我會建議使用者安裝 2 個第三方區塊就好，若版本更新或遇到 Bug 比較容易維護與修復。超過 2 個速度上還可以接受，但在管理上可能就會比較不容易。

祝福大家都能找到自己適合與精熟的第三方區塊外掛！一起做出富含設計感的網站吧～

*平凡以上使用 Kadence 與 Stackable 為主要編輯頁面外掛。