Feature request: add theme.json colour slug to colour picker array return
P
Peter Hardy-vanDoorn
So great that, finally, the ability to load theme.json colours has been added to the colour picker field, but the value returned is only the RGB numbers, which is only really 50% useful.
I would like to see the array return expanded to also include the colour's slug, at the least, and also the css classes for both text and background use.
If you're not sure what I mean, have a look at this plugin: https://github.com/log1x/acf-editor-palette
Finally, it would be great to replace the current UI with the block editor's native one.
k
kev neal
you can use something like this until it gets implemented officially
function my_themejson_hex_to_slug( $value ) {
if (empty($value)) {
return $value;
}
// Must be hex for slug lookup
if (!preg_match('/^#([a-f0-9]{3}){1,2}$/i', $value)) {
return $value;
}
$theme_json_path = get_stylesheet_directory() . '/theme.json';
if (!file_exists($theme_json_path)) {
return $value;
}
$json = json_decode(file_get_contents($theme_json_path), true);
$palette = $json['settings']['color']['palette'] ?? [];
$slug_map = [];
foreach ($palette as $color) {
if (!empty($color['color']) && !empty($color['slug'])) {
$hex = strtolower($color['color']);
$slug = sanitize_title($color['slug']);
$slug_map[$hex] = $slug;
}
}
// Convert hex to slug if it exists, otherwise return original hex
$value_lower = strtolower($value);
return $slug_map[$value_lower] ?? $value;
}
add_filter('acf/format_value/type=color_picker', function($value, $post_id, $field) {
return my_themejson_hex_to_slug($value);
}, 10, 3);
?>