Gutenberg 块：RichText 默认值显示 HTML 个标签

Question

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

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>

已尝试完全从 Gutenberg core/link 复制标记：

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 component placeholder text 仅支持纯文本。但是，您可以通过在块属性中定义示例内容来添加预格式化的内容，如链接和其他支持的格式：

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

通过定义示例属性，不再需要 placeholder= ... 和 default: ...，'example link' 将可编辑。

Gutenberg 块：RichText 默认值显示 HTML 个标签

Gutenberg blocks: RichText default value displaying HTML tags

wordpress

reactjs

wordpress-gutenberg

gutenberg-blocks