古騰堡（Gutenberg）編輯器可以為段落等區(qū)塊設(shè)置文本顏色和背景色等，而且調(diào)色板中提供了12種默認(rèn)顏色：
但是這些顏色可能不一定適配我們的主題，雖然也支持自定義設(shè)置，但是如果我們將這些默認(rèn)顏色選項(xiàng)統(tǒng)一修改了，用戶(hù)只需直接點(diǎn)擊即可應(yīng)用，對(duì)用戶(hù)來(lái)說(shuō)那就極為便利了。
自定義古騰堡顏色調(diào)色板
要實(shí)現(xiàn)上圖右邊的自定義配色方案，可以使用下面的代碼：
<?php
/**
* change_gutenberg_color_palette.
*
* Add theme support for editor-color-palette,
* and set colours for the gutenberg colour pallete.
*
* @see https://since1979.dev/wp-snippet-002-changing-the-gutenberg-color-palette/
*
* @uses add_theme_support() https://developer.wordpress.org/reference/functions/add_theme_support/
* @uses __() https://developer.wordpress.org/reference/functions/__/
* @uses array() https://www.php.net/manual/en/function.array.php
*
* @return void
*/
function change_gutenberg_color_palette() {
add_theme_support( 'editor-color-palette', array(
array(
'name' => __('Blackish', 'your-textdomain'),
'slug' => 'blackish',
'color' => '#323232',
),
array(
'name' => __('Whiteish', 'your-textdomain'),
'slug' => 'white',
'color' => '#eeeeee',
),
array(
'name' => __('White', 'your-textdomain'),
'slug' => 'white',
'color' => '#ffffff',
),
array(
'name' => __('Dark blue', 'your-textdomain'),
'slug' => 'dark-blue',
'color' => '#1d2735',
),
array(
'name' => __('Blue', 'your-textdomain'),
'slug' => 'blue',
'color' => '#00659b',
),
array(
'name' => __('Light blue', 'your-textdomain'),
'slug' => 'light-blue',
'color' => '#4999ca',
),
));
}
/**
* Hook: after_setup_theme.
*
* @uses add_action() https://developer.wordpress.org/reference/functions/add_action/
* @uses after_setup_theme https://developer.wordpress.org/reference/hooks/after_setup_theme/
*/
add_action( 'after_setup_theme' , 'change_gutenberg_color_palette' );使用上面的代碼，我們將一個(gè)操作添加到after_setup_theme鉤子中，并注冊(cè)一個(gè)名為change_gutenberg_color_palette的回調(diào)函數(shù)。
在change_gutenberg_color_palette函數(shù)中，我們使用add_theme_support函數(shù)來(lái)啟用editor-color-palette主題支持。然后在第二個(gè)參數(shù)，傳遞一個(gè)包含定義自定義顏色的數(shù)組的數(shù)組。
每個(gè)子數(shù)組包含三個(gè)鍵/值對(duì)。即：
$name: 我們要在編輯器中顯示的名稱(chēng)。請(qǐng)注意，我們使用__()函數(shù)使這些名稱(chēng)可翻譯。$slug: 一個(gè)唯一的 slug 別名，我們可以在CSS中使用它來(lái)更改實(shí)際顏色。$color: 十六進(jìn)制顏色值。
添加自定義CSS樣式代碼
為了使顏色真正在我們的主題中起作用，我們必須為每種顏色添加一些CSS，如下所示：
// Blackish
.has-blackish-background-color {
background-color: #323232;
}
.has-blackish-color {
color: #323232;
}
// Whiteish
.has-whiteish-background-color {
background-color: #eeeeee;
}
.has-whiteish-color {
color: #eeeeee;
}
// 等等...禁用自定義顏色選擇器
上面的代碼可以使我們的用戶(hù)能夠使用自定義顏色選擇器制作自己的顏色。如果你希望用戶(hù)只能從上面的默認(rèn)顏色中選擇，不可以自定義顏色，可以通過(guò)下面的代碼實(shí)現(xiàn)：
<?php
/**
* disable_custom_color_picler.
*
* Disable the custom color selector of the gutenberg color palette,
*
* @see https://since1979.dev/wp-snippet-002-changing-the-gutenberg-color-palette/
*
* @uses add_theme_support https://developer.wordpress.org/reference/functions/add_theme_support/
*/
function disable_custom_color_picker()
{
add_theme_support('disable-custom-colors');
}
/**
* Hook: after_setup_theme.
*
* @uses add_action() https://developer.wordpress.org/reference/functions/add_action/
* @uses after_setup_theme https://developer.wordpress.org/reference/hooks/after_setup_theme/
*/
add_action('after_setup_theme', 'disable_custom_color_picker');使用上面的代碼，我們向after_setup_theme鉤子添加了另一個(gè)操作，并注冊(cè)了一個(gè)名為disable_custom_color_picker的回調(diào)函數(shù)。
在disable_custom_color_picker函數(shù)內(nèi)部，我們?cè)俅问褂?code>add_theme_support函數(shù)，但這一次我們添加了對(duì)disable-custom-colors的支持。
如下圖所示，這會(huì)從面板上刪除“自定義顏色”鏈接。
內(nèi)容參考：https://since1979.dev/wp-snippet-002-changing-the-gutenberg-color-palette/
