Code Snippet: Oxygen Farben in Gutenberg
Einführung
Oxygen ist ein mächtiges Plugin für WordPress, welches das WordPress Theme deaktiviert, die Erstellung eigener Templates mit einem visuellen Builder unterstützt, und damit ein ganz individuelles Design für die Website ermöglicht.
Innerhalb des Oxygen Builders kann man globale Farben definieren, die dann in allen Farbauswahl-Feldern des Builders zur Verfügung stehen.
Der Gutenberg Editor bietet allerdings eine eigene Farbpalette an, die nicht unbedingt mit dem Design der Website übereinstimmt.
Lösung
Mein Code Snippet ersetzt die Gutenberg Farbpalette durch die Oxygen Farbpalette.
Download
Das Code Snippet steht hier zum Download zur Verfügung:
oxygen-global-colors-in-gutenberg.code-snippets.json
Version 1.0.1, 2021-03-21
Zur Installation und Nutzung dieser JSON Datei wird das Plugin Code Snippets oder Advanced Scripts benötigt.
Dort kann diese JSON Datei mit der Funktion "Import" hochgeladen und anschließend aktiviert werden.
Alternativ: Am Ende dieser Seite kann der vollständige Source Code des Snippets eingesehen und kopiert werden.
Im Change Log sind neue Funktionalitäten und Fehlerbehebungen dokumentiert.
Spenden
Es macht mir viel Freude, Code Snippets zu entwickeln und damit Anforderungen zu lösen. Die Snippets stelle ich kostenfrei zur Verfügung.
Wenn Du möchtest, kannst Du meine vielen Stunden Arbeit mit einer kleinen Kaffee-Spende über PayPal honorieren.
Spenden werden selbstverständlich ordnungsgemäß durch mich versteuert.
Konfiguration
Im Code Snippet gibt es zwei Konfigurations-Optionen. Diese können im Abschnitt "Configuration" (ca. Zeile 25) geändert werden.
$add_black_white true: Fügt schwarz und weiß hinzufalse: Schwarz und weiß werden nicht hinzugefügt
$allow_custom_colortrue: Erlaubt die Definition von benutzerdefinierten Farbenfalse: Der Link für benutzerdefinierte Farben wird nicht angezeigt.
Disclaimer
Das Code Snippet habe ich nach bestem Wissen und Gewissen unter WordPress 5.7 und Oxygen 3.7.1 entwickelt und getestet.
Ich stelle das Code Snippet zur freien Verwendung zur Verfügung.
Eine Garantie für die Funktionalität in allen denkbaren WordPress Umgebungen kann ich nicht geben.
Download und Nutzung dieses Code Snippets erfolgen auf eigene Gefahr und Verantwortung.
Change Log
Siehe 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.1
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-2021, Matthias Altmann
Version History:
Date Version Description
---------------------------------------------------------------------------------------------------------------------
2020-12-29 Development start
2020-12-29 1.0.0 Initial Release
2021-03-21 1.0.1 Bug Fix: Only initialize if Oxygen plugin is active
(Thanks to Adrien Robert for reporting!)
*/
class MA_Oxygen_Colors_Gutenberg {
const TITLE = 'MA Oxygen Colors Gutenberg';
const SLUG = 'ma_oxygen_colors_gutenberg';
const VERSION = '1.0.1';
// 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 = true; // automatically add black and white colors
private static $allow_custom_color = true; // allow custom color settings in Gutenberg
//-------------------------------------------------------------------------------------------------------------------
static function init() {
if ( !wp_doing_ajax() // skip for ajax
&& !wp_doing_cron() // skip for cron
&& (!array_key_exists('heartbeat',$_REQUEST)) // skip for hearbeat
) {
global $wp;
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 .= '.has-color-black-color{color:#000000;}';
$gutenberg_colors_frontend_css .= '.has-color-black-background-color{background-color:#000000;}';
$gutenberg_colors_frontend_css .= '.has-color-white-color{color:#ffffff;}';
$gutenberg_colors_frontend_css .= '.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 .= '.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 );
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));}
}
}
// only initialize if Oxygen plugin is active
if (defined('CT_VERSION')) {
MA_Oxygen_Colors_Gutenberg::init();
}