WordPress扩展核心区块：如何获取颜色变量而非十六进制值

要实现选择主题颜色时存储--wp--preset--color--xxx这类CSS变量，而非直接存储十六进制值，你需要修改区块的属性处理逻辑，通过WordPress提供的工具函数识别主题预设颜色并转换为对应变量。以下是具体修改步骤：

1. 更新block.json属性定义 #

保持属性类型为string即可，它可以存储颜色预设的slug或自定义十六进制值：

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 3,
    "attributes": {
        "blockTextColor": {
            "type": "string",
            "default": ""
        },
        "blockBackground": {
            "type": "string",
            "default": ""
        },
        "blockText": {
            "default": "Wholesome Plugin – hello from the editor!",
            "type": "string"
        }
    },
    // 其余原有内容保持不变
}

2. 修改edit.js逻辑，识别主题颜色预设 #

导入额外的工具函数和钩子，然后在颜色选择时判断是否为主题预设，存储对应的slug或变量：

import { ContrastChecker, InspectorControls, PanelColorSettings, RichText, useBlockProps, useSetting, getColorObjectByColorValue } from '@wordpress/block-editor';
import { Panel, PanelBody, TextControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import './editor.scss';

export default function Edit( { attributes, setAttributes } ) {
    const { blockBackground, blockTextColor, blockText } = attributes;
    // 获取theme.json中定义的主题颜色预设列表
    const colorPresets = useSetting( 'color.palette.theme' ) || [];

    // 统一处理颜色选择的函数
    const handleColorChange = ( attributeName, colorValue ) => {
        // 根据颜色值匹配对应的主题预设对象
        const colorObject = getColorObjectByColorValue( colorPresets, colorValue );
        // 是预设颜色就存储slug，否则存储十六进制值
        const colorValueToStore = colorObject?.slug || colorValue;
        setAttributes( { [attributeName]: colorValueToStore } );
    };

    // 转换存储值为可直接使用的样式值（slug转CSS变量，十六进制保持不变）
    const getStyleColorValue = ( storedValue ) => {
        if ( !storedValue ) return undefined;
        return storedValue.startsWith('#') ? storedValue : `var(--wp--preset--color--${storedValue})`;
    };

    return [
        <InspectorControls>
            <Panel>
                <PanelBody
                    title={ __( 'Block Content Settings', 'sp-extend-core-plugin' ) }
                    icon="admin-plugins"
                >
                    <TextControl
                        label={ __( 'Example Meta', 'sp-extend-core-plugin' ) }
                        help={ __( 'This is an example meta field.', 'sp-extend-core-plugin' ) }
                        onChange={ ( blockText ) => setAttributes( { blockText } ) }
                        value={ blockText }
                    />
                </PanelBody>
                <PanelColorSettings
                    title={ __( 'Block Color Settings', 'sp-extend-core-plugin' ) }
                    icon="art"
                    initialOpen={ false }
                    colorSettings={ [
                        {
                            value: blockTextColor ? ( blockTextColor.startsWith('#') ? blockTextColor : getColorObjectByColorValue(colorPresets, undefined, blockTextColor)?.color ) : undefined,
                            onChange: ( colorValue ) => handleColorChange( 'blockTextColor', colorValue ),
                            label: __( 'Font Color', 'sp-extend-core-plugin' )
                        },
                        {
                            value: blockBackground ? ( blockBackground.startsWith('#') ? blockBackground : getColorObjectByColorValue(colorPresets, undefined, blockBackground)?.color ) : undefined,
                            onChange: ( colorValue ) => handleColorChange( 'blockBackground', colorValue ),
                            label: __( 'Background Color', 'sp-extend-core-plugin' ),
                        }
                    ] }>
                        <ContrastChecker
                            isLargeText="false"
                            textColor={ getStyleColorValue(blockTextColor) }
                            backgroundColor={ getStyleColorValue(blockBackground) }
                        />
                </PanelColorSettings>
            </Panel>
        </InspectorControls>,
        <p
            { ...useBlockProps() }
            style={ {
                backgroundColor: getStyleColorValue(blockBackground),
                color: getStyleColorValue(blockTextColor),
            } }
        >
            <RichText
                className="block__text"
                keepPlaceholderOnFocus
                onChange={ ( blockText ) => setAttributes( { blockText } ) }
                placeholder={ __( 'Block Text', 'sp-extend-core-plugin' ) }
                tagName="span"
                value={ blockText }
            />
        </p>
    ];
}

3. 更新save.js，输出正确的样式值 #

在保存时同样转换存储的slug为CSS变量：

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

export default function save( { attributes } ) {
    const { blockBackground, blockTextColor, blockText } = attributes;

    const getStyleColorValue = ( storedValue ) => {
        if ( !storedValue ) return undefined;
        return storedValue.startsWith('#') ? storedValue : `var(--wp--preset--color--${storedValue})`;
    };

    return (
        <p 
            { ...useBlockProps.save() }
            style={ {
                backgroundColor: getStyleColorValue(blockBackground),
                color: getStyleColorValue(blockTextColor),
            } }
        >
            { blockText }
        </p>
    );
}

关键逻辑说明 #

• useSetting('color.palette.theme')：获取theme.json中定义的主题颜色预设列表
• getColorObjectByColorValue：通过颜色值或slug匹配对应的主题颜色对象，确保编辑器中正确显示选中的预设颜色
• 存储策略：选择主题预设时存储slug，自定义颜色时存储十六进制值，兼顾灵活性和主题一致性
• 样式转换：在渲染和保存时，将slug转换为var(--wp--preset--color--xxx)格式的CSS变量，确保颜色跟随主题配置动态变化

内容的提问来源于stack exchange，提问作者wish_18