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