如何在自定义Gutenberg块的PanelColorSetting中获取颜色名称？

时间：2018-10-15 作者：Liuta Ovidiu

我正在开发一个带有PanelColorSettings组件的自定义Gutenberg块来设置背景色，下面是我的代码

<PanelColorSettings
                    title={ __( \'Color Settings\' ) }
                    colorSettings={ [
                        {
                            value: backgroundColor,
                            onChange: ( colorValue ) => setAttributes( { backgroundColor: colorValue } ),
                            label: __( \'Background Color\' ),
                        },
                    ] }
                >

                </PanelColorSettings>
如何为backgroundColor属性指定颜色名称而不是颜色代码？默认返回值似乎是颜色代码，它在将来的颜色代码更新中无效，因为内容需要重新保存。

2 个回复
SO网友:Till

我可以用函数getColorObjectByColorValue来解决这个问题(take a look at the gutenberg files).

如果你有

const backgroundColors = [
        {
            name: \'Light Green\',
            slug: \'light-green\',
            color: \'#E6F0F0\'
        },
        {
            name: \'Light Gray\',
            slug: \'light-gray\',
            color: \'#F7F7F7\'
        }
    ];
然后您可以通过以下方式获得颜色名称

const test = getColorObjectByColorValue(backgroundColors, backgroundColor);
console.log(test.name);
还应使用默认调色板。

SO网友:Sjaak Wish

感谢：https://javascriptforwp.com/forums/topic/how-to-get-a-color-class-name/ , 注：wp。编辑getColorObjectByColorValue现在不推荐使用wp。blockEditor。getColorObjectByColorValue

   const { select } = wp.data;
   const { getColorObjectByColorValue} = wp.blockEditor;

    function onChangeColor ( color ) {
        colorName = \'\';
        if( color ) {
            const settings = select( \'core/editor\' ).getEditorSettings();
            const colorObject = getColorObjectByColorValue( settings.colors, color );
            if( colorObject ) {
                colorName = colorObject.slug;
            }
        }
        props.setAttributes({color: color});
        props.setAttributes({colorName: colorName});

    }

结束
标签： plugin-development   block-editor   小码农  

相关推荐