Как в редакторе Gutenberg добавить кнопку, которая или оборачивает не тегом, а шорткодом. Или просто добавляет произвольный текст?
Данный код оборачивает текст в html-тег
(function (richText, element, editor) {
var el = element.createElement,
fragment = element.Fragment;
var registerFormatType = richText.registerFormatType,
unregisterFormatType = richText.unregisterFormatType,
toggleFormat = richText.toggleFormat;
var richTextToolbarButton = editor.RichTextToolbarButton,
richTextShortcut = editor.RichTextShortcut;
var type = "core/code";
unregisterFormatType(type);
registerFormatType(type, {
title: "NewButton",
tagName: "a",
className: null,
edit: function edit(props) {
var isActive = props.isActive,
value = props.value,
onChange = props.onChange;
var onToggle = function() {
return onChange(toggleFormat(value, { type: type }));
};
return el(
fragment,
null,
el(richTextShortcut, {
type: "access",
character: "x",
onUse: onToggle
}),
el(richTextToolbarButton, {
icon: "editor-code",
title: "Tag",
onClick: onToggle,
isActive: isActive,
shortcutType: "access",
shortcutCharacter: "x"
})
);
}
});
}(
window.wp.richText,
window.wp.element,
window.wp.editor
));