Используем новый редактор блоков в WordPress 5.0

редактор блоков

Использовать новый редактор блоков в WordPress придется всем, кто обновил свой сайт на на этом движке до версии 5.0 и выше.

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

Новая функция? Новый по умолчанию редактор контента, названный Гутенбергом.

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

Чтобы сделать этот переход как можно более безболезненным, читайте эту статью-руководство, чтобы можно было начать осмысленную работу, как только обновите свой сайт до WordPress 5.0 или выше.

Чем отличается редактор блоков WordPress Gutenberg?

Всем хорошо знаком редактор TinyMCE, который выглядит так:

вот как выглядит новый редактор блоков Gutenberg:

Заметили разницу?

Так вот, главное в новом редакторе слово «блок».

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

Так:

  • Каждый абзац является отдельным блоком
  • Изображение является отдельным блоком
  • Цитата — это отдельный блок
  • Встроенное видео — это отдельный блок
  • И все, что ещ е можно использовать, это собственный блок

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

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

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

В редакторе TinyMCE вам потребуется использовать вкладку «Текст» для добавления класса CSS или использовать шорткод из плагина кнопки. В Gutenberg вы просто добавляете блок «Button» (кнопка) и видите кнопку прямо в редакторе:

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

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

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

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

Этот урок по редактору Гутенберга разобьем на две части.

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

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

Как создать основной пост в блоге или страницу с Гутенбергом

Добавить обычный текст в Гутенберг просто. Как и прежде, нажимаем и вводим. Разница лишь в том, что каждый раз, когда нажимаем «Enter», Гутенберг будет создавать новый блок абзаца.

Для форматирования текста (полужирный шрифт, выравнивание и т.д.) можно булет увидеть плавающую панель инструментов, которая появляется после того, как перестаем печатать:

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

Как вставить новый блок

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

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

Есть несколько способов добавить новые блоки:

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

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

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

Но также можно:

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

Рассмотрим несколько примеров …

Если вы хотите вставить изображение …

Захотели вставить блок с изображением. Далее можно будет использовать параметры, чтобы выбрать, откуда получить изображение:

Если вы хотите встроить видео YouTube …

Захотели добавить блок видео с YouTube — просто вставьте URL-адрес видео, и увидим предварительный просмотр в реальном времени:

Если вы хотите вставить заголовок (h2, h3 и т. д.)

Можно будет добавить блок «Заголовок» и выбрать уровень заголовка на панели инструментов:

Или можно также выбрать существующий блок абзаца и использовать панель инструментов, чтобы «преобразовать» его в блок заголовка (или другой тип блока — например, в цитату):

Как настроить блок

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

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

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

Как переставить контент

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

С Гутенбергом получаем два варианта:

  1. Стрелки вверх/вниз, которые перемещают блок вверх или вниз на одно место
  2. Функция перетаскивания, которая позволяет перетаскивать блок куда угодно

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

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

Как настроить базовую информацию поста (категория, слаг и т. д.)

Приведенные выше шаги дают все, что нужно для создания некоторых основных сообщений и страниц.

Ну а как насчет закулисной информации, такой как:

  • URL-слаг
  • Категория
  • Теги
  • И т.п.

Чтобы настроить всю эту информацию, можно использовать вкладку «Документ» на боковой панели, которая очень похожа на боковую панель в редакторе TinyMCE:

А как насчет плагинов, как Yoast SEO?

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

Как это работать в таком случае?

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

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

Пять дополнительных советов по использованию редактора блоков Gutenberg

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

Дальше рассмотрим несколько более сложных советов, как можно будет ускорить работу в редакторе Гутенберга.

1.Надо изучить сочетания клавиш для повышения производительности

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

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

Чтобы открыть полный список сочетаний, надо использовать сочетание клавиш «Shift + Alt + H»:

2. Быстрая вставка блоков с помощью слеша

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

Вот пример:

3.Можно перетащить изображения с рабочего стола в Гутенберг

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

4.Можно использовать блок «Столбцы» для более сложных макетов

Для создания более сложных макетов, в Gutenberg есть блок «Columns» (столбцы). Добавив блок столбца, можно добавить в него другие блоки:

Для большей гибкости с макетами можно установить плагин Kadence Blocks.

5.Использование преимуществ сторонних плагинов

Одной из замечательных особенностей Gutenberg является то, что можно использовать сторонние плагины для добавления новых блоков. Многие разработчики работают над созданием нового контента и блоков макетов, которые могут помочь расширить функциональность Гутенберга. Вот несколько хороших примеров:

  • Atomic Blocks
  • Ultimate Addons for Gutenberg
  • Stackable
  • Advanced Gutenberg

Плагин Gutenberg Cloud также интересный проект, который позволяет устанавливать определенные блоки от различных разработчиков.

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

Что происходит со старым контентом после обновления до WordPress 5.0 и выше?

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

Не стоит волноваться старый контент тоже не забыт.

Вот как это будет работать.

Допустим, есть пост, созданный с использованием редактора TinyMCE, который выглядит следующим образом:

Перейдя на WordPress 5.0 и редактор блоков Gutenberg, WordPress поместит весь старый контент в один классический блок. Классический блок — это, по сути, редактор TinyMCE… только внутри интерфейса Гутенберга.

Таким образом, вместо того, чтобы каждый элемент был отдельным блоком, все находится в этом одном классическом блоке. Это выглядит так:

Если нужно будет отредактировать старый контент, можно будет отредактировать его внутри классического блока так же, как и в редакторе TinyMCE:

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

Работать в редакторе Гутенберга или можно продолжать использование редактора TinyMCE?

Можно не использовать новый редактор блоков Gutenberg. Хотя он станет редактором по умолчанию в WordPress 5.0, есть также официальный плагин «Classic Editor», который позволит продолжить использовать оригинальный редактор TinyMCE, с которым уже знакомы. Кроме того, основная команда WordPress будет продолжать официально поддерживать редактор TinyMCE по крайней мере до конца 2021 года.

Все, что нужно сделать, это установить плагин с WordPress.org. Как только активируете его, он деактивирует редактор блоков Гутенберга, и можно будет создавать контент точно так же, как это делалось до WordPress 5.0.

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

Чтобы активировать этот параметр, надо перейти в «Настройки — Запись» и выбрать параметр «Использовать редактор блоков по умолчанию» и добавить дополнительные ссылки на классический редактор:

Эта статья как руководство по Гутенбергу!

В сообществе WordPress было много споров о новом редакторе блоков Gutenberg.

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

Посмотрите видео для ознакомления с редактором блоков и принципом работы с новой блочной конструкцией WordPress версии 5.0 и выше.

YouTube Трейлер