Как использовать новый редактор блоков в WordPress 5.0
Приветствую, друзья!
Не так давно вышла новая версия WordPress 5.0, о которой я писал вот в этой статье. И я решил написать небольшое руководство по новому редактору в WordPress 5.0. Многим он не приглянулся (как впрочем и мне), но если вы прочтете эту статью — все может измениться.
Готовы? Тогда поехали!
В версии 5.0 WordPress претерпит одно из самых больших изменений за долгое, долгое время.
Новая функция? Новый по умолчанию редактор контента, названный Гутенбергом.
Редактор блоков Гутенберга полностью заменит редактор TinyMCE по умолчанию, который вы использовали в течение многих лет. Таким образом, способ создания контента на вашем сайте WordPress полностью изменится.
Чтобы сделать этот переход как можно более безболезненным, я создал это руководство по WordPress Gutenberg, чтобы вы могли начать работу, как только обновите свой сайт до WordPress 5.0 или выше.
Чем отличается редактор блоков WordPress Gutenberg?
Хорошо, если вы немного смущены тем, о чем я говорю, вот как выглядит редактор TinyMCE (он должен быть вам хорошо знаком!):
А вот как выглядит новый редактор блоков Gutenberg:
Итак … какая разница?
Что ж, главное слово «блок».
Вместо того, чтобы использовать одно поле для всего вашего контента, например, редактор TinyMCE, каждая «вещь» в Гутенберге — это отдельный блок.
Так:
- Каждый абзац является отдельным блоком
- Изображение является отдельным блоком
- Цитата — это отдельный блок
- Встроенное видео — это отдельный блок
- … вы поняли! Все, что вы можете использовать, это собственный блок
Следующий вопрос — почему блоки выгодны? Зачем менять все, как было?
Что ж, редактор блоков Gutenberg значительно упрощает создание более сложных макетов и использование более интересных типов контента. Помимо этого, это также намного более визуально, потому что вы можете точно видеть, как будет выглядеть каждый блок.
Например, предположим, что вы хотите добавить кнопку в свой пост.
В редакторе TinyMCE вам потребуется использовать вкладку «Текст» для добавления класса CSS или использовать шорткод из плагина кнопки. В Gutenberg вы просто добавляете блок «Button» (кнопка) и видите кнопку прямо в редакторе:
Другое большое преимущество Гутенберга и блоков связано с шорткодами, о которых я упоминал выше.
Шорткоды не очень интуитивный или визуальный способ добавления контента. С помощью Gutenberg разработчики плагинов могут создавать свои собственные блоки вместо использования шорткодов, что значительно упрощает добавление содержимого плагинов.
Учебное пособие по WordPress Gutenberg: использование нового редактора
Теперь, когда у вас есть некоторый базовый опыт работы с новым редактором, давайте перейдем к фактической части руководства с практическими рекомендациями.
Я разобью этот урок по редактору Гутенберга на две части.
Сначала я покажу, как использовать Гутенберга для того же, что вы уже можете делать с редактором TinyMCE. Цель этого первого раздела заключается в том, чтобы вы могли создавать контент того же типа, который вы уже делали, без перерыва.
После этого я пойду немного дальше и покажу вам расширенные советы по производительности, а также некоторые новые вещи, которые Гутенберг позволит вам сделать.
Как создать основной пост в блоге или страницу с Гутенбергом
Добавить обычный текст в Гутенберг просто. Как и прежде, вы нажимаете и вводите. Разница лишь в том, что каждый раз, когда вы нажимаете «Enter», Гутенберг будет создавать новый блок абзаца.
Для форматирования текста (полужирный шрифт, выравнивание и т.д.) вы увидите плавающую панель инструментов, которая появляется после того, как вы перестаете печатать:
Многим людям не нравится этот подход «плавающей панели инструментов». Поэтому, если вы предпочитаете фиксированный подход панели инструментов редактора TinyMCE, вы можете использовать раскрывающийся список в верхнем правом углу, чтобы «закрепить» панель инструментов в верхней части редактора. Просто выберите опцию для верхней панели инструментов:
Как вставить новый блок
Когда вы просто пишете, вы можете создавать новые блоки автоматически, печатая.
Для всего остального — изображений, видео, заголовков и т. д. — вам нужно добавить новый блок.
Есть несколько способов добавить новые блоки:
- Чтобы добавить новый блок внизу редактора, вы можете щелкнуть значок плюса в верхнем левом углу редактора.
- Чтобы добавить новый блок между существующими блоками, вы можете навести указатель мыши на то место, куда вы хотите вставить блок и щелкнуть там значок плюса.
Как только вы нажмете любой из значков плюса, появится всплывающее окно со списком всех доступных блоков.
В верхней части всплывающего окна вы увидите список блоков, которые вы используете чаще всего:
Но вы также можете:
- Используйте окно поиска для поиска блока по имени
- Прокрутите вниз, чтобы увидеть вкладки аккордеона для всех категорий доступных блоков
Давайте рассмотрим несколько примеров …
Если вы хотите вставить изображение …
Вы хотите вставить блок с изображением. Затем вы можете использовать параметры, чтобы выбрать, откуда получить изображение:
Если вы хотите встроить видео YouTube …
Вы хотите добавили блок видео YouTube. Затем просто вставьте URL-адрес видео, и вы увидите предварительный просмотр в реальном времени:
Если вы хотите вставить заголовок (h2, h3 и т. д.)
Вы можете добавить блок «Заголовок» и выбрать уровень заголовка на панели инструментов:
Или вы можете также выбрать существующий блок абзаца и использовать панель инструментов, чтобы «преобразовать» его в блок заголовка (или другой тип блока — например, в цитату):
Как настроить блок
Для основных вещей, таких как жирный шрифт, курсив, выравнивание и т. д. вы будете использовать панель инструментов.
Однако для других настроек блока вы будете использовать вкладку «Блок» на боковой панели справа.
Например, если вы добавляете блок «Button», вы можете использовать боковую панель справа, чтобы изменить его цвета:
Как переставить контент
В редакторе TinyMCE вам пришлось использовать «вырезать» и «вставить», если вы хотите изменить порядок содержимого.
С Гутенбергом вы получаете два варианта:
- Стрелки вверх/вниз, которые перемещают блок вверх или вниз на одно место
- Функция перетаскивания, которая позволяет перетаскивать блок куда угодно
Чтобы включить эти элементы управления, наведите курсор на блок, который вы хотите переместить.
Если вы хотите использовать функцию перетаскивания, вам нужно навести курсор мыши на шесть точек между стрелками. Затем вы сможете перетаскивать мышью вот так:
Как настроить базовую информацию поста (категория, слаг и т. д.)
Приведенные выше шаги должны дать вам все, что вам нужно для создания некоторых основных сообщений и страниц.
Но как насчет закулисной информации, такой как:
- URL-слаг
- Категория
- Теги
- И т.п.
Чтобы настроить всю эту информацию, вы можете использовать вкладку «Документ» на боковой панели, которая очень похожа на боковую панель в редакторе TinyMCE:
А как насчет плагинов, как Yoast SEO?
Возможно, у вас есть другие плагины, которые вам нужно будет настраивать от поста к посту. Типичными примерами являются плагины СЕО, плагины для социальных сетей и т. д.
Так как это работает?
Ну, некоторые плагины, такие как Yoast SEO, уже встроены в поддержку Гутенберга. Чтобы получить доступ к настройкам Yoast SEO или другим плагинам с такой поддержкой, вы можете нажать на значок в правом верхнем углу. Затем вы сможете настроить плагин на боковой панели:
Для других плагинов вы все равно сможете использовать «метаблоки», которые появляются под текстовым редактором, как и раньше:
Пять дополнительных советов по использованию редактора блоков Gutenberg
Приведенное выше руководство по редактору Гутенберга поможет вам продолжать создавать контент того же типа, который вы уже создавали с помощью редактора TinyMCE.
Теперь давайте рассмотрим несколько более сложных советов, как получить больше от редактора Гутенберга.
1. Изучите сочетания клавиш для повышения производительности
Поскольку в Гутенберге все является отдельным блоком, для выполнения задачи требуется гораздо больше «щелчков мышью». Это означает более медленную работу, особенно в начале.
Лучший способ устранить эту проблему — изучить сочетания клавиш редактора Гутенберга. Это позволит вам быстро добавлять или удалять блоки по мере необходимости.
Чтобы открыть полный список сочетаний, используйте сочетание клавиш «Shift + Alt + H»:
2. Быстрая вставка блоков с помощью слеша
Вместо того, чтобы использовать всплывающее окно вставки блока каждый раз, когда вы хотите добавить блок, более быстрый способ — просто набрать «/» в пустом блоке и искать блок по имени.
Вот пример:
3. Перетащите изображения с рабочего стола в Гутенберг
Чтобы ускорить добавление изображений, вы можете перетащить их прямо с рабочего стола в определенное место в редакторе. Гутенберг автоматически загрузит их в вашу медиатеку:
4. Используйте блок «Столбцы» для более сложных макетов
Если вы хотите создавать более сложные макеты, в Gutenberg есть блок «Columns» (столбцы). Добавив блок столбца, вы можете добавить в него другие блоки:
Для большей гибкости с макетами вы можете установить плагин Kadence Blocks.
5. Воспользуйтесь преимуществами сторонних плагинов
Одна из замечательных особенностей 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, и я надеюсь, что это руководство по редактору Гутенберга поможет вам.
У вас есть еще вопросы о новом редакторе блоков Gutenberg? Оставьте комментарий и я постараюсь вам помочь!
До скорых встреч!
Здравствуйте! Информация очень полезная. Изложение ясное и понятное. Есть один вопрос, ответа пока нигде не увидел. Каким образом использовать «Формат по образцу» текста одного блока для других таких же текстовых блоков. К примеру в блоке размер шрифта установлен 16 px в других 14px. Задача сделать размер шрифта во всех блоках 16 px.
С Уважением, Александр.
Спасибо за полезный обзор! Я пробовала пользоваться Гуттенбергом, мне понравилось, но когда я стала оптимизировать скорость загрузки сайта, заметила, что этот плагин заметно тормозит скорость загрузки, поэтому от него пришлось отказаться.