Adding custom color options for blocks

[justintadlock]

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]

This tutorial should also explore using theme-defined default colors.

The "unofficial" standard for the two primary color slugs for themes is base and contrast. This was defined in this thread for Twenty Twenty-Three: WordPress/gutenberg#48228. This works well for many scenarios.

Another option for other scenarios is to allow themes to define colors via a settings.custom.yourBlockName object in theme.json with a fallback defined in the block's stylesheet.

[bph]

Issue created to move forward: Please continue discussion there.

• Using Block Inspector sidebar groups #112
  This discussion is locked now

[bph]

The approach and title was changed (see discussion in the issue #112) and published
Using block inspector sidebar groups

[bph]

Created a new issue for the original topic here

• Adding custom color options for blocks #129