Skip to content

Instantly share code, notes, and snippets.

@thomasfw
Last active August 11, 2022 11:48
Show Gist options
  • Save thomasfw/583a1c447e0cf45b25f3904612a511ad to your computer and use it in GitHub Desktop.
Save thomasfw/583a1c447e0cf45b25f3904612a511ad to your computer and use it in GitHub Desktop.
Wordpress Gutenberg - Auto register a theme's color palette by parsing the stylesheet (uses `editor-color-palette`)
// Gutenberg Color Palette
// These are merged Bootstrap 4 $theme-colors from global variables.
// The compiled rules are also read and cached in 'functions.php'
// so they don't need to be registered manually.
$gutenberg-colors: map-merge( (
'dark' : #1A1A1A,
'green' : #68b678,
'red' : #E2574D,
), $theme-colors );
// Generate Block Colour Classes
@each $name, $color in $gutenberg-colors {
.has-#{$name}-color {
color: $color;
}
.has-#{$name}-background-color {
background-color: $color;
}
}
<?php // e.g. functions.php
/**
* Gutenberg Support
*/
add_action('after_setup_theme', function ()
{
/**
* Read our compiled theme CSS and extract the WP colour palette so we can register
* it with Gutenberg.
*/
// Update the css path to your plugin's css file.
$compiled_css_path = get_template_directory() . '/dist/styles/theme.css';
$cache_key = md5_file( $compiled_css_path );
$cached = get_option( '__theme_cached_color_palette_version', false );
if ( $cached == $cache_key )
{
$colour_palette = get_option( '__theme_cached_color_palette', [] );
}
else
{
$theme_css = file_get_contents( $compiled_css_path );
preg_match_all( '/\.has-([^}]*)-background-color\s*{\s*background-color[^\S\r\n]*:[^\S\r\n]*([^};]*);?\s*}/', $theme_css, $matches );
$colour_palette = [];
$assigned = [];
if ( is_array($matches) && isset($matches[0]) && isset($matches[1]) && isset($matches[2]) )
{
// $full_match = $matches[0]; // The full matched string
$colour_slugs = $matches[1]; // The colour slug pulled from .has-(\S+)-background-color
$colour_values = $matches[2]; // The colour value
if ( is_array($colour_slugs) && is_array($colour_slugs) )
{
foreach( $colour_slugs as $index => $slug )
{
if ( !isset($colour_values[$index]) ) continue;
$colour_val = trim( $colour_values[$index] ); // Important to trim whitespace from regex extraction.
if ( in_array($colour_val, $assigned) ) continue;
$assigned[] = $colour_val;
$colour_palette[] = [
'name' => ucwords(str_replace( ['-', '_'], ' ', $slug )),
'slug' => $slug,
'color' => $colour_val,
];
}
}
update_option( '__theme_cached_color_palette_version', $cache_key );
update_option( '__theme_cached_color_palette', $colour_palette );
}
}
if ( $colour_palette )
{
add_theme_support( 'disable-custom-colors' );
add_theme_support( 'editor-color-palette', $colour_palette );
}
}, 20);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment