Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ColorPaletteControl is not exported #13018

Closed
bfintal opened this issue Dec 19, 2018 · 6 comments
Closed

ColorPaletteControl is not exported #13018

bfintal opened this issue Dec 19, 2018 · 6 comments
Labels
Needs Technical Feedback Needs testing from a developer perspective. [Package] Block editor /packages/block-editor [Package] Components /packages/components

Comments

@bfintal
Copy link
Contributor

bfintal commented Dec 19, 2018

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.

@designsimply designsimply added the Needs Technical Feedback Needs testing from a developer perspective. label Dec 19, 2018
@mintbird
Copy link

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

@amdrew
Copy link
Contributor

amdrew commented May 8, 2019

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

@gziolo gziolo added the [Package] Block editor /packages/block-editor label May 24, 2019
@gziolo
Copy link
Member

gziolo commented May 24, 2019

@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.

@gziolo gziolo added the [Package] Components /packages/components label May 24, 2019
@galloppinggryphon
Copy link

galloppinggryphon commented Oct 30, 2019

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
Copy link
Contributor Author

bfintal commented Nov 11, 2019

@jorgefilipecosta
Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs Technical Feedback Needs testing from a developer perspective. [Package] Block editor /packages/block-editor [Package] Components /packages/components
Projects
None yet
Development

No branches or pull requests

7 participants