Плагин для WordPress с Gutenberg Format API

Crayon жив!

В прошлый раз мы научились создавать простенькие плагины для WordPress. Сегодня мы сделаем нечто большее. Видели кнопки форматирования: выделение полужирным, курсивом, зачёркивание — кнопки для блока редактирования параграфа в редакторе Gutenberg? Так вот, мы добавим к этой панели инструментов свои кнопки.

Для разработки желательно использовать свой тестовый экземпляр установленного WordPress. Перейдите в каталог “wp-content/plugins”. Создадим там каталог “urvanov-richtext-addfmt” (так будет называться наш плагин). Внутри каталога создадим один файл “urvanov-richtext-addfmt.php” со следующим содержимым:

Как видим, здесь нет ничего нового. В прошлой статье мы делали то же самое.

Теперь самое интересное. Нам нужно добавить что-нибудь полезное.

Для начала нам нужно зарегистрировать новый файл JavaScript, чтобы мы могли потом подгружать его функцией wp_enqueue_script. Регистрацию нового файла JavaScript нужно осуществлять в обработчике action-а init:

Обратите внимание на функцию wp_register_script, с помощью которой мы регистрируем новый JavaScript-файл “urvanov-richtext-addfmt.js” и даём ему уникальное имя “urvanov-richtext-addfmt-js”. Третьим параметром мы передаём массив со списком пакетов, которые нужно подключить к файлу. Полный список пакетов смотрите в документации к Gutenberg. Здесь мы подключили wp-richtext, wp-element и wp-editor. Внутри JavaScript-кода нам будут доступны элементы из этих пакетов.

В WordPress есть action enqueue_block_editor_assets, внутри которого мы можем стандартным для WordPress способом добавить новые скрипты JavaScript при загрузке страницы. Мы добавим новый обработчик с помощью add_action:

Теперь напишем саму функцию urvanov_richtext_addfmt_enqueue_assets_editor, внутри которой мы будем подгружать наш JavaScript-код с помощью стандартной функции WordPress wp_enqueue_script:

Полный код в “urvanov-richtext-addfmt.php” будет выглядеть так:

Отлично. С PHP покончено. Теперь создадим новый файл “urvanov-richtext-addfmt.js” рядом с файлом “urvanov-richtext-addfmt.php”.

Перейдите в список плагинов WordPress и активируйте плагин “Urvanov richtext addfmt”. Теперь попробуйте создать новый пост. Вы должны увидеть сообщение “YES”, если всё успешно отработает.

Далее пишем JavaScript-ом. Основное внимание прошу уделить документации на компонент RichText, который используется в редакторе Gutenberg. Мы будем использовать registerFormatType и toggleFormat. Тут особо ничего сложного нет. Мы просто регистрируем новый формат, в tagName указывает HTML-тег, который будет использоваться для обрамления, а в edit указываем функцию, которая создаёт кнопку для панели форматирования нашего RichText. Функция создаёт кнопку с помощью wp.element.createElement, где первым аргументом передаётся тип кнопки, а вторым элементом передаются параметры кнопки. Создадим кнопки для HTML-тегов SUP и SUB:

Если мы сейчас зайдём в редактор, то в панели форматирования блока типа «абзац» мы увидим две новые кнопки:

добавленные кнопки и их результат

Иконки для кнопок взяты из свойств icon в нашем коде. Полный список возможных значений для свойства icon можно посмотреть в документации WordPress. Выбираете любую иконку и копируете её название без dashicons.

Исходный код на GitHub.

Для вставки кода в эту статью активно использовался GitHubGist, так как с Crayon-ом пока всё плохо.



Поделиться:
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Добавить комментарий

Ваш e-mail не будет опубликован.

*