How can I add template colors （即那些黑色和柔和的色调）to ColorPalette （“输入边框颜色”）?

在古腾堡，你可以得到block color palette 有两种方式：

使用getSettings() 在块编辑器的数据中(core/block-editor). 例如。

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.

或特别是在功能组件中，使用useSetting hook 在@wordpress/block-editor 或wp.blockEditor 软件包（使用getSettings() 以上）。但是请注意，在WordPress 5.7中，钩子was named useEditorFeature. 例如：

import { useSetting } from \'@wordpress/block-editor\';

// Then in your EDIT FUNCTION, use useSetting( \'color.palette\' ):
const colorPalette = useSetting( \'color.palette\' );

而且您知道，在PHP中，您可以使用get_theme_support( \'editor-color-palette\' ) 获取上述调色板。

示例/演示使用useSetting hook（在WordPress 5.8中）

注意，在这个示例中，我添加了问题中的颜色（红色、白色和蓝色），然后添加了color.palette 在上面

在我的index.js 文件，我在顶部得到了这个：（注意，我省略了registerBlockType 材料）

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\',
    },
];

edit 功能：

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>
        </>
    );
}

InspectorControls 输出此内容（主题为二十一1.4，在块调色板中有10种颜色-see source on Trac):