The problem I’m trying to solve: Making ACF Gutenberg blocks use, or reflect the functionality of, the native Gutenberg color palette/picker.
In native Gutenberg blocks – like buttons, paragraphs etc your theme can register some custom colors to be loaded into the color picker. They each have a slug (e.g. primary, secondary) and when you assign them to a block, it doesn’t add in inline HEX value, it adds a class like ‘.has-primary-background’ – so you can style the colors yourself. And if your branding ever changes, you just need to update the colors in your CSS file.
Gutenberg method for registering custom colors:
// Adds support for editor color palette.
add_theme_support( 'editor-color-palette', array(
array(
'name' => __( 'Primary Colour', 'my-theme' ),
'slug' => 'primary',
'color' => '#2c3e50',
),
array(
'name' => __( 'Secondary colour', 'my-theme' ),
'slug' => 'secondary',
'color' => '#E74C3C',
), etc
and in ACF you register the color palette like this
<script type="text/javascript">
acf.add_filter('color_picker_args', function( args, $field ){
// do something to args
args.palettes = ['#2C3E50', '#E74C3C', '#2980B9', '#ECF0F1', '#000000', '#FFFFFF' ]
// return
return args;
});
</script>
Possible solutions
1. Have an ACF field which basically uses the Gutenberg color picker and can access the slugs/names that have been registered along with those colors
2. Extend the ACF color picker (though I’m sure backwards compatibility would be a killer issue)
The ACF color field currently returns a HEX value, but I was wondering if it could be an array with hex value and corresponding slug. So in ACF I could, like in Gutenberg, associate #2C3E50 with the value of ‘primary’. Then in my templates I could have the choice of either outputting the HEX value, or using the slug in a CSS class (like the way native Gutenberg blocks do).
3. The easiest (but less client friendly) is to just use a Select or Radio field for the client to select which color they want (e.g. primary, secondary) and then you can easily return the value for that in the appropriate CSS class output.
