如何将模板颜色添加到 WordPress Gutenberg 编辑器侧边栏中的自定义块选项？

Question

请查看附件图片以供参考。

我正在为 Wordpress Gutenberg 编辑器构建一个基于块的插件。

如何添加模板颜色（即那些黑色和柔和的色调）到ColorPalette（“输入边框颜色")?

问题是我不想要 PanelColorSettings 附带的切换系统（“颜色设置”）。

“输入边框颜色”将成为 PanelBody 的一部分，该 PanelBody 已经具有使用 TextControl.

等内容的其他设置

我在谷歌上搜索了一下，发现了一个叫做 withColors 的东西——但这只是 PanelColorSettings 的一个 HOC。所以我认为这不会解决我的要求。

Answer 1

调色板的颜色存储在 Block Editors data. While working on a similiar issue using theme.json and the <ColorPalette> component I found via reading the Gutenberg source code 如何从主题中检索颜色。关键是用 useSelect('core/block-editor').getSettings().colors

得到颜色

下面是 <ColorPalette> 使用主题颜色的简化示例块：

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

如何将模板颜色添加到 WordPress Gutenberg 编辑器侧边栏中的自定义块选项？

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

wordpress-gutenberg

wordpress-plugin-creation