Gutenberg — новый редактор для WordPress

Gutenberg — новый редактор контента для WordPress, который в новых версиях “движка” заменит стандартный. Проект назван именем Иогана Гутерберга, который впервые представил в Европе печатный станок и тем самым начал печатную революцию. По словам разработчиков, Gutenberg создан с упором на многолетний опыт редактирования текстового и мультимедиа контента. Его основой являются блоки, благодаря которым процесс создания записей и страниц станет более гибким и простым.

На сегодняшний день Gutenberg доступен как плагин, и он будет включен в стандартную поставку WordPress 5.0. Классический редактор, по необходимости, будет доступен как бесплатный плагин Classic Editor. Это означает, что вы всегда сможете вернутся к старому редактору, к которому уже так привыкли WordPress-пользователи.

Особенности Gutenberg

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

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

Редактор Gutenberg

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

Типы блоков Gutenberg

Важным преимуществом нового редактора является предустановленные возможности вставки таблиц с дальнейшим их корректным отображением. Так, в старом редакторе, чтобы таблица не “ехала” за границы контентной части страницы, разработчикам приходилось для нее прописывать css-стили. Такого же эффекта можно было добиться с помощью установки дополнительных плагинов. В Gutenberg корректное отображение таблиц задано по умолчанию.

Работа с таблицами в Gutenberg

Также в новом редакторе разработчики хотят добиться полной замены шорткодов при добавлении большого количества контента в запись или на страницу. Благодаря этому, встраивание внешнего содержимого станет проще. Gutenberg имеет специальные настройки для вставки видеороликов с YouTube, публикаций Reddit, Tweets, ссылок Spotify и многое другое. Это упрощает процесс, который обычно требует установки дополнительных плагинов или генерирования специального HTML-кода для вставки на свой сайта. На сегодняшний день поддерживается 34 популярных ресурса. Например, для вставки видео нужно всего лишь создать новый блок Вставки и выбрать из списка нужный видеосервис.

Вставка видеоролика в Gutenberg

Как установить Gutenberg?

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

Обзор редактора Gutenberg

После того, как дополнение было активировано, можно переходить к созданию новой записи — Записи -> Добавить новую.

Создание новой записи в Gutenberg

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

Редактирование записи в Gutenberg

На первый взгляд новый редактор WordPress слегка непонятен, так как все инструменты скрыты до тех пор пока они вам не понадобятся. Можно заметить, что тут отсутствует полноценная панель инструментов с кнопками как в старом редакторе, а сам контент страницы занимает большую часть экрана. Благодаря прозрачности редактора обеспечивается лучшее представление окончательного вида записи. Интересно, что добавленный контент в редакторе выглядит аналогично опубликованному.

Правая боковая панель имеет две вкладки: Документ и Блок.

Создание новой записи в Gutenberg

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

Во вкладке Блок отображаются всевозможные настройки для выбранного на данный момент блока.

Создание новой записи в Gutenberg

Например, для блока Параграф (как в нашем примере) доступно:

  • выделение заглавной буквы;
  • настройка размера и цвета шрифта;
  • цвет фона для блока;
  • выравнивание блока.

Добавление нового блока

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

Добавление нового блока в Gutenberg

В итоге перед вами откроется список всевозможных блоков.

Добавление нового блока в Gutenberg

Передвижение блока

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

Передвижение блока в Gutenberg

Режимы просмотра

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

Переключение режима просмотра в Gutenberg

Видно, что все блоки, созданные в редакторе Gutenberg, состоят из HTML-комментариев.

Переключение режима просмотра в Gutenberg

Вставка галереи изображений

Новый редактор позволяет также быстро и просто вставить галерею изображений. Для этого существует отдельный блок Галерея.

Блок Галерея в Gutenberg

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

Вставка галереи в Gutenberg

Добавление кнопок

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

Вставка кнопки в Gutenberg

К добавленной кнопке вы сможете применить выравнивание, а также изменить цвет фона и текста.

Добавление виджета

Редактор Gutenberg позволит вам добавлять в контентную часть страницы или записи виджеты. Отметим, что в старом редакторе это можно было сделать с помощью отдельного плагина.

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

Вставка виджета в Gutenberg

Добавим, к примеру, виджеты Рубрики и Последние записи.

Вставка виджета в Gutenberg

Остальные возможности Gutenberg

Среди прочих полезных возможностей нового редактора можно выделить:

  • отдельный блок для многоколоночного отображения контента;
  • вставка оглавления и якорей;
  • дополнительные CSS-стили;
  • вставка миниатюры для записи или страницы;
  • цитаты и блоки цитат;
  • добавление пользовательского HTML-кода;
  • вставка шорткодов.

В качестве заключения

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

Курс WordPress-разработчик
Если Вам понравилась статья — поделитесь с друзьями
Михаил Петров
Привет! Меня зовут Михаил Петров. Я копирайтер и занимаюсь этим с 2013 года. Скрупулезность и ответственность - моя фишка! Не могу делать как попало и добиваюсь, чтоб заказчик сказал минимум “неплохо”. За все время своей работы пришлось написать и отредактировать немало разной “текстовухи”, включая SEO-тексты, отзывы и прочую чушь. На сегодняшний день специализируюсь на написании информационных статей и руководств технического направления. Вижу смысл и светлое будущее в текстах для людей, а не для машин.