WordPress Customizes the gradient colors of the Gutenberg Editor
In “WordPress 5.4 Added Editor Gradient Custom API”, we have already mentioned this new api mechanism and also given basic operating guidance. Today, we will continue to talk about this implementation method in detail.

Since WordPress 5.4, the gradient tool in Gutenberg has been officially available, but the default gradient options that come with may not be suitable for our theme. By customizing the gradient options, it can be more convenient for users of the theme.

article directories
Set custom gradient colors
We can remove the default gradient and add our own gradient with the following code:
& lt;?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 (0mem101d155recover0.5) 0%, rgba (255pence255Power1) 100%)'
'slug' = >' light-blue-to-white'
),
Array (
'name' = > _ _ ('Blue to white',' your-textdomain')
'gradient' = >' linear-gradient (180deg, rgba (0mem101d155recovery1) 0%, rgba (255record255recovery1) 100%)'
'slug' = >' blue-to-white'
),
Array (
'name' = > _ _ ('Dark blue to white',' your-textdomain')
'gradient' = >' linear-gradient (180 degmeng rgba (299pr 53) 0% recorder rgba (255pr) 255pr) 100%)
'slug' = >' dark-blue-to-white'
),
Array (
'name' = > _ _ ('Blue to dark blue',' your-textdomain')
'gradient' = >' linear-gradient (180deg, rgba (0mem101, 155recover1) 0%, rgba (29pence39, 53recover1) 100%)'
'slug' = >' blue-to-dark-blue'
),
Array (
'name' = > _ _ ('Light blue to black',' your-textdomain')
'gradient' = >' linear-gradient (180deg, rgba (0mai 101, 155pm 0. 5) 0%, rgba (0, 0, 0, 0, 1) 100%)'
'slug' = >' light-blue-to-black'
),
Array (
'name' = > _ _ ('Blue to block',' your-textdomain')
'gradient' = >' linear-gradient (180deglegence rgba (0mem101magne 155gba) 0% recordingrgba (0memen0remiere 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')
? >
With the code above, we add an operation to theafter_setup_theme
hook and register a file namedtheme_custom_gradients
Callback function of.
intheme_custom_gradients
Inside the function, we useadd_theme_support
Function to enable theme supporteditor-gradient-presets
。Then, with the second argument, pass an array containing an array that defines the custom gradient colors.
Each subarray contains three key/value pairs. Namely:
$name
: The name we want to display in the editor. Please note that we use__()
Function to make these names translatable.$gradient
: The actual gradient. Check out Css Linear Gradient to learn more$slug
: A unique slug alias that we can use in CSS to set the actual gradient.
Add gradient styles to CSS
In order for gradients to really work in our theme, we must add a little CSS style code to each gradient, as follows:
// 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%);
}
Disable Gutenberg gradients
In some cases, we may want to disable the gradient feature. At this time, we can use the following code fragment to achieve this:
<? 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');
?>
Using the code above, we add an operation to theafter_setup_theme
hook and register a file nameddisable_editor_gradients
Callback function of.
indisable_editor_gradients
Inside the function, we useadd_theme_support
Function add pairdisable-custom-gradients
support。Then, we also workededitor-gradient-presets
Theme support sets an empty array to remove the default gradient.
Content reference: since1979.dev/snippet-011-custom-gutenberg-gradient-colors/