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:
|
1 |
add_action( 'enqueue_block_editor_assets', 'urvanov_richtext_addfmt_enqueue_assets_editor' ); |
Теперь напишем саму функцию 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.
Для вставки кода в эту статью активно использовался GitHubGist, так как с Crayon-ом пока всё плохо.