Обновленная статья с исправлениями и дополнениями находится здесь (на украинском языке)

к оглавлению ↑

Введение

Редактор Гутенберг стал частью WordPress с конца 2018 года.

Редактор Гутенберг — блочный редактор. Это значит что контент страницы представлен в виде отдельных блоков.
Страница по сути —  это набор блоков и определение какой будет отображаться страница происходит прямо в редакторе.

Классический редактор WordPress — это текстовый редактор. Другими словами — это программа для обработки текста, а определение какой будет отображаться страница задаются в файлах кода HTML и файлах стиля CSS.

В классическом редакторе контент и оформление разделены. Редактор Гуттенберг контент и оформление объединяет.

Рассмотрим основы как работать с редактором Гутенберг на примере стандартной записи, созданной в WordPress при его инсталляции.

к оглавлению ↑

Видео по теме статьи

Тайминг:
0:10 — общая информация о блочном редакторе
0:48 — как работать в редакторе — основы
3:05 — настройки блочного редактора
3:58 — раздел «Инструменты»
5:34 — боковое меню редактора Гутенберг
6:33 — область содержимого и ввод блоков
8:08 — группа часто используемые блоки
8:47 — панель инструментов блока
9:12 — перемещение блоков
9:27 — изменение типа блока
9:48 — навигация по вложенным блокам
10:37 — удаление блока
10:52 — шаблоны блоков
11:38 — предварительный просмотр страницы
12:06 — перевод контента из классического редактора в блочный

к оглавлению ↑

Редактор Гутенберг: общий вид экрана

Ниже приведен экран страницы редактирования записи в редакторе Гутенберг.

Редактор Гутенберг состоит из трех основных разделов: верхнего меню, боковых меню и основной области содержимого.

Области блочного редактора
к оглавлению ↑

Редактор Гутенберг: элементы верхнего меню

Элементы верхнего меню редактора:
1)  кнопка возврата к админике вордпресс, нажав на которую мы выйдем из редактора и вернемся назад в админпанель WordPress
2) кнопка добавление блоков: при нажатии получаем перечень всех доступных блоков, шаблонов блоков ( их называют паттерны) и список часто используемых блоков.
3) кнопка режимы — здесь выбираем взаимодействие с блоками на странице: или выбрать блок или его редактировать. Если активна опция редактировать — то при выборе блока на странице сразу переходим в режим редактирования. Чтобы вернутся к выбору блока, нажмите «Escape»; чтобы вернуться опять к редактированию, нажмите «Ввод».
4)  кнопки «Отменить» и «Повторить» — отменить действие или повторить отмененное действие
5) кнопка Подробности — показывает количество символов, слов, заголовков, параграфов и блоков, используемых в документе.
6) кнопка Контур — показывает список всех блоков, использованных на странице. Она нужна для переключения между блоками.

Кнопки управления в верхнем меню редактора

В верхнем меню размещена кнопка «Настройки». При нажатии на кнопку происходит появление или исчезновение бокового меню настроек страницы.

Ну и крайняя справа еще одна кнопка Настройки. При ее нажатии появляются настройки просмотра, стиля редактора и дополнительные инструменты.

Кнопки настройки блочного редактора
к оглавлению ↑

Опции меню «Дополнительные настройки»

Опция «Верхняя панель инструментов»  раздела Вид указывает место,  где будут отображаются панели инструментов блока при его редактировании: либо возле блока либо в верхнем меню.

Опция «Режим подсветки«: если включен, то блоки, которые не редактируются, частично исчезают и становятся полупрозрчными.

Кнопка «полноэкранный  режим»   переводит редактор в полноэкранный режим

Раздел Редактор.

По умолчанию открывается визуальный редактор. но можно переключится в редактор кода, чтобы просматривать всю страницу в виде кода.

Не весь код будет показан в режиме «Редактор кода». Код будет показан если он имеет верный синтаксис и не содержит ошибок, в нем используются только разрешенные теги HTML и нет кода с ограничениями на использование, например JavaScript.

Опции дополнительных настроек блочного редактора

Раздел Инструменты

Менеджер блоков позволяет отключить те блоки, которые вы не используете. Таким образом, когда приходит время искать блок, вам не нужно просеивать те блоки, которые вы не будете применять.

Опция «Управление всеми моими блоками» приведет вас к редактору персональных блоков.

Опция «Горячие клавиши» покажет комбинации клавиш быстрого доступа.

Опция «Скопировать все содержимое» скопирует все содержимое в буфер для вставки на другую страницу.

Опция Предпочтения поможет задать дополнительные настройки редактора и персонализировать отображение панелей.

Следует отметить что темы или плагины могут добавлять свои кнопки на панель верхнего меню.

к оглавлению ↑

Боковое меню редактора Гутенберг

При нажатии в верхнем меню на значок «Настройки» открываются боковое меню редактора Гуттенберг

В этом меню доступны несколько вкладок с параметрами как всей записи на вкладке Запись, так и параметрами выбранного блока на вкладке Блок.

Для записи в целом это:
Статус и видимость
Постоянная ссылка
Рубрики
Метки
Главное Изображение для записи
Отрывок
Параметры обсуждения

Щёлкните стрелку вниз рядом с каждым заголовком в настройках документа, чтобы редактировать конкретные опции.

В меню можно добавлять теги и рубрики, добавлять изображения в избранные, отслеживать и изменять статус записи. Эти опции применяются ко всей странице.

При нажатии на вкладку «Блок» в боковом меню настроек появляются параметры выбранного блока, соответствующие его типу

Повторное нажатие на значок «Настройки» скрывает боковое меню.

Если вы не видите настройки документа в правой части окна редактора блоков, щелкните значок настроек в виде шестеренки в правом верхнем углу и боковое меню появиться на экран

Боковое меню редактора Гуттенберг
к оглавлению ↑

Раздел «Область содержимого»

«Область содержимого» — раздел редактора, куда можно добавить блоки с контентом.

Создавать страницы в редакторе очень просто. На страницу добавляете блок и настраиваете параметры блока.

Блоки есть для каждого типа контента: текст, изображение, видео и аудио, столбцы, пробелы, кнопки, календарей и много другого.

Самый быстрый способ добавить блок — использовать значок плюса. Где бы вы ни увидели значок плюса, на него можно нажать и добавить блок.

Можно также начать вводить текст в пустой области, которая по умолчанию превращается в блок «Абзац».

4 способа как добавить блок в область содержимого:

1. Нажмите черный значок «+» сбоку от пустого блока или значок «+» в левом верхнем углу окна редактора.

2. Нажмите клавишу «Ввод» (клавишу перевода строки), находясь в выбранном блоке, чтобы создать под ним новый блок.

3. Еще один способ Щёлкните три точки над выделенным блоком и выберите, куда добавить новый блок: выше или ниже текущего.

4. Если вы знаете название блоков — то вы сможете добавлять их, вводя косую черту ( / ) и название блока. Например, /image или /heading.

Добавить блок на страницу  кнопкой плюс
добавить блок  клавишей ввод
добавить блок  через меню блока
добавить блок  через поиск косая черта и имя блока
к оглавлению ↑

Часто используемые блоки

Редактор Гутенберг позволяет выделить в отдельную группу часто используемые блоки.

Чтобы создать группу часто используемых блоков, выполните следующие действия.

1. Нажмите значок вертикального многоточия в правом верхнем углу экрана редактора.
2. Выберите пункт Предпочтения.
3. Выберите пункт «Блоки» и поставьте флажок рядом с пунктом Показать часто используемые блоки.

Когда это функция включена, группа блоков доступна в библиотеке. Нажмите значок «+» в верхнем меню, чтобы открыть библиотеку блоков. Часто используемые блоки отображаются вверху списка.

Группа Часто используемые блоки
к оглавлению ↑

«Анатомия» блоков редактора

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

Каждый блок имеет собственные настройки. Чтобы найти их, нажмите на блок. Откроется панель инструментов в верхней части блока. Дополнительные настройки блока находятся на боковой панели справа.

Для доступа к дополнительным опциям, которые есть у большинства блоков, нажмите кнопку с вертикальным многоточием справа на панели инструментов блока.

Анатомия блока

Перемещение блоков

Чтобы переместить блок, зажмите курсор мыши на значке с шестью точками на панели инструментов блока и перетащите блок.
Можно также нажимать значки стрелок, чтобы сдвинуть блок на одну позицию выше или ниже.

Изменение типа блока

Каждый блок можно преобразовать в блок другого сходного типа. Например, изменить абзац на заголовок, список или цитату.
Для этого нажмите значек слева в панели инструментов блока. Откроется окно с возможными вариантами преобразования.

Удаление блока

Чтобы удалить блок, выберите его и нажмите кнопку с многоточием на панели инструментов над ним. Вы увидите настройки, где есть опция удаления данного блока. Выберите опцию и блок будет удален

Меню блока редактора Гуттенберг

Навигация по вложенным блокам

Некоторые блоки могут вкладываются в другие блоки. Блоки, в которых они вложены, будут для них так называемые «родительские» блоки. Например в блок колонки можете добавить блок абзац. Для абзаца колонка будет родителським блоком

Если нажать на отдельную колонку, то отобразится панель инструментов блока, вставленного в эту колонку.

Чтобы выбрать настройки родительского блока, наведите курсор на самый левый значок. В пенели инструментов блока вверху слева появиться значек родительского блока. Щелкните на него курсором мыши и получите доступ до инструментальной панели родительского блока.

Другой способ: можно использовать меню «Сведения», чтобы переключаться между добавленными на страницу блоками для доступа к настройкам родительского блока.

Как получить доступ к меню родительского блока
к оглавлению ↑

Шаблоны блоков (Паттерны)

Шаблоны блоков (они же паттерны) — это коллекции настроенных блоков, которые можно вставить на страницу.

Например, с помощью шаблонов можно вставить и расположить рядом несколько изображений.

Для вставки шаблона на стрницу
1. Нажмите значок «+» в верхнем меню.
2. Откройте вкладку Паттерны.
3. Выберите шаблон и по щелчку мыши он будет вставлен на страницу в месте расположения курсора.

Теперь обратите внимание, что после того, как паттерн добавлен на страницу, он уже не никак не привязан к оригинальному шаблону. Это уже самостоятельный набор блоков, который вы можете изменять как хотите и который никуда не исчезнет, если вдруг оригинальный паттерн из кода будет удалён.

Шаблоны блоков
к оглавлению ↑

Перевод контента с классического редактора на редактор Гутенберг

Кратко затронем вопрос перехода контента с классического редактора на редактор блоков.
Если контент создан в классическом редакторе, а вы заходите его перевести в блочный — то сделать это очень просто.

Чтобы начать переход сперва отключите классический редактор, если вы его используете.
Напомню, что в современные версии WordPress по умолчанию установлен блочный редактор Гутенберг.

Страницу, которую нужно преобразовать в блоки, откройте для редактирования.

При загрузке страницы в редактор блоков все содержимое страницы будет помещено в отдельный блок Гутенберга, который так и называется: «классический». Этот блок будет обрабатывать содержимое так же, как это делалось в классическом редакторе.

После перехода с классического редактора на редактор блоков текущее содержимое должно выглядеть так же, как и раньше.

Перевод контента из классического редактора в блочный

Чтобы преобразовать сожержимое классического блока в отдельные текстовые и графические блоки, нажмите пункт преобразовать в блоки в панели над выбранным классическим блоком.

Преобразование выполняется довольно быстро. По завершении процедуры может потребоваться выровнять изображения и текст.

После преобразования не забудьте сохранить изменения.

Если вы используете плагин или тему Диви и ваши страницы сделаны с помощью Divi Builder — то при переключении на редактор Гутенберг делать ничего не надо.  Весь контент будет отображаться так как и отображался.
Редактированиие страниц вы будете производить в Visual Builder

При использовании на сайте Диви перед создании новой страницы появится окно выбора способа создания этой страницы: либо блочным редактором как мы рассмотрели выше, либо визуальным редактором Divi Builder.

к оглавлению ↑

Заключение

Я попрошу вашей обратной связи в комментариях о полезности приведенного в статье материала, о вашем опыте использования редактора, с какими трудностями вы сталкивались и как их «побороли».

Задавайте вопросы, пишите предложения и комменарии, делитесь ссылкой на статью с друзьями.

Удачи!
Александр Коваль

Рубрики: Контент и наполнение

Об авторе:

Александр Коваль

Александр Коваль

Предприниматель. IT-специалист. Создаю интернет-магазины, лендинги и другие сайты. Помогаю поддерживать их работу. Расширяю функционал и возможности сайтов на WordPress. Пишите если нужна помощь с сайтом или разработка "с нуля"

Share via
Send this to a friend