I'm working on a custom Gutenberg block. I have used <PanelBody> <BaseControl> and <ColorPalette> to create some custom color pickers, however, it seems like it would be more efficient to use the built-in <PanelColorSettings> component.

Has anyone used <PanelColorSettings> component in a custom block? The only discussion of this technique I could find was here: https://stackoverflow.com/questions/50480454/add-the-inbuilt-colour-palette-for-gutenberg-custom-block


First you need to import the component -

const {
} = wp.editor;

then inside the InspectorControls you call the component

                    title={ __( 'Color Settings' ) }
                    colorSettings={ [
                            value: color,
                            onChange: ( colorValue ) => setAttributes( { color: colorValue } ),
                            label: __( 'Background Color' ),
                            value: textColor,
                            onChange: ( colorValue ) => setAttributes( { textColor: colorValue } ),
                            label: __( 'Text Color' ),
                    ] }

  • Have you figured out how to generate classes with the colours names just like the core blocks do? I can't seem to replicate them :S – Rodrigo D'Agostino Mar 22 at 7:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.