WordPress Gutenberg: самое важное о новом редакторе для WordPress – здесь и сейчас!

Новый редактор Gutenberg для WordPress поможет вам по-новому взглянуть на редактирование веб-страниц и постов в WordPress. Но, возможно, сейчас вам вовсе так не кажется – наоборот, нововведения вызывают у вас массу вопросов и сомнений. А к лучшему ли, вообще, все эти изменения?!

Именно для вас мы написали краткое руководство по новому редактору Gutenberg и WordPress 5.0. Надеемся, что этим материалом мы развеем ваши сомнения и ответим на все важные вопросы.

Новый редактор WordPress

Что такое WordPress Gutenberg?

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

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

И в чем же разница? — спросите вы. Ключевое различие состоит в том, что WordPress Gutenberg – скорее, является быстрым и удобным конструктором страниц, а это значит, что вы получаете больше контроля над тем, как распределить контент в постах и на веб-страницах.

При работе в новом редакторе Gutenberg и редактировании поста или веб-страницы в WordPress вы сможете выкладывать на страницы различные медиафайлы, а затем – распределять файлы и текстовую информацию по веб-страницам, находясь в той же программе-редакторе Gutenberg и использую функцию Gutenberg Blocks.

Когда редактор Gutenberg станет доступен для пользователей?

Gutenberg уже можно скачать и установить на свой сайт в качестве отдельного плагина. Он доступен на официальном сайте WordPress.

После релиза WordPress 5.0 вы увидите, что Gutenberg уже встроен в обновленную версию программы. Создатели сообщали, что выход WordPress 5.0 намечен на 27 ноября 2018 года, однако если разработчики обнаружат проблемы в новой версии, то выход WordPress 5.0 будет отложен до 22 января 2019 года (прим.: на момент публикации данного материала в официальном блоге WordPress, дата релиза убрана совсем).

А что произойдет с классическим редактором WordPress?

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

Мы решили не бросать таких пользователей на произвол судьбы. Поэтому если вы не захотите пользоваться новым редактором Gutenberg после выхода WordPress 5.0, то сможете без проблем установить классический редактор и продолжать работать в нем. Классический редактор будет доступен для установки в качестве плагина и будет официально поддерживаться разработчиками вплоть до 31 декабря 2021 года.

В чем преимущества WordPress Gutenberg?

Дело в том, что новый редактор специально был создан для того, чтобы рядовым пользователям без специального образования и опыта веб-дизайна было проще создавать и редактировать веб-сайты и блоги. Вот что по этому поводу написали в посте Focus Tech и Design Leads:

С каждым постом или веб-станицей, созданными в новой программе-редакторе, вы будете приходить вот к какой мысли: то, что для вас было сложно создать раньше, сейчас вообще не требует никаких усилий. Если раньше вам нужно было использовать шорткоды или кастомизировать HTML или же «вознести хвалы Ктулху», то сейчас для всего этого есть удобная функция БЛОКИ.

Итак, в новом редакторе Gutenberg появились БЛОКИ, а это значит, что с их помощью вы сможете создавать красивые и модные сайты и посты своими руками – быстро, легко и без помощи сотни плагинов. Фактически в БЛОКАХ реализованы те функции, которые уже существовали в программе-редакторе ранее, главное, что сейчас они сведены воедино, а значит, что многие обнаружат в БЛОКАХ эти интересные функции и опробуют их.

Для чего созданы БЛОКИ в Gutenberg?

Фактически БЛОКИ – это тот принцип, по которому построен новый редактор. Именно БЛОКИ позволят вам добавлять файлы и материалы на веб-страницу или в пост. При помощи БЛОКОВ вы сможете выложить на сайт буквально всё, что захотите: текст, отдельные цитаты, фотографии, видеоролики, кнопки, виджеты и многое другое.

Для чего созданы БЛОКИ в Gutenberg

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

Для чего созданы БЛОКИ в Gutenberg

Обратите внимание, чтобы проиллюстрировать, насколько удобно пользоваться БЛОКАМИ в новом редакторе, мы специально выбрали для вас фотографии с блоками и кубиками (вот такие мы продуманные).

Добавим к этому, что в дальнейшем мы опубликуем для вас более подробное руководство по использованию БЛОКОВ, а пока ограничимся лишь общей информацией.

Меню редактора WordPress Gutenberg: общая информация

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

Меню редактора WordPress Gutenberg

11 параметров меню верхнего меню

Меню расположено в верхнем углу экрана и содержит 11 команд:

  1. Назад.
  2. Добавить блок.
  3. Отменить последнее изменение.
  4. Восстановить последнее изменение.
  5. Структура контента.
  6. Навигация по блокам.
  7. Сохранить черновик.
  8. Предпросмотр.
  9. Опубликовать.
  10. Настройки.
  11. Другие опции.

1. Назад.

Когда вы нажмете «Назад», программа перенаправит вас на страницу редактирования всех постов или страниц в зависимости от того, какой контент вы редактируете в данный момент.

2. Добавить блок.

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

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

  • абзац,
  • заголовок,
  • список,
  • галерея изображений,
  • фотография,
  • цитата,
  • разделитель,
  • видеоролик,
  • обложка.

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

3. Отменить последнее изменение.

Нажатие на эту иконку отменяет последнее внесенное вами изменение.

Отменить последнее изменение

4. Восстановить последнее изменение.

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

5. Структура контента.

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

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

Заметим, что использование заголовков (h1, h2, h3, h4, h5, h6) поможет вам правильно структурировать информацию, а значит, вашим читателям будет удобно ее воспринимать.

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

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

6. Навигация по блокам.

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

Навигация по блокам

7. Сохранить черновик.

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

8. Предпросмотр.

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

9. Опубликовать.

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

10. Настройки.

Иконка с шестеренкой позволит вам открыть/закрыть меню настроек справа.

Настройки

11. Другие опции.

Другие опцииНажмите на иконку с тремя точками, и вам откроется меню «Другие инструменты и опции». В нем вы увидите новые разделы: «Вид», «Редактор» и «Инструменты».

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

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

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

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

Меню редактора Gutenberg: раздел ДОКУМЕНТ

Итак, продолжаем говорить о новом редакторе Gutenberg и на этот раз заглянем в меню ДОКУМЕНТ. Нажимаем на ДОКУМЕНТ, и нам открываются 10 команд, при помощи которых мы будем работать с материалом на веб-странице или в посте, созданном в WordPress.

Меню редактора Gutenberg раздел ДОКУМЕНТ

1. Документ.

При нажатии на «Документ» вы сможете открыть/закрыть правое меню с настройками документа.

2. Блок.

При нажатии на «Блок» вы сможете открыть/закрыть настройки блока.

3. Статус и видимость.

Статус и видимостьПри нажатии на «Статус и видимость» вы увидите общую информацию по текущему статусу страницы или поста и их видимости.

  • Видимость — Опция «Видимость поста» позволит вам выбрать аудиторию, которая сможет просматривать пост или веб-страницу после ее публикации. Вам доступен выбор между следующими параметрами: Открыто, Личное и Защищено паролем.
  • Публикация — Используйте эту опцию для автоматической публикации поста в заданное вами время. Для этого просто выберите дату и точное время публикации веб-страницы или поста.
  • Формат поста — При нажатии на эту строку меню вы можете выбрать формат нового поста, например: краткая заметка на полях (обычно без заголовка), пост со ссылкой, с фото, цитатой, видеороликом или стандартный.
  • Закрепить на главной странице — Используйте, если хотите чтобы данная запись закрепилась в ленте статей.
  • На утверждении — Поставьте здесь галочку и сохраните свой новый пост, при этом пост автоматически получит статус «На утверждении».

4. Предыдущие версии.

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

Предыдущие версии

5. Категории.

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

6. Теги.

Здесь вы сможете поменять тег вашего поста или создать новый.

7. Миниатюра записи.

Здесь вы сможете добавить изображение-миниатюру к посту.

8. Краткое содержание.

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

  1. Предоставляемые вами краткие описания будут появляться в RSS-фидах вместо целого поста в том случае, если включена опция «показывать краткое содержание поста» в меню Панель управления > Настройки > Чтение.
  2. В превью постов: в зависимости от темы WordPress краткое содержание постов может появляться там, где предпочтительнее показывать лишь цитаты из постов, а не посты целиком, например: в результатах поиска или архивах, разбитых по категориям, тегам, месяцам, авторам.

9. Обсуждение.

Здесь вы сможете выбрать, разрешить пользователям писать комментарии в вашем посте или на веб-странице в WordPress или нет. Также вы сможете выбрать, включить ли пингбеки и трекбеки – рассылку уведомлений, информирующих авторов блогов о том, что вы ссылались на них на своем сайте, и как следствие автоматическое появление в чужих блогах комментариев с указанием на ваш сайт.

  • Пингбек – это вид комментария, отправляемый в блог другого пользователя в тот момент, когда вы публикуете в своем посте ссылку на блог этого пользователя, при этом пингбеки в блоге пользователя должны быть включены. Пингбеки создаются автоматически и не генерируют контент самостоятельно.
  • В cвою очередь, трекбек-уведомление должно быть сгенерировано самим пользователем, цитирующим чужой блог. Создавая трекбек, пользователь демонстрирует, что совершенно легально ссылается на другой блог. Трекбеки предполагают отсылку в чужой блог краткого содержания вашего поста.

Меню редактора Gutenberg: раздел БЛОК

В правой части экрана вы увидите раздел БЛОК. Кликните на него, чтобы перейти в раздел с различными вариантами форматирования блоков, которые задействованы на вашем сайте. Для начала выберите блок, с которым вы намерены работать (и, кстати, вы можете работать с каждым блоком отдельно).

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

block-settings-spacer
block-settings-auido
block-settings-quotes
block-settings-gallery
block-settings-heading
block-settings-paragar

Настройки блока для продвинутых пользователей

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

Изменить тип блока

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

Изменить тип блока

Редактировать текущий блок

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

Редактировать текущий блок

Больше опций для блоков

Больше опций для блоковКаждый блок в редакторе Gutenberg содержит множество дополнительных опций. Чтобы увидеть их, воспользуйтесь крайней правой иконкой в меню БЛОК.

При нажатии на эту иконку появятся дополнительные настройки:

  • Cпрятать настройки блока
  • Продублировать
  • Вставка до
  • Вставка после
  • Редактировать HTML-код
  • Добавить в мои блоки
  • Удалить блок
Спрятать/показать настройки блока

При нажатии на эту опцию вы сможете спрятать или показать меню БЛОК на панели инструментов справа. Логично будет спрятать это меню, если вы хотите расчистить поле деятельности.

Спрятать/показать настройки блока

Вставка до

Нажмите «Вставка до», чтобы вставить новый блок выше выделенного вами блока.

Вставка после

Нажмите «Вставка после», чтобы вставить новый блок ниже выделенного вами блока.

Редактировать HTML-код / Редактировать визуально

При нажатии на эту строку вы сможете переключаться между двумя режимами редактирования: Редактировать визуально, или как HTML-код. Редактирование в формате HTML полезно в том случае, если вы хотите увидеть HTML-код блока или поменять этот код, например, для изменения тегов div или стилей, задействованных в блоке. Нажмите на строку еще раз, чтобы вернуться в обычный режим редактирования.

Добавить в мои блоки

Нажмите «Добавить в мои блоки», чтобы блок, с которым вы работаете в данный момент, был сохранен для дальнейшего использования. Эта опция может пригодиться вам в том случае, если вы часто используете один и тот же текст, фотографии или иконки.

Добавить в мои блоки

Удалить блок

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

А теперь попробуйте поработать в Gutenberg cами!

Сейчас, когда вы узнали, как работать в новом редакторе Gutenberg, почему бы и не перейти от теории к практике? Вы можете сделать это уже сейчас, не дожидаясь релиза WordPress 5.0. Для этого просто скачайте плагин Gutenberg и установите его на свой сайт на WordPress – и вперед, в дивный новый мир!

Оригинальная статья (англ. яз.) -> https://ithemes.com/2018/11/15/wordpress-gutenberg-ultimate-guide/

Всего комментариев - 4.

  1. Бес попутал обновиться, ей богу! Превращают Вордпресс в тупой викс какой-то. При публикации статьи выдает урл с миллионом циферок и буковок, начинаю править, предлагает написать на русском. До обновления все прекрасно работало и автоматом заголовок статьи уходил латиницей в урл, который я подрезала (не люблю бороды). Галерея моя красивая со слайдером превратилась в набор иконок. За что, товарищи разработчики, вы новую головную боль нам придумали?

    1. Лана, у меня плагин Cyr to Lat enhanced отлично справляется с транслитерацией в WordPress 5.0.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

*
*
*

Нажимая кнопку «Отправить комментарий» я даю свое согласие на использование и обработку моих персональных данных в соответствии с ч. 1 ст. 9 ФЗ от 27.07.2006 г. № 152 «О персональных данных»