Change Gutenberg Color Pallete to your own

2 min read / Custom Code, Gutenberg, Plugins, WordPress / Share on: Twitter, LinkedIn, Facebook

Post summary: If you want to have your theme colors in Gutenberg instead of all colors use this code. You can also disable gradients in Gutenberg editor. Add this code to your functions.php or custom plugin or code snippets plugin like Advanced scripts. Add more colors if you want :-) just change the name (Zelená,Modrá…). You also…

If you want to have your theme colors in Gutenberg instead of all colors use this code. You can also disable gradients in Gutenberg editor. Add this code to your functions.php or custom plugin or code snippets plugin like Advanced scripts.

Add more colors if you want :-) just change the name (Zelená,Modrá…).

<?php

/**
 * Add custom color palette in Block editor.
 */
function gt_gutenberg_colors() {
	add_theme_support(
		'editor-color-palette', array(
			array(
				'name'  => esc_html__( 'Zelená', '@@textdomain' ),
				'slug' => 'green',
				'color' => '#009846',
			),
			array(
				'name'  => esc_html__( 'Modrá', '@@textdomain' ),
				'slug' => 'blue',
				'color' => '#1464b4',
			),
			array(
				'name'  => esc_html__( 'Světle modrá', '@@textdomain' ),
				'slug' => 'accent',
				'color' => '#eff4f7',
			),
			array(
				'name'  => esc_html__( 'černá', '@@textdomain' ),
				'slug' => 'base',
				'color' => '#000000',
			)
		)
	);
}
add_action( 'after_setup_theme', 'gt_gutenberg_colors' );

You also need to add the color classes which will be generated by Gutenberg to your CSS. Again – change the names to be same as slugs of the colors.

/**************************/
/*****GUTENBERG-COLORS*****/
/**************************/

/*use HEX colors if you don't have variables in your stylesheet*/
.has-green-background-color {
     background-color: var(--secondary); 
 }
.has-green-color {
     color: var(--secondary);
}
.has-blue-background-color {
     background-color: var(--primary);
}
.has-blue-color {
     color: var(--primary);
}
.has-accent-background-color {
     background-color: var(--accent);
}
.has-accent-color {
     color: var(--accent);
}
.has-base-background-color {
     background-color: var(--base);
}
.has-base-color {
     color: var(--base);
}

0 comments