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

2 s
2

First you need to import the component –

const {
    PanelColorSettings,
} = wp.editor;

then inside the InspectorControls you call the component

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

</PanelColorSettings>

Leave a Reply

Your email address will not be published. Required fields are marked *