Blog

Code Snippet: Oxygen Colors in Gutenberg

Version: 1.0.3 (Dec 28, 2023)

Introduction

Oxygen is a powerful plugin for WordPress that deactivates the WordPress theme, supports the creation of own templates with a visual builder and thus enables a fully individual design for your website.

Within the Oxygen Builder you can define global colors, which are then available in all color selection fields of the Builder.
However, the Gutenberg Editor offers its own color palette, which does not necessarily match the design of the website.

Solution

My code snippet replaces the Gutenberg color palette with the Oxygen color palette.

Gutenberg color palette
Oxygen color palette

Download

The code snippet is available for download here:

ma-oxygen-colors-gutenberg.code-snippets.json
Version 1.0.3, 2023-12-28

Please note: The title of the code snippet has changed from "Oxygen: Global Colors in Gutenberg" to "MA Oxygen Colors Gutenberg".

For installation and use of the downloaded JSON file you will need the plugin Code Snippets or Advanced Scripts.
You can install the JSON file using the "Import" function of the plugin. 
Don't forget to activate the snippet after import.

Alternative: At the end of this page you can view and copy the complete source code of the snippet.

New functionalities and bug fixes are documented in the change log.

Donation

I enjoy developing code snippets and solving requirements with them. I provide the snippets free of charge.

If you like, you can honor my many hours of work with a small coffee donation via PayPal.

  When clicking the button, a connection to PayPal is established.

Your donation will of course be taxed properly by me.

Configuration

There are two configuration options in the code snippet. These can be changed in the configuration section (~ line 25).

$add_black_white
true: Adds black and white
false: Does not add black and white

$allow_custom_color
true
: Allow custom colors to be defined
false: The link for custom colors is not displayed.

Disclaimer

I have developed and tested the code snippet to the best of my knowledge under WordPress 5.7 and Oxygen 3.7.1. 
I provide the code snippet for free use.
I cannot give any guarantee for the functionality because of the countless possible variations in WordPress environments.
Download and use of this code snippet is at your own risk and responsibility.

Change Log

See Source Code.

Source Code

<?php
/*
Plugin Name:  MA Oxygen Colors Gutenberg
Description:  Provide Oxygen colors in Gutenberg
Author:       <a href="https://www.altmann.de/">Matthias Altmann</a>
Version:      1.0.3
Plugin URI:   https://www.altmann.de/en/blog-en/code-snippet-oxygen-colors-in-gutenberg/
Description:  en: https://www.altmann.de/en/blog-en/code-snippet-oxygen-colors-in-gutenberg/
              de: https://www.altmann.de/blog/code-snippet-oxygen-farben-in-gutenberg/
Copyright:    © 2020-2023, Matthias Altmann

Version History:
Date		Version		Description
---------------------------------------------------------------------------------------------------------------------
2023-12-28	1.0.3		Test
						- WordPress 6.4.2, Oxygen 4.8
2023-01-02	1.0.2		Test:
						- WordPress 6.1.1, Oxygen 4.3
						Changes:
						- Initialization
						- Increase specificity for CSS rules for WP 6.1.1
2022-02-11				Test:
						- PHP 8.0, WordPress 5.9, Oxygen 4.0 beta 1
						Changes:
						- Black & white not added by default
2021-03-21  1.0.1       Bug Fix: Only initialize if Oxygen plugin is active
                        (Thanks to Adrien Robert for reporting!)
2020-12-29 	1.0.0		Initial Release 
2020-12-29				Development start
*/

class MA_Oxygen_Colors_Gutenberg {
	const TITLE			= 'MA Oxygen Colors Gutenberg';
	const SLUG			= 'ma_oxygen_colors_gutenberg';
	const VERSION		= '1.0.3';

	// Configuration
	private static $debug				= false;	// caution! may produce a lot of output
	private static $timing				= false;	// caution! may produce a lot of output
	private static $add_black_white     = false;	// automatically add black and white colors
	private static $allow_custom_color  = true;		// allow custom color settings in Gutenberg

	//-------------------------------------------------------------------------------------------------------------------
	static function init() {
		add_action('after_setup_theme', [__CLASS__, 'palette_backend']);
		add_action('enqueue_block_assets', [__CLASS__, 'palette_frontend']);
	}
	//-------------------------------------------------------------------------------------------------------------------
	// Add Oxygen's global colors to Gutenberg's backend editor palette
	static function palette_backend() {
		$st = microtime(true);

		$gutenberg_colors = [];
		if (self::$add_black_white) {
			// add black and white
			$gutenberg_colors[] = [ 'name' => 'black', 'slug' => 'color-black', 'color' => '#000000' ];
			$gutenberg_colors[] = [ 'name' => 'white', 'slug' => 'color-white', 'color' => '#ffffff' ];
		}
		// add oxygen global 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 );
		if (!self::$allow_custom_color) {
			add_theme_support( 'disable-custom-colors' );
		}

		if (WP_DEBUG && self::$debug) {error_log(sprintf('%s::%s() gutenberg_colors: %s',self::TITLE,__FUNCTION__,print_r($gutenberg_colors,true)));}
		$et = microtime(true);
		if (WP_DEBUG && self::$timing) {error_log(sprintf('%s::%s() Timing: %.5f sec.',self::TITLE,__FUNCTION__,$et-$st));}
	}

	//-------------------------------------------------------------------------------------------------------------------
	// Add corresponding CSS to frontend Gutenberg blocks
	static function palette_frontend(){
		$st = microtime(true);

		$gutenberg_colors_frontend_css = '';
		if (self::$add_black_white) {
			// add black and white
			$gutenberg_colors_frontend_css .= 'body.oxygen-body .has-color-black-color{color:#000000;}';
			$gutenberg_colors_frontend_css .= 'body.oxygen-body .has-color-black-background-color{background-color:#000000;}';
			$gutenberg_colors_frontend_css .= 'body.oxygen-body .has-color-white-color{color:#ffffff;}';
			$gutenberg_colors_frontend_css .= 'body.oxygen-body .has-color-white-background-color{background-color:#ffffff;}';
		}
		// add oxygen global colors
		$oxy_colors = oxy_get_global_colors();
		foreach( $oxy_colors['colors'] as $oxy_color) {
			$gutenberg_colors_frontend_css .= 'body.oxygen-body .has-color-'.$oxy_color['id'].'-color {color:'.$oxy_color['value'].'}';
			$gutenberg_colors_frontend_css .= 'body.oxygen-body .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 );

		if (WP_DEBUG && self::$debug) {error_log(sprintf('%s::%s() gutenberg_colors_frontend_css: %s',self::TITLE,__FUNCTION__,print_r($gutenberg_colors_frontend_css,true)));}
		$et = microtime(true);
		if (WP_DEBUG && self::$timing) {error_log(sprintf('%s::%s() Timing: %.5f sec.',self::TITLE,__FUNCTION__,$et-$st));}

	}

}



//===================================================================================================================
// Initialize
add_action('setup_theme',function(){
	if (!defined('CT_VERSION'))	return;	// only initialize if Oxygen plugin is active
	if (wp_doing_ajax()) 		return;	// don't run for AJAX requests
	if (wp_doing_cron()) 		return;	// don't run for CRON requests
	if (wp_is_json_request()) 	return;	// don't run for JSON requests
	MA_Oxygen_Colors_Gutenberg::init();
},1005); 
First published: Dec 29, 2020 on Code Snippet: Oxygen Colors in Gutenberg
magnifier