Компонент RichText отображает пользовательский интерфейс для редактирования текстового контента с поддержкой форматирования текста и добавления ссылок.Внутри функции сохранения блока вам необходимо использовать <RichText.Content> для правильного сохранения и рендеринга.

RichText принимает общие значения атрибутов и onChange. Значение атрибута и onChange необходимы для того, чтобы ввод был редактируемым.

Пример использования:

block.json:

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "sample-block/sample-rich-text",
  "version": "0.0.1",
  "title": "Sample Rich Text",
  "description": "Sample Rich Text",
  "category": "widgets",
  "icon": "smiley",
  "editorScript": "file:./index.js",
  "attributes": {
    "text": {
      "type": "string",
      "default": ""
    }
  }
}

edit.jsx:

const {
    RichText
} = wp.editor;

export default function Edit({attributes, setAttributes}) {

    return ([
        <div>
            <RichText
                tagName={'h1'}
                placeholder={'Text'}
                value={attributes.text}
                onChange={(val) => setAttributes({text: val})}
            />
        </div>
        ,
    ]);
};

save.jsx:

const {
    RichText
} = wp.editor;

export default function Save({attributes}) {

    return (
        <div>
            <RichText.Content
                tagName={'h1'}
                value={attributes.text}
            />
        </div>
    );
};

index.js:

const {registerBlockType} = wp.blocks;


import Edit from './edit';
import Save from './save';
import metadata from './block.json';


registerBlockType(metadata.name, {
    title: metadata.title,
    description: metadata.description,
    icon: metadata.icon,
    category: metadata.category,
    attributes: metadata.attributes,

    edit: Edit,

    save: Save,
});

Вид в редакторе:

Так выглядит на фронте: