古腾堡块：显示 HTML 标签的 RichText 默认值

Question

当我在下面的 Gutenberg 块中包含标签时，它会在编辑器和前端输出 HTML 标签。 这只发生在默认文本中——从编辑器中添加链接时，它会正确呈现：

attributes: {
  text: {
    type: 'array',
    source: 'children',
    selector: 'p',
    default: 'Here is the test <a href="https://example.com">link</a>',
  },
}

edit: ({ attributes: { text }, setText ) => {
  return <RichText
    placeholder="Text..."
    tagName="p"
    onChange={setText}
    value={text}
    allowedFormats={['core/bold', 'core/italic', 'core/link']}
  />
}

save: () => {
  return <RichText.Content tagName="p" value={text} />
}

输出（包裹在<p>标签中）：

Here is the test <a href="https://example.com">link</a>

曾尝试从古腾堡核心/链接完全复制标记：

default: 'Here is the test <a href="https://example.com">link</a>'

输出（包裹在<p>标签中）：

Here is the test <a href="https://example.com">link</a>

并尝试使用标签作为对象设置默认文本：

default: `Here is the test ${<a href="https://example.com">link</a>}`

输出（包裹在<p>标签中）：

Here is the test [object Object]

我怎样才能得到这个默认文本来输出标签本身？

Answer 1

RichText组件占位符文本仅支持纯文本。 但是，您可以通过在块属性中定义示例内容来添加预格式化的内容，例如链接和其他支持的格式：

...
attributes: {
    text: {
        type: 'array',
        source: 'html',
        selector: 'p'
    },
},
example: {
    attributes: {
        text: 'Here is the test <a href="https://example.com">link</a>'
    }
},
...

通过定义示例属性，不再需要placeholder= ...和default: ...并且“示例链接”将是可编辑的。