Adding Oxygen Global colors to Gutenberg

PHOTO EMBED

Thu Feb 17 2022 08:18:20 GMT+0000 (Coordinated Universal Time)

Saved by @Prowhiz #php

/**
 * 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' );
content_copyCOPY

I am amused when WordPress themes or plugins talk about “global” colors but the feature only works in the theme or plugin. In other words, they are not truly “global.” Oxygen has a nice global colors option and I wanted to get these colors into the Gutenberg editor. I asked in the Oxygen Facebook group and got a number of nice suggestions. Alex Tester pointed me to a snippet on the issue in Github and Matt Hias shared a solution from his blog. I ended up using the first option as the code looked simpler.

https://www.webtng.com/code-snippets-used-when-creating-an-oxygen-site/