Блог

Когда я включаю теги в следующий блок 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>
  

Пытались точно скопировать разметку из ядра / ссылки Gutenberg:

 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]
  

Как я могу заставить этот текст по умолчанию выводить сами теги?

Текст-заполнитель компонента RichText поддерживает только обычный текст. Однако вы можете добавить предварительно отформатированное содержимое, например ссылки, и другое поддерживаемое форматирование, определив пример содержимого в свойствах блока:

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