Немного предисловия
В WordPress есть три пути разработки темы для сайта:
- Classic (классическая)
- Full Site Editing (FSE, полное редактирование сайта, блочные)
- Hybrid (гибридная)
С тех пор как редактор Gutenberg стал по умолчанию в WP, возможности движка значительно расширились из коробки. И следующей стадией для разработчиков WordPress стало перевести на редактор Gutenberg каждый блок сайта. Что и произошло не так давно.
Но столь кардинальные перемены привели к тому, что появились «гибридный» способ разработки сайта, который совмещает и классический и блочные темы. Шапка, виджеты, подвал редактируются по старому, а содержимое страницы уже использует блоки редактора.
Я, в большинстве случаев, разрабатываю темы для клиентов гибридным способом. Потому что это быстрее и потому что на изучение FSE необходимо время.
К существу
И именно со своего сайта я и решил изучать блочные темы. За выходные вышел текущий сайт. И пока я могу сказать, что данный вариант разработки подходит для небольших проектов.
Очень удобно редактировать всё из админки, минимум касаясь кода. Но стандартные возможности всё-таки несколько ограничены.
Например, первый мой шок был, когда выяснилось, что блоками никак не предусмотрено использование медиа-запросов. Понятное дело, что можно подключить сторонний файл с прописанными правилами CSS (так я и сделал в итоге). Но хотелось бы, чтобы была какая-то дополнительная вкладка, которая позволяет настроить отображение на мобильном телефоне. Но ничего такого нет.
Второй шок — это отсутствие возможности задать отрицательный margin. Вы скорее всего видели подобный эффект, когда изображение накладывается на как бы предыдущую секцию. Конкретно мне это надо было для настройки отображения аватарки на главной странице.
Как я решил проблему? Мне помог плагин Editor Plus. Он добавляет много дополнительных вкладок для стандартных блоков. Например, раздел Transform, который может перемещать содержимое блока по оси X, Y, Z. Почему такого нет из коробки, неясно.
Еще крутой раздел, который добавляет плагин каждому блоку, Custom CSS — не переходя в сторонний редактор можно стилизовать конкретно текущий блок любым CSS. И тут уже возможности безграничны. Тоже хотелось бы, чтобы это было из коробки. Очень удобно.
Были ещё моменты, который решил данный плагин. И мне удалось более менее воссоздать карточку социальных сетей, которую я когда-то делал на CodePen.
Итого
У меня получилось воссоздать несложный проект, используя стандартные возможности FSE и плагина Editor Plus.
Могу сказать, что буду использовать данную систему пока только в небольших проектах. Потому что очень много нюансов, которые ещё не продуманы.
Но отмечу, что создание побочных страниц, типа страница поиска, 404 и т.д. — одно удовольствие. Это очень быстро и удобно.