2

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.

enter image description here

1 Answer 1

4

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

In Gutenberg, you can get the block color palette in two ways:

  • Use getSettings() in the block editor's data (core/block-editor). E.g.

    import { select } from '@wordpress/data';
    
    const colorPalette = select( 'core/block-editor' ).getSettings().colors;
    // PS: You can also run wp.data.select( 'core/block-editor' ).getSettings().colors
    // via the console.
    
  • Or particularly in a function component, use the useSetting hook in the @wordpress/block-editor or wp.blockEditor package (which uses the getSettings() above). Note though, in WordPress 5.7, the hook was named useEditorFeature. So for example:

    import { useSetting } from '@wordpress/block-editor';
    
    // Then in your EDIT FUNCTION, use useSetting( 'color.palette' ):
    const colorPalette = useSetting( 'color.palette' );
    

And just so that you know, in PHP, you can use get_theme_support( 'editor-color-palette' ) to get the above palette.

Example/Demo using the useSetting hook (in WordPress 5.8)

Note that in this example, I added the colors in the question (red, white and blue) and then the color.palette above.

  1. In my index.js file, I got this at the top: (Note though, I omitted the registerBlockType stuff)

    import {
        useBlockProps,
        InspectorControls,
        useSetting,
    } from '@wordpress/block-editor';
    
    import {
        PanelBody,
        TextControl,
        ColorPalette,
    } from '@wordpress/components';
    
    const CUSTOM_COLORS = [
        {
            color: '#f00',
            name: 'Red',
        },
        {
            color: '#fff',
            name: 'White',
        },
        {
            color: '#00f',
            name: 'Blue',
        },
    ];
    
  2. And here's my edit function:

    function Edit( { attributes, setAttributes } ) {
        const { content, borderColor } = attributes;
    
        return (
            <>
                <InspectorControls>
                    <PanelBody>
                        <TextControl
                            label="Content"
                            value={ content }
                            onChange={ ( value ) => setAttributes( { content: value } ) }
                        />
    
                        <div>
                            <p>Input border color</p>
                            <ColorPalette
                                value={ borderColor }
                                colors={ [ ...CUSTOM_COLORS, ...useSetting( 'color.palette' ) ] }
                                onChange={ ( value ) => setAttributes( { borderColor: value } ) }
                            />
                        </div>
                    </PanelBody>
                </InspectorControls>
    
                <div
                    { ...useBlockProps( {
                        style: {
                            border: '2px solid ' + borderColor,
                            padding: '10px 15px',
                        },
                    } ) }
                >
                    { content }
                </div>
            </>
        );
    }
    
  3. So the above InspectorControls outputs this (the theme is Twenty Twenty-One 1.4 which has 10 colors in the block color palette — see source on Trac):

    Screenshot

1
  • This works great, however you do end up with the color's HEX value. If the theme.json is updated, you'll still have the old color. I've been hoping to find a way to select a theme color and keep it linked to that color, in case theme.json is ever modified. Feb 29 at 14:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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