/** * 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' );
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter