DEV Community

Cover image for WP Snippet #011 Custom Gutenberg gradient colors.
Stephan Nijman
Stephan Nijman

Posted on • Originally published at since1979.dev

4

WP Snippet #011 Custom Gutenberg gradient colors.

Originally posted on my website on April 1th 2020

How to set custom gradient colors in Gutenberg.

As of WordPress 5.4 gradient colors in Gutenberg are no longer marked as experimental. Meaning we can start using them in our production sites. Now the default gradients are very creative but a bit loud. So we might want to set some custom gradients so our clients don't turn our carefully designed websites in to a complete carnival.

To remove the default gradient's and set some custom colors we can use the code snippet below.

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

With the code above we add an action to the after_setup_theme hook and register a callback function called theme_custom_gradients.

Inside out new theme_custom_gradients function we use the add_theme_support function to enable the editor-gradient-presets theme support. As the second argument we pass an array containing arrays defining our custom gradient colors.

Each sub-array contains three key/value pairs. namely:

  • $name: The name we want to display inside the editor. Note that we use the __() function to make these names translatable.
  • $gradient: The actual gradient. Check out Css linear-gradient to learn more.
  • $slug: A unique slug that we can use in our Css to set the actual gradient.

Use our custom gradients in our Css

To actually make the gradients work inside of our theme we have to add a bit of Css for each gradient like shown below:

// 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 gradient colors

In some cases we might want to disable the use of gradients all together. In those cases we can use the code snippet below.

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

With the code above we add a action to the after_setup_theme hook and register a callback function called disable_editor_gradients.

Inside the disable_editor_gradients function we use the add_theme_support function to add support for disable-custom-gradients (A bit counter intuitive, but it is what it is). Then we also set an empty array for the editor-gradient-presets theme support to remove the default gradients.

Follow

Found this post helpful? Follow me on twitter @Vanaf1979 or here on Dev.to @Vanaf1979 to be notified about new articles, and other WordPress development related resources.

Thanks for reading and stay safe

Top comments (0)