古腾堡富文本内联突出显示选项支持渐变颜色

Question

我想在任何选定文本的突出显示选项中添加对渐变颜色的支持。如需参考，请参阅this评论。 我也看过这个 stackOverflow 线程。它提供在块级别添加渐变颜色的支持。我需要在选定的文本级别上使用它，如图所示

正如所见，我在工具栏突出显示选项中只有纯色选项。有什么方法可以在那里获得渐变颜色吗？ 任何回复将不胜感激。

Answer 1

由于渐变编辑器适用于块级别，我发现的解决方法是使用 Format API 注册自定义格式，以将渐变背景添加到段落块中的选定文本。

注意： 此方法的警告是 theme.json 中的预定义渐变用作

className

，并且渐变选择器不会出现，因为它是块级选项（请参见下面的屏幕截图).

index.js

import { registerFormatType, toggleFormat } from '@wordpress/rich-text';
import { RichTextToolbarButton } from '@wordpress/block-editor';

const AddGradientButton = ({ isActive, onChange, value }) => {
    return (
        <RichTextToolbarButton
            icon="star-filled"
            title="Gradient Background"
            onClick={() => {
                onChange(
                    toggleFormat(value, {
                        type: 'gradient-background/warm-to-cool',
                    })
                );
            }}
            isActive={isActive}
        />
    );
};

registerFormatType('gradient-background/warm-to-cool', {
    title: 'Gradient Style',
    tagName: 'span', // uses <span>...</span> to wrap the selected text
    className: 'has-cool-to-warm-spectrum-gradient-background', // change to name of your predefined gradient
    edit: AddGradientButton,
});

编辑器结果：

已保存的阻止内容：

<!-- wp:paragraph -->
<p>Gradients <span class="has-cool-to-warm-spectrum-gradient-background">on text in a paragraph</span> of text.</p>
<!-- /wp:paragraph -->