3

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

7

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>
  • 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
0
<PanelColorSettings
  title={__('Color Settings')}
  colorSettings={[
    {
      value: props.attributes.backgroundColor,
      onChange: (color) => props.setAttributes({ backgroundColor: color }),
      label: __('Background Color')
    },
    {
      value: props.attributes.textColor,
      onChange: (color) => props.setAttributes({ textColor: color }),
      label: __('Text Color'),
      colors: [
        {
          name: 'white',
          color: '#fff'
        },
        {
          name: 'black',
          color: '#222'
        }
      ]
    }
  ]}
/>

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.