Как использовать редактор Gutenberg (Полное руководство)

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

Если вы писали статьи на таких сайтах, как Medium.com, вы, возможно, сталкивались с опытом, подобным Гутенбергу. Однако редактор Gutenberg гораздо более полный и поставляется с другими блоками.

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

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

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

Все, что вам нужно знать о редакторе Gutenberg

---

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

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

Редактор Гутенберга назван в честь Иоганн Гутенберг, кто изобрел печатный станок 500 лет назад. 

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

С появлением редактора Гутенберга эта система полностью изменится. 

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

Ожидается, что новый редактор станет частью  WordPress ядро к концу 2018 года.

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

Более 600 тысяч пользователей уже используют редактор Gutenberg для тестирования или на активных сайтах. 

Начало работы с Гутенбергом 

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

Мы использовали редактор Gutenberg на BeginDot за последние несколько дней. Конечно, у него есть несколько преимуществ, но требуется множество доработок, что вполне ожидаемо, поскольку работа над ним сейчас в процессе.

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

Здесь вы увидите опцию плагина Gutenberg. Просто установите и активируйте плагин.

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

После активации плагина вы увидите опцию Гутенберга на своем WordPress панель приборов.

Внешний вид редактора

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

Интерфейс понятен и не отвлекает. Теперь вы можете начать добавлять нужные блоки в свой пост.

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

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

У вас также есть возможность добавить блок в верхний левый угол страницы. 

Правая панель

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

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

Визуальный редактор и редактор кода

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

Избранное изображение для публикации

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

Повторить и отменить вариант

Вот удобная функция для перемещения вперёд и назад по статье. Редактор Gutenberg предлагает простые функции возврата и отмены в левом верхнем углу интерфейса редактирования. 

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

Быстрая статистика

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

Блоки Гутенберга

Редактор Гутенберга — это прежде всего блоки. Итак, это балки, из которых строится дом.

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

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

Давайте рассмотрим каждую из групп одну за другой.

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

Общие блоки также будут содержать в себе несколько похожих блоков.

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

Блоки форматирования

Есть несколько полезных блоков под форматирование группа. Такие как после

• Классический редактор: Если вам нужна старая классическая панель инструментов редактора, чтобы редактировать что-либо, вы найдете ее здесь.
• Пользовательский HTML: Возможность добавления пользовательского HTML
• Добавить код: Добавьте код в свои обучающие посты
• Добавьте таблицу: Это очень полезное дополнение к WordPress редактор; теперь вам не понадобится плагин для добавления таблицы к вашим постам.

Встраивание

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

В настоящее время производители контента очень регулярно используют контент из Twitter, Instagram и YouTube.

Редактор Gutenberg позволяет пользователям легко и просто встраивать контент из ряда популярных платформ.

Блоки, связанные с макетом

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

Есть несколько полезных вариантов дизайна макета на выбор. 

Создание поста с помощью редактора Gutenberg

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

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

Чтобы создать запись в блоге, перейдите к опции «Портировать новый», как и в старом редакторе.

Шаг 1. Заголовок и абзацы

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

Шаг 2. Добавление изображения

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

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

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

• Простой блок изображения
• Блок изображения и текста (находится под блоками макета)
• изображение на обложке

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

Шаг 3. Добавьте видео

Как уже обсуждалось в разделе «Блоки», редактор Gutenberg поставляется с исчерпывающим списком параметров встраивания.

Таким образом, вы можете встраивать не только видео с YouTube, но и контент из других сервисов, чтобы сделать свой пост в блоге эффектным.

Чтобы добавить видео в запись блога

Нажмите на значок «+» и перейдите в раздел «Встроить». Выберите YouTube из списка, добавьте URL-адрес видео — и готово.

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

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

Редактор поставляется с свою Собственный блок кнопок. Вы можете добавить кнопку и оформить её по своему вкусу.

Шаг 5. Добавление цвета фона к тексту

Гутенберг дает вам возможность добавить фон цвет вашего текста, если вы хотите выделить какой-либо текст в сообщении. 

Процесс довольно прост: вам просто нужно выбрать текст, который вы хотите выделить, и на правой панели появятся параметры цвета. Выберите цвет фона, цвет текста и готово. 

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

Проблемы совместимости

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

Много WordPress Темы и плагины пока несовместимы с редактором. 

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

Точно так же многие шорткоды плагинs не будет работать, так как у Gutenberg есть своя собственная опция шорткода.

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

Мы подготовили статью о лучший Гутенберг готов WordPress темы. Вы можете выбрать любую тему из этого списка. 

Gutenberg во многих отношениях хорош, но во многих его аспектах требуются улучшения.

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

Итак, вот список вещей, которые нам нравятся в редакторе, и вещей, которые создают для нас проблемы.

Плюсы Гутенберга

• Редактор достаточно прост и удобен в использовании.
• Он всеобъемлющий с точки зрения доступных опций
• Для добавления кнопки или выделения содержимого не требуются технические навыки.
• Новый пользователь сможет создать красивую статью с красивой презентацией.
• Современные варианты макета, а не просто контент в одну колонку.
• Интерфейс понятен и не отвлекает внимание.
• Отлично работает на мобильных устройствах 

Минусы Гутенберга

• Есть возможность открыть ссылку в новый окно, но нет возможности добавить Nofollow день
• Хотя во многих местах есть обсуждения, специальной поддержки пока нет.
• Совместимость плагинов и тем может быть большой проблемой
• Многие важные плагины на данный момент не работают должным образом.

Заключительное слово

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

Поэтому не забудьте добавить комментарий или проблему в поле для комментариев ниже.