Gutenberg: обзор нового модульного редактора WordPress

В декабре 2018 года вышла версия WordPress 5.0. Главное изменение — новый редактор записей и страниц. В этой статье рассмотрим, что в нём изменилось.

обзор нового модульного редактора WordPress

Почему Gutenberg

Новый редактор назвали в честь первого типографа Европы — Иоганна Гутенберга. В 15 веке он придумал первый печатный станок. С этого началась печатная революция. Книги стали выпускать быстрее и в бо́льших количествах, потому что больше не нужно было писать каждый экземпляр от руки. Благодаря этому информация стала доступнее для обычных людей.

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

подвижные литеры печатного станкаПодвижные литеры современного печатного станка Bacher. Фото Вилли Хайдельбаха

Печатные станки с похожей технологией используют до сих пор. Сейчас они печатают автоматически, но тогда всю работу приходилось делать вручную. Выглядело это примерно так:

первые печатные станки
Первые печатные станки были больше похожи на тренажёры

Разработчики WordPress вдохновились изобретением Гутенберга и решили переосмыслить подход к созданию постов и страниц. Новый редактор сделали понятнее для тех, кто не разбирается в HTML и CSS. Посмотрим, что изменилось.

Новый дизайн

Визуально WordPress Gutenberg выглядит минималистично и напоминает редактор Медиума или Телеграфа.

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

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

старый редактор вордпресс Старый редактор

новый редактор вордпресс Новый редактор

Больше инструментов

Функциональность старого редактора была больше похожа на Microsoft Word — работать можно было только с текстом. Чтобы добавить в статью видео, кнопку или фотогалерею, нужно было искать подходящий плагин или самому писать HTML.

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

добавление нового блока в wordpress gutenberg

Блоков много, поэтому для удобства их разбили на шесть групп:

  • Часто используемые. Здесь будут блоки, которые вы используете чаще всего.
  • Основные блоки. Заголовок, текст, список, изображение, аудио и видео.
  • Форматирование. Таблица, рамка, цветная плашка, журнальная цитата, фрагмент кода.
  • Элементы разметки. Разрыв страницы, интервал, разделительная линия, колонки, кнопка.
  • Виджеты. Рубрики, последние или архивные записи, комментарии.
  • Вставки. Видео с YouTube, Vimeo или Dailymotion, посты в Facebook, Instagram или Twitter.

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

Галерея. Поможет компактно разместить несколько фотографий. В галерее может быть от одной до восьми колонок. Чтобы блок выглядел аккуратнее, в настройках можно обрезать эскизы изображений.

как загрузить изображение в wordpress gutenberg

Цитата и выдержка. При помощи этих блоков можно выделить главную мысль в тексте или разбавить большой отрывок текста. Подобные элементы можно увидеть в печатных журналах.

как добавить цитату в тексте на вордпресс Так выглядит цитата в тексте

как добавить выдержку в тексте на вордпресс А это — выдержка

В параметрах обоих блоков можно настроить внешний вид несколько стилей и выравнивание текста.

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

стих в вордпресс гутенберг Текст на серой плашке привлечёт внимание читателя

Колонки. Теперь текст можно разбить на колонки прямо в редакторе. Раньше это можно было сделать только с помощью CSS.

разбить текст на колонки в водпресс

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

как добавить кнопку в вордпресс гутенберг

Вставки. В статью можно добавить посты с популярных сайтов: Facebook, Instagram, Twitter, YouTube, Vimeo, Soundcloud, Tumblr. Вводите ссылку на пост и редактор сам встраивает фото, видео или текст в статью.

как вставить фото из instagram в пост на вордпресс Так, например, выглядит вставка с постом из Instagram

 

Форматирование и перемещение блоков

Панель с инструментами форматирования появится автоматически, если кликнуть по блоку левой кнопкой мышки.

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

как форматировать текст на вордпресс

Если нажать на шестерёнку в правом верхнем углу редактора, откроются дополнительные настройки. Для текстового поля это размер и цвет шрифта.

настройки цвета и шрифта в вордпресс

Справа от шестерёнки — три точки. Это меню с общими настройками. В нём можно включить полноэкранный режим или посмотреть список горячих клавиш.

как открыть общие настройки в вордпресс

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

блоки текста в вордпресс

Статистика и навигация

Если нажать на значок с буквой «i» в левом верхнем углу редактора, появится статистика записи.

как открыть статистику записи

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

блоки записи в wordpress

Мобильная версия

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

Если коснуться пальцем какого-то из блоков, появится панель форматирования. При нажатии на три точки откроются все инструменты панели. Среди них — удалить блок.

как выглядит мобильная версия вордпресс гутенберг
Стрелочки внизу панели — для перемещения блоков

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

открыть дополнительные настройки редактора вордпресс
Чтобы не промахнуться, увеличьте экран двумя пальцами перед тем, как нажать на шестерёнку

Окно с дополнительными настройками открывается на весь экран. Чтобы увидеть изменения, придётся закрыть блок.

как настроить текст и цвет в вордпресс
Если перейти на вкладку «Документ», а потом назад на «Блок», выделение блока пропадёт и появится надпись «Блок не выбран»

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

настройки шрифта
Кнопка с размером шрифта нажата, но выпадающий список не появляется

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

текстовые колонки

Колонки появятся, если перевернуть смартфон горизонтально, но редактировать их всё равно не слишком удобно. Особенно, когда колонок больше, чем две.

колонки текста в вордпресс Редактировать текст не слишком удобно, потому что в колонке помещается только одно слово

Как вернуть старый редактор

Если вам неудобно работать в новом редакторе WordPress — Gutenberg, можете вернуть старый. Для этого выберите в новом редакторе блок с названием «Классический» при создании новой записи или страницы.

Есть и другой вариант — установить плагин «Classic Editor».

А как вам новый редактор? Поделитесь своими мыслями в комментариях.

Антон

Пишет и редактирует тексты, увлекается дизайном. Мечтает создать полезную рассылку или блог с нуля.
Понравилась статья? Оставь свой голос!