Дайвинг в новый текстовый редактор WordPress Gutenberg (за и против)

Из этой статьи вы узнаете:

Что такое Гутенберг

Что нового в редакторе Гутенберга

Плюсы и минусы Gutenberg

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

Некоторые другие полезные вещи нового редактора WordPress

Приветствуем вас! За последние 14 лет в текстовом редакторе WordPress мало что изменилось. Текущий редактор WordPress интуитивно понятен и прост. Однако ему не хватает современных функций, которые должен иметь редактор. Например, нет функции перетаскивания.

Чтобы вставлять разнообразные элементы, вам нужно либо использовать HTML, либо использовать короткие коды. Это не удобно, не так ли?

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

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

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

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

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

Что такое Гутенберг?

Вкратце, Gutenberg это — это новая замена текущему редактору WordPress, где вы пишете свои сообщения. Он фокусируется на контенте, основан на концепции блоков и имеет интуитивно понятный универсальный интерфейс.

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

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

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

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

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

Что нового в редакторе Гутенберга

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

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

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

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

Gutenberg также содержит несколько незначительных дополнений, включая следующие функции:

• Добавлены таблицы и кнопки. Эти типы контента теперь являются частью WordPress по умолчанию.
• Якорям HTML можно назначить блоки. Это позволяет вам напрямую ссылаться на блок.
• Были внесены изменения в визуальные и HTML-редакторы. Вместо того, чтобы изменять весь редактор между визуальным и HTML, блоки теперь могут редактироваться индивидуально с использованием любого режима.
• Появился новый виджет боковой панели «Оглавление». Он появляется, если вы добавили по крайней мере два заголовка и можете получить краткий обзор структуры вашего контента.
• У вас есть доступ к новым параметрам выравнивания и вставки. Теперь вы можете выровнять контент с использованием опций 'wide' и 'full-width'. Кроме того, вы можете встраивать блоки с контентом из десятков разных источников.

Это еще не все на что способен данный инструмент. Всю его прелесть вы поймете при работе с ним.

Плюсы и минусы Gutenberg

Положительные стороны Gutenberg

• Он выполнен с использованием современных технологий
• Отличный пользовательский интерфейс, быстрое и простое управление
• Меньше необходимости в редактировании HTML и добавлении пользовательского кода
• Параметры редактирования страницы унифицированы в одном месте без блокировки пользовательских коротких кодов
• Современный дизайн
• Блоки преобразования
• Открытый API
• Живые настройки
• Поддержка пользовательских блоков
• Современные стандарты кодирования
• Блок коротких кодов
• Поддерживает настраиваемые типы сообщений
• Поддержка классического редактора
• Мобильный
• Редактор кода

Недостатки редактора Gutenberg

• Текущая версия Gutenberg не поддерживает разметку
• Колонки по-прежнему остаются невосприимчивыми
• Бета-версия. Требуется множество исправлений ошибок
• Проблемы совместимости с несколькими плагинами
• Ограниченная поддержка мета-бокса

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

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

Вы можете загрузить последнюю версию Gutenberg из репозитория WordPress или найти ее в своей панели WordPress.

Теперь под элементами «Страница» — «Запись» есть отдельные ссылки для редактирования в привычном редакторе.

Теперь в админ панели появилась новая вкладка Gutenberg, в которой расположены следующие пункты:

• Демо
• Поддержка
• Обратная связь
• Документация.

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

Давайте немного пробежимся по интерфейсу Gutenberg.

1 Нажмите эту кнопку, чтобы добавить новый блок.

2 Кнопки отмены / повтора позволяют перемещаться вперед или назад, чтобы легко редактировать.

3 Эта область настроек включает в себя многие из тех же параметров, что и текущая боковая панель редактора WordPress. Здесь вы добавляете категории / теги, устанавливаете изображение, выбираете дату публикации и т.д.

4 Когда вы выбираете отдельный блок, эта область настроек включает в себя настройки, характерные для этого блока. Здесь вы можете выбирать цвета, стили и другие важные детали, специфичные для данного блока.

5 Эти две кнопки позволяют просматривать или публиковать сообщение.

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

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

Теперь, когда вы знаете, как работает интерфейс, ну, в какой-то степени. Теперь давайте посмотрим, как вы можете использовать Gutenberg для написания сообщений в блоге.

Например, предположим, что вы хотите написать сообщение в блоге, которое включает в себя:

• Текст
• Изображение
• Встроенное видео YouTube
• Таблицу
• Кнопку призыва к действию

Шаг 1. Итак, пишем текст, используя блоки абзацев. Чтобы написать текст своего сообщения в блоге, не нужно добавлять новый блок. Просто щелкаем по странице и пишем.

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

Если вы хотите добавить ссылку, изменить выравнивание или форматировать текст, вы можете просто щелкнуть по текстовому блоку и использовать плавающую панель меню.

Шаг 2. С этим мы разобрались. Теперь давайте добавим изображение.

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

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

Когда вы это сделаете, вы сможете загрузить новое изображение или выбрать изображение из своей медиабиблиотеки, как и в текущем редакторе WordPress.

Шаг 3. Так, с этим тоже вроде все понятно, теперь давайте добавим блок встраивания YouTube. Чтобы вставить видео YouTube, вы следуете почти идентичному процессу:

• Наведите указатель мыши туда, куда хотите встроить видео на YouTube
• Нажмите значок + Plus
• Перейдите на вкладку «Вставки»
• Выберите YouTube

Затем все, что вам нужно сделать, это вставить URL-адрес видео, нажать «Вставить», и вы увидите встроенное видео прямо в своем сообщении.

Шаг 4. Добавляем блок таблицы. Блок таблицы позволяет легко вставлять и манипулировать таблицей в любом месте вашего контента.

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

• Нажмите значок + Plus
• Перейдите на вкладку «Форматирование»
• Выберите «Таблица»

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

Шаг 5. Нам осталось добавить кнопку призыва к действию. Блок кнопок является одним из наших любимых дополнений к редактору Gutenberg, потому что кнопки — это то, что ранее было трудно добавить, не зная об использовании пользовательского CSS. Но с Гутенбергом, использовать кнопки, просто.

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

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

Переходим на вкладку «Блок», чтобы изменить цвет вашей кнопки.

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

Некоторые другие полезные вещи нового редактора WordPress

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

Цвет фона в любой блок абзаца

Одна из полезных функций — возможность добавить уникальный цвет фона в любой блок абзаца в вашем сообщении.

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

Функция автоматической вставки

И, наконец, если вы хотите сэкономить время при вставке новых блоков, нам нравится функция автоматической вставки.

Вместо того, чтобы использовать значок + Plus каждый раз, когда вы хотите вставить новый блок, вы можете просто начать вводить и использовать этот формат / имя-блока.

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

Использование анкоров

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

Это отлично подходит для совместного использования, а также для создания перехода к меню в SERP.

Опции блокировки и нового выравнивания

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

С помощью редактора нового редактора WordPress вы также можете выровнять ширину.

Заключение

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

В целом мы в восторге от нового редактора Gutenberg WordPress. А вы что думаете по поводу проекта Gutenberg? Ну что у нас на этом все. Всем пока!

С уважением Вячеслав и Валерия!