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' );
    
} );

?>
15 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

Adding my voice to this request.

Bricks should absolutely add support that adds Bricks Defined colors and Typography to the block editor.

Once set, default colors are selectable in the block editor.

Additionally, it would be great to have typographic controls to set font family, font weight, etc. with options matching what is defined in Bricks.

This is something that Kadence Theme does quite well and would be welcome in Bricks.

1 Like