Add Bricks colors to Gutenberg editor and frontend blocks (code included)

Hi,

It would be nice to include Bricks color palettes to Gutenberg editor (and remove default colors so that clients don’t mess up contents style :wink: )

Here is my code to achieve this:

<?php

add_action( 'plugins_loaded', function() {

    /**
     * Editor
     */
    function bricks_colors_gutenberg_editor() {
    
    	$gutenberg_colors = [];
    	$bricks_palettes = get_option(BRICKS_DB_COLOR_PALETTE, []);

        foreach( $bricks_palettes as $bricks_palette) {
        	foreach( $bricks_palette['colors'] as $bricks_color ) {
        		$gutenberg_colors[] = [ 'name' => $bricks_color['name'], 'slug' => 'color-' . $bricks_color['id'], 'color' => ( $bricks_color['rgb'] ?? $bricks_color['hex'] ) ];
        	}
        }

    	add_theme_support( 'editor-color-palette', $gutenberg_colors );
    	add_theme_support( 'disable-custom-colors' );
    
    }
    add_action( 'after_setup_theme', 'bricks_colors_gutenberg_editor' );
    
    /**
     * Frontend
     */
    function bricks_colors_gutenberg_frontend() {
    	
    	$gutenberg_colors_frontend_css = "";
    	$bricks_palettes = get_option(BRICKS_DB_COLOR_PALETTE, []);

        foreach( $bricks_palettes as $bricks_palette) {
        	foreach( $bricks_palette['colors'] as $bricks_color ) {
        		$gutenberg_colors_frontend_css .= ".has-color-" . $bricks_color['id'] ."-color { color: " . ( $bricks_color['rgb'] ?? $bricks_color['hex'] ) . "} ";
        		$gutenberg_colors_frontend_css .= ".has-color-" . $bricks_color['id'] ."-background-color { background-color: " . ( $bricks_color['rgb'] ?? $bricks_color['hex'] ) . "}";
        	}
        }
    	
    	wp_register_style( 'gutenberg-bricks-colors', false );
    	wp_enqueue_style( 'gutenberg-bricks-colors' );
    	wp_add_inline_style( 'gutenberg-bricks-colors', $gutenberg_colors_frontend_css );
    
    }
    add_action( 'enqueue_block_assets', 'bricks_colors_gutenberg_frontend' );
    
} );

?>
10 Likes

This is awesome @yankiara :+1:

I was also thinking about posting a request which is similar to this but the colour palette populates this section in the rich text element

Screenshot_88

5 Likes

Didn’t see this in the ideas list but would happily add my vote for it - would be stellar :slight_smile:

1 Like