Ability to insert custom color settings into Color panel

[justintadlock]

When developing custom blocks, there is sometimes a need to custom color options outside of the standard text, background, and link colors. Currently, developers must add these to a custom panel instead of adding them to the core Color panel that already exists.

This request recently appeared in the support forums, but I've seen other plugins create their own panels just to house custom color options (I've done this in one of my own plugins too).

We need the ability to insert custom color options into the existing panel instead of creating entirely new panels, which take up additional screen real estate and can often make the user experience less than ideal.

[skorasaurus]

heavily related: #41877

[aaronrobertshaw]

Thanks for creating this issue @justintadlock 👍

When developing custom blocks, there is sometimes a need to custom color options outside of the standard text, background, and link colors. Currently, developers must add these to a custom panel instead of adding them to the core Color panel that already exists.

Blocks can actually already inject their own custom color controls into the Color panel. In fact, a number of core blocks already do this including:

• Cover (Overlay color & opacity controls)
• Social Links (Icon and Icon background colors)
• Post Featured Image (Overlay color)
• Navigation (Custom text, custom background, submenu & overlay text, submenu & overlay background)

For each of the blocks above I've linked to the code where they add their controls to the Color panel's inspector controls slot. They should provide some direction on how you can achieve adding custom color controls.

You can also find a lot of background context and history in the following PRs.

• Color Block Support: Switch to ToolsPanel for displaying UI
  • In this PR, the color panel was moved to display a ToolsPanel and the color block support updated to render its controls into that panel via a slot.
  • The InspectoControls groups at this time were experimental and available via <InspectorControls __experimentalGroup="color">
• Sidebar Tabs: Stabilize the block inspector tabs experiment
  • When the block inspector tabs were stabilized we also stabilized those experimental inspector controls groups
• InspectorControls: Stabilize the experimental control groups

Some further details were shared in https://make.wordpress.org/core/2023/03/07/introduction-of-block-inspector-tabs/

In case an overly simplified snippet helps:

import {
	InspectorControls,
	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
} from '@wordpress/block-editor';

const CustomColorControls = ( { props } ) => (
	<InspectorControls group="color">
		<ColorGradientSettingsDropdown .../>
	</InspectorControls>
)

I hope that addresses this issue. Do you think we can close this one now?

[justintadlock]

Yes, I think that feedback should close this.