Конфигурируем Gutenberg

В этом уроке мы сделаем так, что при редактировании записи / страницы в админке они будут выглядеть точно так же, как и на сайте!

К примеру мы немного заполнили пост, и на сайте он выглядит так:

А в админке, в конце этого урока, в редакторе Gutenberg он выглядит так!

Чувствуете?

• Мы подключили шрифты – такие же, которые используются в нашей вёрстке.
• Настроили размеры и межстрочные интервалы.
• Стилизовали заголовки.
• Стилизовали функционал «Буквицы» (это когда первая буква в абзаце большая).
• Стилизовали блок цитаты, списки, ширину контента и т.д.

Разве не круто? А хотите посмотреть, как выглядел редактор Gutenberg до того, как мы его настроили? Для той же самой записи:

Причём для такой настройки Gutenberg под тему нам не нужно делать чего-то сверхсложного! Не придётся создавать блоки, изучать JavaScript и React. В конце концов – это же базовый курс по созданию темы 🙃

Создание темы WordPress

• Урок 0Вступление
• Урок 1Начинаем создавать тему
• Урок 2Подключение CSS и JS
• Урок 3Меню
• Урок 4Иерархия файлов темы
• Урок 5Основной цикл
• Урок 6Прилепленные посты
• Урок 7Поиск на сайте
• Урок 8Изображения
• Урок 9Дополнительные циклы
• Урок 10Конфигурируем Gutenberg
• Урок 11Формы
• Урок 12Виджеты / Сайдбары
• Урок 13Пользователи
• Урок 14Комментарии