@WD_KMS

Как добавить кнопку в редактор Wordpress?

Как в редакторе 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
));
  • Вопрос задан
  • 157 просмотров
Пригласить эксперта
Ответы на вопрос 1
Kozack
@Kozack Куратор тега WordPress
Thinking about a11y
Читайте как создавать собственные блоки. В интернете полно инфы
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы