WordPress自定義古騰堡編輯器的漸變色

在《WordPress 5.4 新增編輯器的漸變色自定義API》中，我們已經(jīng)提到了這個(gè)新的api機(jī)制，而且也給出了基本的操作指導(dǎo)，今天繼續(xù)來詳細(xì)說下這個(gè)實(shí)現(xiàn)方式。

從WordPress 5.4開始，古騰堡（Gutenberg）中的漸變色工具已經(jīng)正式可用，但是自帶的默認(rèn)漸變色選項(xiàng)可能不一定適配我們的主題，通過自定義漸變色選項(xiàng)，可以更加方便主題的使用者。

設(shè)置自定義漸變色

我們可以通過下面的代碼移除默認(rèn)的漸變色，以及添加自己的漸變色：

<?php
/**
 * theme_custom_gradients.
 *
 * Add custom gradients to the Gutenberg editor.
 *
 * @see https://since1979.dev/snippet-011-custom-gutenberg-gradient-colors/
 *
 * @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
 */
function theme_custom_gradients()
{
    add_theme_support('editor-gradient-presets', array(
        array(
            'name' => __('Light blue to white', 'your-textdomain'),
            'gradient' => 'linear-gradient(180deg, rgba(0,101,155,0.5) 0%, rgba(255,255,255,1) 100%)',
            'slug' => 'light-blue-to-white'
        ),
        array(
            'name' => __('Blue to white', 'your-textdomain'),
            'gradient' => 'linear-gradient(180deg, rgba(0,101,155,1) 0%, rgba(255,255,255,1) 100%)',
            'slug' => 'blue-to-white'
        ),
        array(
            'name' => __('Dark blue to white', 'your-textdomain'),
            'gradient' => 'linear-gradient(180deg,rgba(29,39,53,1) 0%,rgba(255,255,255,1) 100%)',
            'slug' => 'dark-blue-to-white',
        ),
        array(
            'name' => __('Blue to dark blue', 'your-textdomain'),
            'gradient' => 'linear-gradient(180deg, rgba(0,101,155,1) 0%, rgba(29,39,53,1) 100%)',
            'slug' => 'blue-to-dark-blue'
        ),
        array(
            'name' => __('Light blue to black', 'your-textdomain'),
            'gradient' => 'linear-gradient(180deg, rgba(0,101,155,0.5) 0%, rgba(0,0,0,1) 100%)',
            'slug' => 'light-blue-to-black'
        ),
        array(
            'name' => __('Blue to block', 'your-textdomain'),
            'gradient' => 'linear-gradient(180deg,rgba(0,101,155,1) 0%,rgba(0,0,0,1) 100%)',
            'slug' => 'blue-to-black',
        ),
    ));
}

/**
 * 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', 'theme_custom_gradients');
?>

通過上面的代碼，我們將一個(gè)操作添加到after_setup_theme鉤子中，并注冊(cè)一個(gè)名為theme_custom_gradients的回調(diào)函數(shù)。

在theme_custom_gradients函數(shù)內(nèi)部，我們使用add_theme_support函數(shù)來使主題支持editor-gradient-presets。然后，通過第二個(gè)參數(shù)，傳遞一個(gè)包含定義自定義漸變顏色的數(shù)組的數(shù)組。

每個(gè)子數(shù)組包含三個(gè)鍵/值對(duì)。即：

• $name: 我們要在編輯器中顯示的名稱。請(qǐng)注意，我們使用__()函數(shù)使這些名稱可翻譯。
• $gradient: 實(shí)際的漸變。查看Css線性漸變來了解更多信息
• $slug: 一個(gè)唯一的slug別名，我們可以在CSS中使用它來設(shè)置實(shí)際的漸變。

在CSS中添加漸變色樣式

為了使?jié)u變真正在我們的主題中起作用，我們必須為每個(gè)漸變添加一點(diǎn)CSS樣式代碼，如下所示：

// Light blue to white
.has-light-blue-to-white-gradient-background {
    background: linear-gradient(180deg, rgba(0,101,155,0.5) 0%, rgba(255,255,255,1) 100%);
}

// Blue to white
.has-blue-to-white-gradient-background {
    background: linear-gradient(180deg, rgba(0,101,155,1) 0%, rgba(255,255,255,1) 100%);
}

// Dark blue to white
.has-dark-blue-to-white-gradient-background {
    background: linear-gradient(180deg, rgba(0,101,155,1) 0%, rgba(255,255,255,1) 100%);
}

// Blue to dark blue
.has-blue-to-dark-blue-gradient-background {
    background: linear-gradient(180deg, rgba(0,101,155,1) 0%, rgba(29,39,53,1) 100%);
}

// Light blue to black
.has-light-blue-to-black-gradient-background {
    background: linear-gradient(180deg, rgba(0,101,155,0.5) 0%, rgba(0,0,0,1) 100%);
}

// Blue to black
.has-blue-to-black-gradient-background {
    background: linear-gradient(180deg,rgba(0,101,155,1) 0%,rgba(0,0,0,1) 100%);
}

禁用古騰堡漸變色

在某些情況下，我們可能想禁用掉漸變色功能。這時(shí)候，我們可以使用下面的代碼片段實(shí)現(xiàn)：

<?php
/**
 * disable_editor_gradients.
 *
 * Disable gradient coors in the gutenberg editor.
 *
 * @see https://since1979.dev/snippet-011-custom-gutenberg-gradient-colors/
 *
 * @uses add_theme_support() https://developer.wordpress.org/reference/functions/add_theme_support/
 * @uses array() https://www.php.net/manual/en/function.array.php
 */
function disable_editor_gradients()
{
    add_theme_support('disable-custom-gradients');
    add_theme_support('editor-gradient-presets', array());
}

/**
 * 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_editor_gradients');
?>

使用上面的代碼，我們將一個(gè)操作添加到after_setup_theme鉤子中，并注冊(cè)一個(gè)名為disable_editor_gradients的回調(diào)函數(shù)。

在disable_editor_gradients函數(shù)內(nèi)部，我們使用add_theme_support函數(shù)添加對(duì)disable-custom-gradients的支持。然后，我們還為editor-gradient-presets主題支持設(shè)置了一個(gè)空數(shù)組，以刪除默認(rèn)漸變。

內(nèi)容參考：https://since1979.dev/snippet-011-custom-gutenberg-gradient-colors/