为Gutenberg RichText行内高亮选项添加渐变色支持的技术咨询

要给Gutenberg编辑器的行内高亮添加渐变色支持，你需要自定义行内格式类型，扩展原生高亮的功能，同时在工具栏集成渐变色选择器。以下是具体实现步骤：

1. 注册自定义渐变高亮格式 #

使用wp.richText.registerFormatType注册新的行内格式，定义属性、工具栏交互和渲染逻辑：

const { __ } = wp.i18n;
const { registerFormatType } = wp.richText;
const { ToolbarButton, GradientPicker } = wp.components;
const { useSelect } = wp.data;
const { Fragment } = wp.element;

registerFormatType( 'custom/gradient-highlight', {
    title: __( '渐变高亮', 'text-domain' ),
    tagName: 'mark',
    className: 'gradient-highlight',
    attributes: {
        gradient: {
            type: 'string',
            default: '',
        },
    },
    edit( { isActive, value, onChange, attributes } ) {
        const { gradient } = attributes;
        // 获取主题预设的渐变色集合
        const themeGradients = useSelect( ( select ) => {
            return select( 'core/block-editor' ).getSettings().gradients || [];
        }, [] );

        const applyGradient = ( newGradient ) => {
            onChange( wp.richText.toggleFormat( value, {
                type: 'custom/gradient-highlight',
                attributes: { gradient: newGradient },
            } ) );
        };

        return (
            <Fragment>
                <ToolbarButton
                    icon="highlight"
                    title={ __( '渐变高亮', 'text-domain' ) }
                    isActive={ isActive }
                    onClick={ () => applyGradient( gradient ? '' : 'linear-gradient(90deg, #f093fb 0%, #f5576c 100%)' ) }
                />
                { isActive && (
                    <GradientPicker
                        gradients={ themeGradients }
                        value={ gradient }
                        onChange={ applyGradient }
                        clearable={ true }
                    />
                ) }
            </Fragment>
        );
    },
    save( { attributes } ) {
        const { gradient } = attributes;
        if ( ! gradient ) {
            return <mark className="gradient-highlight" />;
        }
        return <mark className="gradient-highlight" style={ { backgroundImage: gradient } } />;
    },
} );

2. 替换原生高亮（可选） #

如果想直接替换原生的高亮工具，而非新增选项，可先取消注册原生格式，再注册自定义的：

wp.richText.unregisterFormatType( 'core/highlight' );
// 接着注册上述custom/gradient-highlight格式

3. 样式优化 #

添加CSS确保渐变背景精准贴合文本：

.gradient-highlight {
    background-size: 100% 60%;
    background-repeat: no-repeat;
    background-position: 0 80%;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: 0 2px;
}

关键说明 #

• 基于原生<mark>标签实现，保持语义一致性；
• 集成Gutenberg原生GradientPicker，支持主题预设渐变和自定义渐变；
• 仅对选中的行内文本应用渐变属性，实现精准控制；
• 渐变值存储在格式属性中，渲染时可选择内联样式或类名（用类名管理主题渐变更易维护）。

内容的提问来源于stack exchange，提问作者Hunia.F