想讓某一段引言加上邊框、讓某張圖滑進畫面、或是把清單的圓點換成方塊，卻不知道從哪裡下手，這幾乎是每個剛接觸區塊編輯器的人都會卡住的地方。打開右側設定欄，會看到一個叫「樣式」的面板，再點進「進階」又有一欄「額外 CSS 類別」，兩個東西長得不一樣、用法也不一樣，新手很容易搞混。
WordPress 區塊樣式其實是一整套機制，從不用寫任何程式碼就能切換的內建樣式、到自己填一個 class 名稱再搭配 CSS、再到用程式碼註冊一個全站可重複使用的新樣式，難度是階梯狀的。這篇會把這三層拆開講清楚，並聚焦在新手最常用、門檻最低的「額外 CSS 類別」欄位該怎麼正確使用。
區塊樣式是什麼，跟「額外 CSS 類別」差在哪
區塊樣式指的是區塊編輯器內建的視覺變化選項，讓你不必動 CSS 就能切換某個區塊的外觀；額外 CSS 類別則是另一個欄位，讓你親手替區塊掛上一個 class 名稱，之後再用 CSS 去控制它。兩者都是在控制樣式，但運作方式不同。
先看內建的「樣式」面板。選取一個按鈕區塊，右側設定欄會出現「樣式」區段，裡面通常有「填滿」和「外框」兩種選項，點一下就立刻換外觀。這就是區塊樣式變化（block style variation），由佈景主題或 WordPress 核心預先定義好。
關鍵在於：當你選了某個內建樣式，WordPress 背後做的事，其實就是替這個區塊塞上一個 class，格式是 is-style-{名稱}。例如按鈕選了外框樣式，原始碼裡就會多出 is-style-outline。換句話說，內建樣式面板，本質上是一個「幫你自動填 class」的捷徑。
理解了這層，「額外 CSS 類別」就好懂了。它放在右側設定欄的「進階」區段裡，是一個讓你手動輸入 class 名稱的文字框。你填什麼，這個區塊輸出的 HTML 就會帶上那個 class。差別只在於：內建樣式的 class 是別人寫好的、連 CSS 也一併準備好了；而額外 CSS 類別的 class 是你自己取的，對應的 CSS 也得你自己補。
額外 CSS 類別欄位在哪裡，怎麼填才不會出錯
額外 CSS 類別欄位的位置固定在：選取區塊後，右側設定欄的「區塊」分頁，往下捲到「進階」，展開後就能看到「額外 CSS 類別」這一欄。如果右側設定欄沒出現，點右上角那個齒輪（設定）圖示叫出來即可。
填寫時有幾個新手最常踩的雷，先記住規則再動手：
- 不要在前面加句點：寫 CSS 時我們用
.box來選取 class，但在這個欄位裡只填純名稱box，不要加點。點是 CSS 選擇器的語法，欄位本身已經知道你填的是 class。 - 要加多個 class 用半形空白分隔：例如
card highlight，這樣這個區塊就同時帶上card和highlight兩個 class。不要用逗號，也不要用句點。 - 名稱建議用連字號串接：像
note-box、red-border，可以是單一個英文單字，也可以多個單字用連字號連起來。避免空格（空格會被當成兩個 class）。 - 不要撞到既有的 class：佈景主題和外掛已經用掉很多常見字眼，例如
button、active、container。取一個獨特一點、不太可能跟別人重複的名字，才不會被既有樣式干擾或反過來干擾別人。
填好之後，這個 class 並不會自己長出樣式，它只是一個掛勾。真正讓區塊變漂亮的，是接下來你寫的那段 CSS。
填好 class 之後，CSS 要寫在哪裡
填了 class 只是替區塊貼上標籤，接著得在某個地方寫 CSS 去對應這個標籤，樣式才會生效。台灣讀者最常用、也最不會出錯的位置，是後台的「附加的 CSS」。
到左側選單的「外觀」，點「自訂」進入即時預覽介面，裡面有一個「附加的 CSS」區段。在這裡貼上你的 CSS 規則，左側即時預覽會馬上反映，確認沒問題再按上方「發佈」。這個位置的好處是改動跟著佈景主題走、不會散落在文章內容裡，集中管理最省心。
舉個實際例子。假設你在某段引言區塊的額外 CSS 類別填了 note-box，想做成有底色和左側粗邊框的提醒框，就到附加的 CSS 寫：
.note-box {
background: #f6f6f6;
border-left: 4px solid #d97706;
padding: 16px 20px;
}
存檔後，凡是掛了 note-box 這個 class 的區塊都會套上這個外觀，你可以在多篇文章、多個區塊重複使用同一個名字，樣式一次到位。
除了「附加的 CSS」，還有兩個地方也能放 CSS，依情況選擇：
- 單一區塊的「進階 → 額外 CSS」欄位：較新版本的編輯器在「進階」區段除了 class 欄位，還多了一個可以直接寫 CSS 的欄位，只作用在這一個區塊。適合只想改某一處、不打算重複使用的一次性微調。
- 區塊主題的全站編輯：如果你用的是區塊佈景主題（採用全站編輯的那種），自訂 CSS 會改放在「外觀 → 編輯器」介面的樣式設定裡，邏輯相同，只是入口不同。
不熟悉自己的主題是哪一種也沒關係，先在「外觀」選單下找「自訂」，找得到就用附加的 CSS；找不到、只看到「編輯器」，那就是區塊主題，從全站編輯的樣式面板進去。
不用寫 CSS 就能用的內建 class
WordPress 其實內建了一批預先定義好的 class，直接填進額外 CSS 類別欄位就能生效，完全不必自己寫 CSS。這對還沒準備好碰 CSS 的新手特別實用。
常見的幾個包括：
has-drop-cap：讓段落區塊的第一個字放大成首字下沉效果，像雜誌排版那樣。移除這個 class 效果就消失。alignwide與alignfull：讓區塊寬度超出內容欄、甚至撐滿整個瀏覽器寬度（需要佈景主題支援寬版與全寬對齊才有效果）。has-large-font-size、has-huge-font-size：快速放大文字尺寸，不必自己定義字級。aligncenter、alignleft、alignright：控制對齊。
要提醒的是，這些內建 class 會不會生效、效果長什麼樣，取決於你的佈景主題有沒有支援與如何定義。有些主題會覆蓋掉這些預設樣式，所以同一個 class 在不同主題上表現可能不同，套了沒反應先別急著怪自己填錯。
想讓樣式變成可重複選的選項，就用程式碼註冊
如果某個樣式你會在很多地方反覆用到，與其每次手動填 class，不如把它註冊成內建樣式面板裡的一個選項，之後選取區塊就能直接點選切換。這一步需要寫一點 PHP，屬於開發者向，但原理跟前面是連貫的。
WordPress 提供 register_block_style 函式來做這件事。它接收兩個東西：要套用到哪個區塊（$block），以及這個樣式的屬性（$style_properties，至少要有 name 和 label）。下面這段示範替清單區塊新增一個叫「Checkmark」的樣式選項：
function my_register_block_styles() {
register_block_style(
'core/list',
[
'name' => 'list-checkmark',
'label' => 'Checkmark',
]
);
}
add_action( 'init', 'my_register_block_styles' );
幾個重點。第一，core/list 是清單區塊的正式名稱，WordPress 的核心區塊名稱都帶 core/ 前綴，不確定區塊叫什麼可以查官方核心區塊清單。第二，label 是顯示在編輯器樣式面板上的文字，name 則會被組成 is-style-list-checkmark 這個 class 掛到區塊上——又回到了 is-style-{名稱} 這個機制。
註冊完只是多了一個可選項，還沒有任何視覺變化，因為對應的 CSS 還沒寫。你可以一樣到附加的 CSS 去補：
.wp-block-list.is-style-list-checkmark {
list-style: "2713 ";
}
或是在註冊時就把 CSS 一起帶上，register_block_style 支援兩種屬性：inline_style 直接內嵌一段 CSS 字串，style_handle 則指向一個已註冊的樣式表。CSS 量很少時建議用 inline_style，省去額外載入檔案、網站反應更快。
那到底該用額外 CSS 類別，還是註冊區塊樣式？判斷標準很單純：一次性、只在某篇文章某個區塊用一次的微調，填額外 CSS 類別最快；會在全站不同地方重複套用、希望編輯時點一下就能切換的，就值得花力氣註冊成正式的區塊樣式選項。
套了沒效果？先檢查這幾個地方
樣式沒生效是新手最常遇到的狀況，多數時候不是 CSS 寫錯，而是卡在幾個固定環節。依序排查通常就能找到問題。
第一，回頭看額外 CSS 類別欄位有沒有不小心加了句點，欄位裡只填名稱、不加點。第二，確認 CSS 選擇器裡的 class 名稱跟欄位填的完全一致，大小寫、連字號都要對得上。第三，考慮特異性問題——佈景主題本身的樣式可能比你寫的更「強」，把你的設定蓋掉，這時可以把選擇器寫得更明確（例如加上區塊本身的 class .wp-block-quote.note-box）來提高優先權。第四，有些虛擬主機方案或 WordPress.com 的部分方案會限制自訂 CSS 功能，若連「附加的 CSS」欄位都找不到，可能是方案層級的限制。
從內建樣式面板、到自己填一個 class 再寫 CSS、再到用 register_block_style 註冊成可重複選的選項，這三層其實是同一套 is-style 機制的不同入口。先從最簡單的內建 class 和額外 CSS 類別練手，熟悉 class 與 CSS 怎麼對應之後，再進一步嘗試註冊自己的樣式，網站的視覺一致性與編輯效率都會跟著提升。現在就打開一個區塊，到「進階」填上你的第一個 class，動手試一次最快。