Gutenberg – это новый визуальный редактор контента, который заменил стандартный, начиная с WordPress 5.0. В его основе лежат блоки, которые обеспечат гибкость и простоту редактирования записей/страниц.
Особенности
Gutenberg представляет весь контент в виде блоков и определяет макет поста непосредственно в редакторе. Это позволяет не разделять контент от его оформления и дает возможность пользователю создавать сложные макеты. Достаточно просто выбрать тип блока и добавить в него содержимое. Блоки можно легко перемещать.
В Gutenberg есть много типов блоков, включая таблицы, столбцы, код, кнопка и пр.
Преимущество нового редактора – корректное отображение таблиц по умолчанию. В старом редакторе для них разработчик темы должен был прописывать CSS-стили. В Gutenberg оформление таблиц задано изначально.
C Gutenberg встраивание внешнего содержимого стало проще. Для этого есть специальные настройки для вставки видеороликов с 34 популярных видеосервисов. Для этого просто перейдите в раздел Вставки и выберите нужный сервис.
Обзор редактора
Чтобы добавить блок, для начала создайте новую запись. Для этого перейдите Записи > Добавить новую.
Контент, который был создан в классическом редакторе, в Gutenberg будет представлен в блоках. Для каждого из них будет показана полноценная панель инструментов.
Новый редактор WordPress может показаться непривычным для пользователей. Все блоки скрыты, пока не будут вызваны. Также нет обычных кнопок, а сам контент занимает почти весь экран. Все добавленное содержимое записи/страницы выглядит так, как на сайте.
Боковая панель справа имеет две вкладки: Документ и Блок.
Настройки вкладки Документ настраивают публикацию: выбор рубрики, меток, миниатюры.
Блок отвечает за активный блок.
Добавление нового блока
Чтобы добавить новый блок, найдите и нажмите кнопку +.
В итоге откроется список блоков, доступных в Gutenberg.
Передвижение блока
В Gutenberg вы можете легко передвигать блоки. Для этого нужно выделить блок, после чего появятся значки в виде стрелок. Нажимая их, вы увидите конечное положение выбранного блока.
Режимы просмотра
В новом редакторе есть два режима просмотра контента: Визуальный редактор и Редактор кода. По умолчанию используется первый. Чтобы их переключить, в правом верхнем углу экрана нажмите кнопку в виде троеточия и выберите режим в блоке Редактор.
Все блоки Gutenberg состоят из HTML-комментариев.
Вставка галереи
В Gutenberg можно легко добавить галерею изображений. Для этого используйте блок Галерея.
Дальше добавьте изображения с помощью Медиабиблиотеки. В параметрах блока можно выбрать количество колонок. Размеры фото будут автоматически подстраиваться.
Если вы зададите нечетное число колонок, то размер последних картинок будет больше.
Добавление кнопок
Также вы сможете добавить кнопку. Для этого нужно выбрать блок Кнопка, добавить текст и URL-ссылку. Ее можно выровнять, изменить цвет фона/текста.
Добавление виджета
Чтобы добавить виджет, создайте новый блок и в разделе Виджеты выберите нужный вариант.
Что еще может Gutenberg?
Среди прочих функций нового редактора:
- отдельный блок для многоколоночного отображения контента;
- оглавление (содержание);
- дополнительные стили CSS;
- миниатюра записи/страницы;
- цитаты и блоки цитат;
- произвольный HTML-код;
- шорткоды.