[Resolved] Customizing GenerateBlocks Color Palette

[Bodie]

I love the ability to customize the GeneratePress color palette and I was wondering if there was a way to do the same with the GenerateBlocks color palette? Assuming you could do something the same as here:

add_filter( 'generate_default_color_palettes', 'tu_custom_color_palettes' );
function tu_custom_color_palettes( $palettes ) {
	$palettes = array(
		'#000000',
		'#FFFFFF',
		'#F1C40F',
		'#E74C3C',
		'#1ABC9C',
		'#1e72bd',
		'#8E44AD',
		'#00CC77',
	);
	
	return $palettes;
}

Not sure what hooks exist in GenerateBlocks yet, so thought I would check here first.

Thanks!

[Tom]

Hi there,

Gutenberg itself has a way to define the colors:

add_action( 'after_setup_theme', function() {
    add_theme_support( 'editor-color-palette', array(
        array(
            'name'  => __( 'Blue' ),
            'slug'  => 'blue',
            'color' => '#59BACC',
        ),
        array(
            'name'  => __( 'Green' ),
            'slug'  => 'green',
            'color' => '#58AD69',
        ),
        array(
            'name'  => __( 'Orange' ),
            'slug'  => 'orange',
            'color' => '#FFBC49',
        ),
        array(
            'name'  => __( 'Red' ),
            'slug'  => 'red',
            'color' => '#E2574C',
        ),
    ) );
} );

Let me know if you need more info 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Bodie]

Great! Thanks Tom for the quick response. Is there a limit to how many colors can be added?

[Tom]

I don’t think so 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mark]

Brilliant, exactly what i was looking for. Is there a way to disable custom color in Gutenberg. So that clients can’t pick outrageous colors, they can just choose from the color palette that i give them.

[Tom]

In GenerateBlocks, or in general?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mark]

I will be using Generateblocks mainly.

[Tom]

As of right now it’s not possible, but I’ll see what I can do 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mark]

Thanks Tom 😀

[Tom]

No problem, thanks for the feedback! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mike]

Actually, you can disable custom colors in the gutenberg palette, add this just before the other add_theme_support:
add_theme_support( 'disable-custom-colors' );

[Matthias]

thx all.

Was just asking myself this – and here we already got a solution 😀

But i am a bit confused now if those two solutions can be merged into one? So you dont have to add each color twice.

[Tom]

Not too sure what you mean – can you explain a bit more? 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Matthias]

i mean if it is possible to combine the two code blocks – so you only need to enter the palette one time in your css – and it shows in back (gutenberg) and frontend (customizer).

not really sure where to place mikes code best also.

[Tom]

The above code (https://generatepress.com/forums/topic/customizing-generateblocks-color-palette/#post-1200829) just makes it so the color palette options you have when using the color picker match what you’ve set. Can be useful if you’re always selecting the same colors.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts