With Gutenberg out, everyone’s starting to use the shiny new color settings.
That’s great, but if you also are building your own blocks using Advanced Custom Fields (ACF), the color picker you see there probably doesn’t include your custom colors, which is not the best user experience. The default colors at the bottom here don’t really correspond to anything; they’re just primary colors, which is probably not what you want your users picking if you’re building a theme:
Luckily, it’s possible to put them into sync, and it’s not particularly difficult.
I looked all over the place, and couldn’t find anyone with a tutorial about it. I haven’t seen this method used anywhere else all together just yet, but I’m drawing on a number of guides in pulling together the functionality to completely automate this process.
- Tutorials from ACF and from Bill Erickson on building ACF Gutenberg blocks
- Rich Tabor’s guide to implementing Gutenberg’s color palette
- Kristin Faulkner on adding custom colors to Iris
So here are the basic tasks we need to accomplish:
- Registering some colors in our functions file (this should always be done in a theme) to get Gutenberg colors up and running
- Automatically extracting those colors and getting them into a format that will work for adding them to the ACF color picker (could be done in a theme or plugin as appropriate)
- Hooking in automatically to all instances of the ACF color picker and adding the colors (could be done in a theme or plugin as appropriate)
Registering the colors
Just about everyone’s written about how to register colors in your theme, and Genesis even does this automatically in their base theme. Basically, in our functions.php file, we just add them like so:
Simple enough, right? Just plug in in your colors, make sure to give them names, and use your own textdomain.
Getting the colors in a usable format
['#333333', '#222222', '#111111']
So, we’re going to get the array of colors, then loop through it to build the markup above.
Adding the default colors into the ACF color picker
That’s all! Just add those three snippets into your functions file, and you should be all set! For my purposes, (I’m building a plugin which needs this done automatically), I’m including two of them in a plugin, then still allowing the theme to define the colors.
Once added, both the Gutenberg colors and the ACF color picker should be synced up, and they should look something like this: