Replace standard Gutenberg color palette with Oxygen global colors (code included)

[yankiara]

Describe the feature you'd like to see included in Oxygen. Add an option to replace standard Gutenberg color palette with Oxygen global colors.

What are the use cases for this feature? Client can edit pages without breaking color design.

Here is the raw code for colors substitution and frontend CSS:

/**
 * Add Oxygen's global colors to Gutenberg's backend editor palette
 */
function pavenum_gutenberg_oxygen_palette() {

    $gutenberg_colors = [];

    $oxy_colors = oxy_get_global_colors();
    foreach( $oxy_colors['colors'] as $oxy_color) {
        $gutenberg_colors[] = [ 'name' => $oxy_color['name'], 'slug' => 'color-' . $oxy_color['id'], 'color' => $oxy_color['value'] ];
    }

    add_theme_support( 'editor-color-palette', $gutenberg_colors );
    add_theme_support( 'disable-custom-colors' );

}
add_action( 'after_setup_theme', 'pavenum_gutenberg_oxygen_palette' );

/**
 * Add corresponding CSS to frontend Gutenberg blocks
 */
function pavenum_gutenberg_oxygen_palette_frontend_css() {

    $gutenberg_colors_frontend_css = "";

    $oxy_colors = oxy_get_global_colors();
    foreach( $oxy_colors['colors'] as $oxy_color) {
        $gutenberg_colors_frontend_css .= ".has-color-" . $oxy_color['id'] ."-color { color: " . $oxy_color['value'] . "} ";
        $gutenberg_colors_frontend_css .= ".has-color-" . $oxy_color['id'] ."-background-color { background-color: " . $oxy_color['value'] . "}";
    }

    wp_register_style( 'gutenberg-oxygen-colors', false );
    wp_enqueue_style( 'gutenberg-oxygen-colors' );
    wp_add_inline_style( 'gutenberg-oxygen-colors', $gutenberg_colors_frontend_css );

}
add_action( 'enqueue_block_assets', 'pavenum_gutenberg_oxygen_palette_frontend_css' );

[yankiara]

EDIT: Added frontend CSS generation

[wplit]

Nice one, very useful.

[maltmann-muc]

Thank you, @yankiara, used that for a current project. Implemented via Code Snippet.

[brendanquine]

I would also love to see this! I was about to submit this request myself and then found this!

I was going to use this link as a code reference: https://www.billerickson.net/code/color-palette-setup-in-gutenberg/

This doesn't seem too difficult, as this color palette could simply be triggered to update upon changing the global color palette... or it could even be hooked to the regeneration of the CSS cache, since that happens every time global CSS options are updated!

[csaborio001]

Would love to see this implemented on Oxygen (assuming it's still being maintained)

[maltmann-muc]

@csaborio001

Would love to see this implemented on Oxygen (assuming it's still being maintained)

In the meantime, you can use my code snippet: https://www.altmann.de/en/blog-en/code-snippet-oxygen-colors-in-gutenberg/