Add Brand Gradients to the Editor
Adds your brand gradients to the gradient picker for Group, Cover, Button and other blocks, so editors use on-brand backgrounds.
Opens WPIDE on
Code
// Gradients: slug => [name, CSS gradient].
$wpide_gradients = array(
'wpide-sunrise' => array( 'Sunrise', 'linear-gradient(135deg, #f59e0b 0%, #ef4444 100%)' ),
'wpide-ocean' => array( 'Ocean', 'linear-gradient(135deg, #0ea5e9 0%, #1e3a8a 100%)' ),
'wpide-mist' => array( 'Mist', 'linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%)' ),
);
add_filter( 'wp_theme_json_data_theme', function ( $theme_json ) use ( $wpide_gradients ) {
$data = $theme_json->get_data();
$current = isset( $data['settings']['color']['gradients'] ) ? (array) $data['settings']['color']['gradients'] : array();
$current = isset( $current['theme'] ) ? (array) $current['theme'] : $current;
$by_slug = array();
foreach ( $current as $preset ) {
if ( isset( $preset['slug'] ) ) {
$by_slug[ $preset['slug'] ] = $preset;
}
}
foreach ( $wpide_gradients as $slug => $gradient ) {
$by_slug[ $slug ] = array( 'slug' => $slug, 'name' => $gradient[0], 'gradient' => $gradient[1] );
}
return $theme_json->update_with( array(
'version' => WP_Theme_JSON::LATEST_SCHEMA,
'settings' => array( 'color' => array( 'gradients' => array_values( $by_slug ) ) ),
) );
} );Notes
Any valid CSS gradient works. Existing theme gradients are kept.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.