![](https://otshelnik-fm.ru/wp-content/uploads/2019/04/gutenberg-1.jpg)
![](https://otshelnik-fm.ru/wp-content/uploads/2019/04/guten-60x60.jpg)
Если вы интересуетесь новостями, статьями по блочному редактору вордпресс (Gutenberg) - вступайте в группу. Так вы подпишетесь на рассылку по новым материалам в группе. При выходе новой публикации - на ваш e-mail придёт уведомление. Давай разрабатывать под редактор блоков и делиться знаниями по нему.
Вы сможете подписаться на выход новых материалов группы.
Вы сможете подписаться на новые комментарии к выбранной записи группы.
Найти в группе
Категории группы
Публикации группы
![](https://otshelnik-fm.ru/wp-content/uploads/2019/04/guten-60x60.jpg)
Вы сможете подписаться на выход новых материалов группы.
Вы сможете подписаться на новые комментарии к выбранной записи группы.
В этом руководстве я покажу как добавить свою произвольную кнопку в редактор блоков вордпресс 5.0. А именно: кнопку в RichText редактор (Gutenberg редактор)
В 1-й части мы рассмотрели его анатомию - это простой редактор с кнопками. Вверху содержится BlockToolbar, а уже в нём элементы внутреннего форматирования (inline formatting).
Сейчас там 4-ре кнопки: выделение жирным, курсивом, ссылка и перечеркнутый текст. Вот как это выглядит сейчас:
![4-ре стандартных кнопки форматирования](https://otshelnik-fm.ru/wp-content/uploads/2019/01/richtext-600x169.png)
Но мы добавим нужную кнопку выделяющую однострочный код - <code>
. И получится так:
![Добавим кнопку code](https://otshelnik-fm.ru/wp-content/uploads/2019/01/richtext2-600x171.png)
А поняв принцип - вы сможете добавлять любые свои кнопки в гутенберг редактор: хоть в span
оборачивать и выделать цветом, хоть тег small
, sub
, sup
. Всё будет в ваших руках.
Добавление кнопки - тоже работа с js кодом. Но никаких регистраций блока не потребуется - на стороне php все будет очень просто.
Поехали!
![](https://otshelnik-fm.ru/wp-content/uploads/2019/04/guten-60x60.jpg)
Вы сможете подписаться на выход новых материалов группы.
Вы сможете подписаться на новые комментарии к выбранной записи группы.
Какие бы стандартные блоки не давал новый WordPress редактор блоков (Gutenberg) в комплекте - но под каждый сайт требуются не стандартные блоки, а кастомные. Можно конечно под проект стилизовать имеющиеся - просто подкорректировав их стили. Но мы пойдем дорогой трудной, дорогой не прямой...
Навыки, необходимые для этого урока:
Понимание API WordPress
Умение написания простого плагина вордпресс
Базовые знания php и js
В этом уроке:
Создадим свой первый блок:
Gutenberg в wordpress - как работать? Здесь и найдёте ответ!
Как я и обещал - первые блоки мы будем создавать без особых инструментов для этого, и без специально настроенного окружения. Если вы работаете в IDE - отлично. Но если юзаете блокнот в клеточку типа notepad++ или его младшего собрата sublime - на первое время хватит и их.
Также примеры будут на ES5, никакого ESNext или JSX. Что это и как это - мы разобрали в прошлом уроке. Создать простой блок можно и без них. Главное - уловить концепцию написания блока. Простые шаги, чтобы в js-файле его зашевелить под гутенберг (блочный редактор вордпресс).
Этот урок будет целостным и законченным. Этакий Hello World.
![](https://otshelnik-fm.ru/wp-content/uploads/2019/04/guten-60x60.jpg)
Вы сможете подписаться на выход новых материалов группы.
Вы сможете подписаться на новые комментарии к выбранной записи группы.
Плагин Gutenberg (гутенберг) развивался пару лет, и вот в WordPress 5.0 он был внесен в ядро движка. Сейчас отдельно плагин продолжает развиваться: будет работа над 2-й и 3-й фазой редактора - за пределами контента записи и миграция виджетов, кастомайзера, меню - под единый механизм.
В этой серии уроков я расскажу как создавать блоки к гутенберг редактору. Или к редактору блоков вордпресс. Но пока грань еще не стёрта, будем использовать кодовое имя "Гутенберг"