Компонент 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,
});
Вид в редакторе:

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