如果你在使用古騰堡編輯器的“按鈕”區(qū)塊時(shí)，點(diǎn)擊樣式選項(xiàng)卡，會(huì)發(fā)現(xiàn)可以選擇“填充”或“輪廓”樣式。那么，如果我們想添加更多的樣式選項(xiàng)怎么辦呢？或者想為其他區(qū)塊添加自定義的樣式選項(xiàng)呢？為需要的樣式單獨(dú)開發(fā)一個(gè)區(qū)塊嗎？其實(shí)不需要這么復(fù)雜。在本文中，我將向大家展示如何將自定義樣式選項(xiàng)添加到現(xiàn)有的區(qū)塊中，簡(jiǎn)化你的操作流程。
如何注冊(cè)新的區(qū)塊樣式
要使用 PHP 注冊(cè)新的區(qū)塊樣式，我們需要使用 register_block_style 函數(shù)。該函數(shù)需要$block和$style_properties 參數(shù)。$block 參數(shù)指定了需要添加自定義樣式的區(qū)塊，$style_properties 指定了自定義樣式的一些屬性。
下面是向 List 區(qū)塊添加新的 “Plain “樣式的示例：
function wprs_register_block_styles() {
register_block_style(
'core/list',
[
'name' => 'list-plain',
'label' => 'Plain',
]
);
}
add_action( 'init', 'wprs_register_block_styles' );添加了上面的代碼后，在使用 List 區(qū)塊后，我們將看到一個(gè) 「Plain」樣式，如下圖所示。
在上面示例中，我使用了 “core/list “作為 $block 參數(shù)，而不僅僅是 “list”。WordPress 的所有默認(rèn)區(qū)塊名稱都以這種方式作為前綴。如果你不確定區(qū)塊的正確名稱，請(qǐng)查看WordPress 所有核心區(qū)塊的列表。
此外，我們?yōu)樽远x樣式提了了兩個(gè)屬性（必填屬性）：名稱和標(biāo)簽。標(biāo)簽將用作古滕堡編輯器界面中的文本，而名稱將用于以 is-style-{name} 格式添加到區(qū)塊中的類名。
目前為止，我們已經(jīng)學(xué)習(xí)了如何注冊(cè)自定義區(qū)塊樣式，你可以在 Gutenberg 編輯器中選擇這些樣式。但是，這實(shí)際上不會(huì)讓你的區(qū)塊看起來有任何不同，因?yàn)槲覀冞€沒有為這些樣式添加添加CSS代碼，下一步，我們需要為指定的類名添加需要的CSS代碼。
為自定義區(qū)塊樣式添加CSS代碼
當(dāng)我們選擇區(qū)塊樣式時(shí)，WordPress 會(huì)將 classname格式的 is-style-{name}插入到區(qū)塊的 class 屬性中，我們可以用它來定位元素。
比方說，我們想在網(wǎng)站上添加一個(gè)復(fù)選框列表樣式類型，那么就可以像這樣注冊(cè)樣式：
function wprs_register_checkmark_list_style() {
register_block_style(
'core/list',
[
'name' => 'list-checkmark',
'label' => 'Checkmark',
]
);
}
add_action( 'init', 'wprs_register_checkmark_list_style' );然后，你就可以在網(wǎng)站中添加以下 CSS，為列表應(yīng)用自定義的復(fù)選框樣式：
@counter-style checkmark {
system: cyclic;
symbols: "\2713";
suffix: " ";
}
.wp-block-list.is-style-list-checkmark {
list-style: checkmark;
}我們只需要將 CSS 添加到主題的 style.css 文件、WP 自定義 CSS 中，添加的樣式就能在網(wǎng)站前端正常顯示了。
添加自定義樣式到區(qū)塊編輯器
更進(jìn)一步，我們需要把自定義添加添加到區(qū)塊編輯器中，以便在選擇自定義樣式時(shí)，能夠在區(qū)塊編輯器中實(shí)時(shí)中看到我們的選擇。
要在注冊(cè)樣式的同時(shí)注冊(cè) CSS，我們可以通過以下兩種方法：
- 自定義樣式表：你可以向 register_block_style 函數(shù)傳遞 “style_handle “屬性，其中包含已注冊(cè)樣式表的名稱。當(dāng)把區(qū)塊添加到文章內(nèi)容中時(shí)，WordPress 會(huì)自動(dòng)加載 CSS 文件。
- 內(nèi)聯(lián) CSS：你可以在 “inline_style “屬性中輸入希望應(yīng)用于自定義區(qū)塊樣式的 CSS。
下面的示例代碼展示了這兩種方法：
function wprs_register_block_styles_with_css() {
// Style that loads stylesheet.
register_block_style(
'core/list',
[
'name' => 'list-example-one',
'label' => 'Example One',
'style_handle' => 'list-example-one-style-handle'
]
);
// Style that adds inline CSS.
register_block_style(
'core/list',
[
'name' => 'list-example-two',
'label' => 'Example Two',
'inline_style' => '.wp-block-list.is-style-list-example-two { list-style: square; }',
]
);
}
add_action( 'init', 'wprs_register_block_styles_with_css' );在如果自定義CSS比較簡(jiǎn)單，我建議使用 inline_style 屬性。這將使你的網(wǎng)站更快，因?yàn)樗恍枰虞d第三方依賴。添加完自定義CSS之后，我們?cè)龠x擇 「Checkmark」樣式，就會(huì)得到如下圖所示的列表。
如何將自定義樣式設(shè)為默認(rèn)樣式
雖然并不推薦，但是如果你愿意，我們也可以將自定義樣式設(shè)置為默認(rèn)樣式，只需將is_default屬性傳遞給數(shù)組即可，如下所示：
register_block_style(
'core/list',
[
'name' => 'list-new-default',
'label' => 'New Default',
'is_default' => true, // ADD THIS.
]
);現(xiàn)在，只要你插入目標(biāo)區(qū)塊（本例中為 List），你的自定義樣式就會(huì)被用作默認(rèn)樣式。
重要：當(dāng)自定義樣式被設(shè)置為默認(rèn)樣式時(shí)，意味著在選中區(qū)塊時(shí)，不會(huì)向其添加自定義類名，我們需要在開發(fā)主題的時(shí)候，直接把默認(rèn)樣式寫好到CSS中。
本教程中，我們介紹了怎么添加自定義樣式選項(xiàng)帶現(xiàn)有的區(qū)塊，有了這個(gè)基礎(chǔ)，在開發(fā)WordPress主題和插件時(shí)，我們就可以根據(jù)我們的需要，為WordPress默認(rèn)的區(qū)塊添加自定義樣式選項(xiàng)了，這是一種情況及的自定義區(qū)塊方案，不用開發(fā)新的區(qū)塊，就可以實(shí)現(xiàn)區(qū)塊樣式的個(gè)性化。
