How to add template colors to custom block options in WordPress Gutenberg editor sidebar?

Question

Please have a look at the attached image for reference.

I am building a block based plugin for the Wordpress Gutenberg editor.

How can I add template colors (i.e., those black and pastel shades) to ColorPalette ("Input border color")?

Catch is that I do not want the toggle system ("Color Settings") that PanelColorSettings comes with.

The "input border color" is going to be part of a PanelBody that already has other settings that use stuff like TextControl.

I did some Googling and came across something called withColors - however that is just an HOC for PanelColorSettings. So I don't think that would solve my requirement.

Answer 1

The colors of the color palette are stored in the Block Editors data. While working on a similiar issue using theme.json and the <ColorPalette> component I found via reading the Gutenberg source code how the colors were being retrieved from the theme. The key is to get the colors with useSelect('core/block-editor').getSettings().colors

Below is a simplified example block of <ColorPalette> using theme colors:

import { registerBlockType } from '@wordpress/blocks';
import { ColorPalette, PanelBody } from '@wordpress/components';
import { useState } from '@wordpress/element';
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';

registerBlockType('so-68876119/custom-colors', {
    title: 'Custom Colors',
    supports: {
        color: true
    },
    edit({ attributes, setAttributes }) {
        const MyColorPalette = () => {
                
            const [color, setColor] = useState(); // No default color set
                
            // Retrieve the themes color settings from the block editors' data
            const colors = useSelect('core/block-editor').getSettings().colors;
    
            return (
                <ColorPalette
                    colors={colors}
                    value={color}
                    onChange={(color) => setColor(color)}
                />
            );
        }
        return (
           <div {...useBlockProps()}>
                <InspectorControls>
                    <PanelBody title="Input border color">
                        <MyColorPalette />
                    </PanelBody>
                </InspectorControls>
                <h2>hello world</h2>
            </div>
        );
    },
    save() {
        return null;
    },
});