ColorPaletteControl is not exported

[bfintal]

I'm not sure whether I'm missing something, but I can't seem to use this Component: https://github.com/WordPress/gutenberg/blob/f5daf49820717c14e3d81edc460f0f0b6f1b1878/packages/editor/src/components/color-palette/control.js

There's a closed issue #9216 that mentions to use it, but I can't seem to find a way to use it.

I see that there's another component under editor here: https://github.com/WordPress/gutenberg/blob/f5daf49820717c14e3d81edc460f0f0b6f1b1878/packages/editor/src/components/color-palette/index.js

But that looks to be a different one.

The one that really fits to be an actual component is the one at ./control.js above, but it isn't exported anywhere.

There currently isn't a way to use a ColorPallete-like Control is to..

1. use an entire panel PanelColorSettings or
2. re-create my own by wrapping a ColorPalette with a BaseControl (which is exactly what ./control.js above is doing)

Perhaps what's missing is a ColorPaletteControl under @wordpress/components

Need some feedback about this. If this is correct, I'd be happy to submit a PR with the adjustments necessary to add this.

[mintbird]

I can't find a way to use the color palette control too :(

[amdrew]

I'd love to see this also 👍 I want to only use the color palette in a custom <PanelBody>

[gziolo]

@jorgefilipecosta - what was the reason that ColorPalette was exposed from @wordpress/components rather than ColorPaletteControl? It seems like the latter would better align with other controls exposed from the same package. Technically speaking we can still fix it and keep ColorPalette for backward compatibility only.

[galloppinggryphon]

Any progress on this? ColorPaletteControl is a much more sophistocated component than ColorPalette, it would be nice to be able to use it.

A workaround is to reimplement the code behind it.

const { BaseControl, ColorIndicator, PanelRow } = wp.components
const { ColorPalette } = wp.editor

export const MyColorPaletteControl = ( props ) => {
   const { label, value, onChange, colors, disableCustomcolors } = props
   return (
      <BaseControl aria-label={ label }>
         { /* <BaseControl.VisualLabel>
            { label }
            { value && (
               <ColorIndicator
                  colorValue={ value }
                  aria-label={ ariaLabel }
               />
            ) }
         </BaseControl.VisualLabel> */ }
         <PanelRow>
            { label }
            <ColorIndicator
               colorValue={ value }
               aria-label={ label }
            />
         </PanelRow>
         <ColorPalette
            className="editor-color-palette-control__color-palette block-editor-color-palette-control__color-palette"
            value={ value }
            onChange={ onChange }
            { ... { colors, disableCustomColors } }
         />
      </BaseControl>
   )
}

This works -- except <BaseControl.VisualLabel> kept crashing with a React 130 error.

[bfintal]

@galloppinggryphon You can use this one I'm using right now: https://github.com/gambitph/Stackable/blob/feat-three-tabs/src/components/color-palette-control/index.js

[jorgefilipecosta]

Hi, ColorPaletteControl is being exported under wp.blockEditor.ColorPaletteControl.
https://github.com/WordPress/gutenberg//blob/53b012a77f75d8477c67f1bdb26c82bd94898a43/packages/block-editor/src/components/color-palette/control.js#L52

I'm closing this issue for now. If the proposed component does not fit a specific need, please comment, and we will look further into the issue.