Adding custom color options for blocks

[bph]

Discussed in #106

^{Originally posted by justintadlock May 2, 2023}
Sometimes, block developers need to add custom color options that are not available as the default Text, Background, and Link color supports, as shown in this screenshot:

This question pops up from time to time, and it'd be good to have a solid resource on how to accomplish it. I've already written code for this in a plugin of my own: https://github.com/x3p0-dev/x3p0-progress/blob/1.0/resources/js/color/panel-color.js

Some things to note:

• You cannot add colors to the default "Color" panel. You must build a custom panel.
• You can add individual colors to other custom panels.

[justintadlock]

I'll be working on this tutorial from this Google Doc: https://docs.google.com/document/d/1Gh1YnnUWm6Q_WCSglglsmlbTMml23d3-D-pH0VF6bn0/edit?usp=sharing

[justintadlock]

Here's the repo that I'll be building the code examples in: https://github.com/justintadlock/custom-block-color-settings

I'll transfer it to the Learn organization once it's finalized.

[justintadlock]

The draft for this post is now finished and ready for review: https://docs.google.com/document/d/1Gh1YnnUWm6Q_WCSglglsmlbTMml23d3-D-pH0VF6bn0/edit?usp=sharing

[marybaum]

Got it!

[abhansnuk]

Hi @justintadlock a great tutorial. I have done a review and added some comments to the doc. Look forward to building following your steps.

[justintadlock]

Props to @juanmaguitar for second review. We're ready to publish now.

[justintadlock]

And we're live! https://developer.wordpress.org/news/2023/11/how-to-add-custom-color-options-to-blocks/

Social copy:

Have you ever needed to add extra color options to your custom blocks? If so, check out this tutorial on the WordPress Developer Blog to find out how:

https://developer.wordpress.org/news/2023/11/how-to-add-custom-color-options-to-blocks/

[ndiego]

Social post scheduled.