Редактор Gutenberg — это интуитивно понятный встроенный визуальный редактор WordPress, который стал доступен в 2018 с версии WordPress 5.0 и выше. Этот редактор значительно упрощает создание страниц сайта, статей и виджетов. В этой статье мы расскажем о его возможностях, правильной работе с блоками и скрытых возможностях.
Обзор визуального редактора WordPress
При переходе в Gutenberg вы сразу заметите, что стандартное боковое меню WordPress уступает место удобному полноэкранному режиму. Окно редактора можно условно разделить на три части:
- Визуальный редактор: занимает основную часть экрана слева и позволяет создавать контент, который будет выглядеть на вашем сайте так же, как и в редакторе.
- Верхняя панель: содержит общие функции, такие как добавление новых блоков, отмена/повторение действий, сохранение черновика, предварительный просмотр и публикация.
- Боковая панель: находится справа и содержит дополнительные параметры, включая настройки публикации страницы/записи и настройки внешнего вида блоков.
Настройки редактора Gutenberg
Кроме стандартного набора функций, в Gutenberg есть возможность персональной настройки под себя. Вы можете выбирать предпочтительные блоки, настраивать их внешний вид и расположение для более удобного редактирования.
В Gutenberg предусмотрены удобные инструменты, такие как автосохранение, возможность перехода к HTML-редактору для более глубокой настройки, а также подсказки и шаблоны блоков для быстрого создания контента.
Основная фишка Gutenberg — это работа с контентом блоками. Вы можете легко добавлять, перемещать и настраивать блоки текста, изображений, видео, таблиц, форм и многие другие для создания контента.
Чтобы максимально эффективно использовать Gutenberg, не забывайте о клавиатурных комбинациях, которые позволяют быстро управлять блоками и выполнять различные действия без лишних кликов мышью.
Если базовых функций вам недостаточно, вам доступны различные плагины и расширения, которые добавят новые блоки, настройки и возможности для еще более продуктивной работы с контентом.
Базовые блоки редактора
По умолчанию в стандартной функционале редактора присутствует более 20 блоков. На сегодня уже есть много плагинов, расширяющих базовый функционал редактора. Основной набор блоков включает в себя:
- абзац,
- заголовок,
- подзаголовок,
- цитата,
- изображение,
- галерея,
- изображение обложки,
- видео,
- аудио,
- столбцы,
- файл,
- код,
- список,
- кнопка,
- встраиваемые объекты.
Новые инструменты веб-дизайна делают управление элементами страницы легче и более гибким. Все элементы теперь представлены в виде отдельных блоков, что позволяет перемещать и легко их настраивать. Перетаскивание блоков на странице осуществляется простым движением мыши. Есть возможность изменять не только цвет текста, но и цвет фона каждого абзаца. И это еще не все – размер шрифта тоже поддается индивидуальной настройке для каждого абзаца.
Настройка рабочей области
Настройки Gutenberg отображаются в правой части верхней панели визуального редактора, доступ к которым можно получить через иконку с тремя точками. Здесь представлен ряд полезных опций:
- Верхняя панель инструментов: Добавляет дополнительную панель с параметрами настройки выбранного блока, что упрощает его кастомизацию.
- Режим подсветки: Затемняет остальное содержимое в редакторе, сфокусировав внимание на текущем блоке.
- Полноэкранный режим: Позволяет переключаться между полноэкранным отображением редактора и стандартным боковым меню WordPress.
- Визуальный редактор/Редактор кода: Две опции для работы с контентом – в удобном визуальном режиме и в редакторе кода для использования HTML-структур.
- Менеджер блоков: Позволяет управлять блоками, исключая те, которые не требуются на сайте, для более чистого и удобного интерфейса.
- Управление «Моими блоками»: Создание и хранение паттернов из блоков для быстрого добавления на сайт, что особенно полезно для стандартных элементов дизайна.
- Горячие клавиши: Список комбинаций клавиш для быстрой и эффективной работы в редакторе.
Начальная инструкция: Краткое руководство из четырёх шагов для ознакомления с основными функциями Gutenberg при первом использовании. - Скопировать содержимое: Позволяет копировать содержимое страницы для переноса на другой сайт или создания дубликата страницы на текущем сайте.
- Помощь: Ссылка на англоязычное руководство по Gutenberg на официальном сайте WordPress.
- Предпочтения: Настройки внешнего вида редактора, где можно скрыть ненужные разделы или настроить отображение часто используемых блоков для более комфортной работы.
Важные функции редактора
Один из ключевых элементов редактора Gutenberg – это его полезные функции, которые существенно упрощают процесс работы с сайтом. Давайте ближе познакомимся с некоторыми популярными опциями из верхней и боковой панелей визуального редактора WordPress, которые сделают вашу работу более продуктивной.
#1 Отмена и повтор действий
В верхней панели редактора Gutenberg расположены две кнопки со стрелками – влево и вправо. Стрелка влево выполняет отмену последнего действия, а стрелка вправо позволяет повторить отменённое действие. Это удобное средство, позволяющее легко корректировать изменения и быстро возвращаться к предыдущим шагам в процессе создания и редактирования контента.
#2 Сохранение процесса
Один из значимых плюсов использования редактора Gutenberg – это автоматическое сохранение изменений, которое происходит каждую минуту. Эта полезная функция позволяет сохранить вашу работу без лишних хлопот и необходимости нажимать кнопку «Сохранить черновик» каждый раз после внесения изменений.
Благодаря автосохранению, вы можете быть уверены, что ваша работа всегда останется зафиксированной и сохраненной, даже если что-то случится с вашим браузером или устройством. Теперь вы можете спокойно продолжать свою творческую работу, зная, что ваши данные всегда в безопасности.
Если ваша публикация находится в режиме черновика, для сохранения изменений достаточно нажать кнопку «Сохранить черновик». Это действие сохранит не только внесенные изменения, но и создаст редакцию — версию вашей работы, к которой вы сможете вернуться в любой момент.
Когда ваша запись или страница уже опубликована, кнопка «Сохранить черновик» меняет свою функцию. Нажав на неё, вы отмените публикацию и переведёте её обратно в статус черновика. Если же вам нужно сохранить прогресс уже опубликованной страницы или записи, просто используйте синюю кнопку «Обновить». Таким образом, ваш контент всегда будет актуален.
#3 Восстановление предыдущей редакции
Хранение предыдущих версий вашей работы стало проще с разделом «Редакции» в Gutenberg. Он расположен на боковой панели, расположенной под блоком «Статус и видимость» на вкладке «Страница» или «Запись».
При выборе блока и переходе в раздел «Редакции», вы обнаружите две колонки: «Было» и «Стало», отображающие изменения, с возможностью переключения между версиями через кнопки «Предыдущая» и «Следующая».
Когда вы находитесь на нужной редакции, в правом верхнем углу появится кнопка «Восстановить эту редакцию». Просто нажмите её, чтобы вернуться к предыдущей версии вашего творения. Этот инструмент позволяет вам уверенно редактировать сайт, зная что вы всегда можете вернуться к прежним изменениям.
#4 Скрытие контента от общего доступа
Контроль доступа к вашей публикации становится проще с разделом «Статус и видимость» на боковой панели Gutenberg. Здесь, в разделе «Видимость», представлены три уровня доступа:
- Открыто: Ваша страница будет доступна для просмотра всем пользователям.
- Личное: Только авторизованные пользователи WordPress с ролями «Администратор» или «Редактор» смогут просматривать вашу страницу.
- Защищено паролем: Доступ к странице получат лишь те, кто введет специальный пароль, который вы установите.
#5 Изменение URL записи
Изменение URL вашей публикации осуществляется в разделе «Постоянная ссылка» на боковой панели при помощи опции «Ярлык URL». Прямо под этой опцией вы увидите предпросмотр ссылки с вашим доменным именем. Нажав на эту ссылку, вы откроете предпросмотр страницы, аналогичный нажатию кнопки «Просмотреть» в верхней панели.
В ярлыке URL можно использовать как латинские, так и кириллические символы. Однако латиница обычно более удобна, поскольку многие приложения при копировании кириллических ссылок могут искажать их.
#6 Выбор рубрики для записи
В блочном редакторе вы можете присвоить статье определенную рубрику с помощью одноименного раздела «Рубрики» на боковой панели. Здесь вы можете выбрать уже существующую рубрику или создать новую, просто нажав на кнопку «Добавить новую рубрику». Эта опция позволяет статье находиться одновременно в нескольких рубриках.
#7 Задать основное фото для записи
Процесс настройки главного изображения выполняется в разделе «Изображение страницы» или «Изображение записи» на боковой панели редактора. Это изображение будет отображаться при ссылке статьи в социальных сетях и также будет видно на странице рубрики.
Как работать с блоками редактора
Визуальный редактор WordPress основан на концепции блоков, где каждый элемент публикации представлен как отдельный блок. Это означает, что абзацы, кнопки, списки, заголовки и изображения — все они являются индивидуальными блоками. Давайте рассмотрим основные действия с блоками, которые могут пригодиться вам при работе над вашим сайтом.
Добавление нового блока
Чтобы добавить новый блок, нажмите кнопку «+» в левой части верхней панели Gutenberg. Затем выберите нужный блок из списка, который появится слева, и он автоматически добавится в конец вашего редактора.
Также можно нажать кнопку «+», расположенную между двумя существующими блоками, чтобы добавить новый блок между ними. При этом появится всплывающее окно с выбором блоков или строка поиска для быстрого доступа к нужному элементу.
Форматирование текста
Как только вы выберите любой из блоков, прямо над ним появится всплывающая панель с его настройками. Опции на ней будут отличаться в зависимости от типа блока. Например, у блока «Абзац» это будут стандартные кнопки для работы с текстом: выделить жирным, курсивом, добавить ссылку, изменить цвет текста или фона.
Перетаскивание блока
Вы можете легко изменить порядок блоков на странице. Для этого вам достаточно выделить нужный блок и стрелками Вверх Вниз переместить его в нужное место. Также ви можете зажать кнопку рядом с указателями и просто перетянуть этот блок.
Все блоки редактора можно редактировать, настраивать их отображение, кастомизировать, копировать или создавать шаблоны для дальнейшего использования. Не бойтесь экспериментировать, так как все ваши изменения сохраняются в WordPress и Вы всегда можете восстановить любую версию страницы. Ознакомившись с базовими функциями редактора Gutenberg и немного попрактиковавшись, Вы станете отличным пользователем и быстро сможете публиковать качественный контент на своем сайте.
