Кто сегодня не слышал про великого печатника? Я, конечно, тоже помнил из школьной истории про Иоганна Гутенберга, но при первой информации про плагин Gutenberg для WordPress, всё равно улыбнулся. Почему то промелькнула спонтанная ассоциация, с суровым мужиком по кличке Хайзенберг, кто смотрел «Во все тяжкие» — поймут. Но идея с печатником понравилась, хороший пример для подражания и историческая подоплёка – достойная.
Gutenberg новый графический редактор для WordPress
Для тех, кто не в курсе, plugin Gutenberg это новый графический редактор для WordPress, фактически, это новая рабочая среда, существенно расширяющая возможности редактирования материалов сайта. Сейчас плагин можно скачать в административной панели CMS и попробовать его возможности, или полностью перейти на работу с его блочным интерфейсом.
Но, начиная с версии WordPress 5.0, Gutenberg войдёт в ядро системы и станет редактором по умолчанию. А если вы привыкли к классическому редактору Вордпресс, то устанавливать его придётся уже в качестве альтернативного, в виде отдельного плагина. Представляю, какой взрыв мозга может произойти у пользователей (не разработчиков и не программистов, которые не в курсе нововведения).
Человек обновляет WordPress и не увидит классического редактора. Что он будет делать? Да разумеется, стучаться к веб-мастеру, который ему делал сайт и спрашивать – «как работать в новой оболочке?» Так что предвижу аврал обращений от бывших клиентов, в момент выхода WordPress 5.0. Извиняюсь за лирическое отступление, и возвращаемся к Гутенбергу.
Работа в Gutenberg
Устанавливаем плагин, создаём новый документ, и выбираем, с помощью какого визуального редактора мы будем его строить – Gutenberg или классический редактор WordPress. Выбираем Гутенберг и что мы видим? Отсутствие привычных инструментов визуального редактора, для работы с текстом и изображениями.
Но не стоит пугаться, они все на месте, просто основа Гутенберга в создании материалов из блоков. То есть мы вставляем блок – заголовок, блок – параграф текста, блок – картинку, блок – таблицу и так далее. Но давайте рассмотрим, что такое работу с Gutenberg по порядку.
Создаём новую запись и видим окошко «Добавить заголовок». В него и пишем название нашего нового материала. Далее, мы можем добавить текстовый блок, изображение, либо какой-то другой элемент, нажав «плюсик» чуть ниже блока заголовка.
Или нажать «плюс» в верхнем левом углу, на странице редактирования, и выбрать один из стандартных блоков для добавления контента, элементов разметки, виджетов, комментариев и текстов из социальных сетей и сервисов.
Кроме того можно добавить форматирование, таблицы, коды. Работая с Gutenberg, в один клик, можно добавлять ролики из Youtube, фотки с комментами из Instagram, ленту из Twitter и вообще данный редактор очень дружелюбно относится к большинству социальных сетей и сервисов.
Кстати, если у вас установлены, совместимые с Гутенбергом расширения, вы сможете значительно улучшить возможности нового редактора. И наряду со вставкой стандартных элементов, появится возможность добавлять новые блоки, собственные слайдеры, анимацию и многое другое
Что и говорить, разобравшись с новым плагином, работа в Gutenberg доставляет удовольствие. Мы можем не просто добавлять блоки по порядку, а кликнув на нужный, вставить после него любой новый блок, поменять их местами, или удалить любой лишний. Удалить блок можно просто выделив его, и нажав клавишу «Delete», либо нажать три точки в правом углу блока, которые выводят общие для всех блоков опции и выбрать «Удалить блок».
Отменить операцию Ctrl+Z, повторить Ctrl+Chift+Z или воспользоваться стрелочками, в том же верхнем левом углу. Там же находится кнопка «I», которая выводит информацию – сколько слов в нашем тексте, заголовков, параграфов и блоков. И значок навигации по размещённым блокам.
По мере работы замечаешь, вёрстка в Гутенберге очень удобна, главное найти необходимые элементы управления и запомнить где они находятся. На мой, не профессиональный взгляд, Gutenberg для WordPress добавил ощущение работы с небольшим билдером страниц, и возникает чувство, что ты работаешь в конструкторе, при этом остаются все возможности обычного редактора.
Сама идея подачи и формирования материала в виде блоков помогает создать правильную и более удобную для пользователя структуру.
Хотя опять ассоциации! Мне это напомнило древнюю, табличную вёрстку сайтов. Динозавры HTML наверняка вспомнят и поймут, о чём говорю.
Обратите внимание, при заполнении текстового блока, для истинных любителей стучать по клавишам онлайн писателей есть один маленький нюанс. При нажатии клавиши «Enter» вы будете перескакивать не только на новую строку, но и автоматически сформируется новый текстовый параграф. Это нужно учитывать.
Настройки документа и отдельных блоков
Каждый блок в Gutenberg для WordPress имеет свои собственные настройки, которые выводятся в верхней части блока. С помощью настроек, можно изменить внешний вид содержимого под ваши потребности. Кроме того, если нажать «три точки» в правой части раздела настроек блока, то откроются опции одинаковые для всех типов блоков.
Если вы большой любитель форматированного текста, обратите внимание на блок «Форматированный», при его использовании, получаешь небольшую копию старого визуального редактора, с классическими возможностями текстового редактора.
С правой стороны при работе с Gutenberg мы имеем консоль с настройками, в которой имеются вкладки для дополнительных настроек каждого блока и общие опции открытого документа – «Блок» и «Документ». К примеру, во вкладке «Блок» мы можем выбрать размер и цвет текста, цвет фона, применить собственные стили CSS и многое другое. Причём при редактировании разных блоков, перед нами открываются опции настройки именно этого блока.
Так при настройке блока изображения можно задать его размер в процентах или выбрать произвольные размеры, заполнить атрибут alt, задать свои стили, настроить ссылку. Вкладка «Документ» открывает настройки, которые ранее были доступны при редактировании записи в классическом редакторе WordPress. Здесь можно выбрать рубрику, метки, изображение записи, возможность комментирования и т.д.
В правом углу, верхней строки редактора, мы имеем ещё «три точки» — дополнительные пользовательские настройки. Здесь можно скопировать всё содержимое (все блоки страницы) и поместить это содержимое на другую страницу, перейти в редактор кода для всей страницы, сохранить любой блок к себе в библиотеку и использовать на другой странице, и ряд других полезных функций, значительно расширяющих возможности автора блога или сайта.
Выводы
Немного поработав в новой среде Gutenberg для WordPress, начинаешь замечать её достоинства. Например, можно очень легко передвигать блоки и менять их местами. Вставка таблиц и их настройка, вставка колонок, теперь просто песня! Ни в какое сравнение с прежним редактором.
Удобно, что Gutenberg запоминает и предлагает для вставки, часто используемые блоки. Если вы работаете с кодом, каждый блок можно редактировать или поправить в режиме «Редактировать как HTML». Сколько раз, в старом редакторе, я редактировал страницы в режиме HTML, а при переключении в визуальный редактор — код стирался.
Теперь этого бага нет, просто супер! Кроме того, вставкой блока «Код» можно сразу на странице приводить примеры кода и он отображается корректно. Очень понравилась вставка изображений и формирование галерей.
В зависимости от функций темы, с Гутенбергом, можно вообще обойтись без дополнительного плагина для вывода картинок. Если вы только создаёте сайт на WordPress. я бы рекомендовал использование данного визуального редактора.
Одним словом серьёзных ошибок или каких то косяков мне обнаружить не удалось. Конечно Гутенберг добавляет в код документа свои теги, хорошо это или нет покажет будущее. Любители чистого кода, всегда могут вернуться к блокноту.
