Love ‘em or hate ‘em, gradients are here to stay. Especially now, as the WordPress block editor has a default mechanism to apply gradient styles throughout the editing experience.
Out of the box, I don’t find the default gradient application experience particularly meaningful, as these presets are an assortment of trendy gradient styles presets. But with some finesse, block editor gradients could be much more purposeful by using the editor’s color palette instead.
Let’s dive in and explore how its done.
A primer on adding gradient presets
Adding gradient presets to the WordPress block editor is strikingly familiar to how themes provide a custom color palette.
add_theme_support( 'editor-gradient-preset' ) function, you may add as many gradients as you’d like.
Each gradient is provided as an array, with a
name is the label of the gradient,
gradient is the actual CSS gradient value, and
slug will become the class associated with the gradient.
Here’s an example of registering a standalone gradient preset:
Simple. Though I do think there’s an easy enough method to making the gradient presets much more meaningful to the person actually designing the website.
Using existing color palette colors in gradients
In an effort to make the gradient presets much more relevant, I explored how to map the colors provided by a theme’s
add_theme_support( 'editor-color-palette' ) function, to the actual gradient presets.
Here’s what I came up with:
1. Add an array of colors
To keep ourselves from repeating code (in this case, color values), we will want to build a single array of colors to pull those HEX values into both
2. Register an editor color palette with the array
Now that we have our colors specified in the $colors array, we need to register those using the
add_theme_support( 'editor-color-palette' ) function.
3. Convert HEX colors to RGB(A)
If you’re familiar with CSS gradients, they require the color values in RGB(A) format. That saying, we need to take our HEX values from the $colors array and provide a function to convert them to RGB(A).
4. Register gradient presets
Finally, we’re ready to register our gradients using the
add_theme_support( 'editor-gradient-presets' ) function. Referencing the
$colors array and using the
hex_to_rgb() function, we can now deploy our theme’s color palette to the gradient presets.
In the following example, I’ve declared a few variants for gradient presets:
- Primary to Secondary
- Primary to Tertiary
- Secondary to Tertiary
- Tertiary to Primary
A better gradient experience
After applying the steps above, the WordPress themes’s color palette and gradient presets will match each other — affording a better experience applying gradients throughout the editor. Instead of those flashy/trendy gradient styles, the end user will have a selection of relevant — on brand — gradients to apply. Nice.
If you’ll find it helpful, you can check out the full source code here, with all the steps combined.
As a side-note, allowing users to choose the colors that display within the block editor is an even better user-experience. I do recommend looking into how to leverage the Customizer to allow users to pick their own colors — which we’ve implemented in the Go WordPress theme.
So what do you think?
Do you think this should be the standard gradient experience? And will you be updating your WordPress themes to better support gradient presets in Gutenberg?