Что вы должны знать о редакторе Gutenberg WordPress

Опубликовано: 2018-03-08
Многие добровольцы и участники веб-сайтов теперь используют последнюю версию редактора Gutenberg WordPress . Тем не менее, их цель проста: сделать «добавление богатого контента в WordPress» более приятным и плавным.

Редактор Gutenberg WordPress станет одним из наиболее неотъемлемых аспектов ядра WordPress. Но что это вообще означает для владельцев веб-сайтов? Что делать, если пользователь уже использует конструктор страниц? На эти и другие вопросы мы ответим в этом руководстве. Также мы поговорим об основах Гутенберга. Кроме того, мы расскажем обо всем, что вам нужно знать о последней версии. А пока вот плагины для конструктора страниц, упрощающие разработку WordPress.

Понимание редактора Gutenberg WordPress

Редактор Gutenberg WordPress — это новый визуальный редактор. Кроме того, он был разработан для включения в ядро ​​​​WordPress. Gutenberg помогает, добавляя такие функции, как конструкторы страниц, но с добавленными блоками контента. Например, он может восстановить TinyMCE в качестве одного из редакторов контента по умолчанию.

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

Более того , Гутенберг больше, чем просто редактор. Он добавляет настройки ко всему опыту публикации контента. Это позволяет пользователю создать современный дизайн. Кроме того, он предлагает лучший опыт редактирования. Более того, он закладывает основу для будущих веб-сайтов WordPress. Gutenberg готовится к выпуску в составе WordPress 5.0.

Основная цель редактора Gutenberg WordPress

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

Основное использование — сделать процесс «добавления богатого контента в WordPress» более увлекательным и захватывающим.

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

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

Мэтт Малленвег — видная фигура, стоящая за Гутенбергом

Согласно объявлению Mullenweg в «State of the Word 2016», Гутенберг является визуальным редактором. Тем не менее, это один из трех основных направлений будущего WordPress. Ранее в 2017 году Мулленвег возглавил проект Гутенберга. Но для дальнейшего развития Мулленвег нанял Джоэна Асмуссена и Матиаса Вентуру. Он нанимает их в качестве автоматических сотрудников. Таким образом, если вы хотите узнать больше о Мулленвеге о Гутенберге, вам следует посетить «Мы назвали это Гутенбергом не просто так».

Редактор Gutenberg — это плагин

Добавить Gutenberg на свой сайт WordPress очень просто, загрузив его в виде плагина WordPress, который вы найдете в каталоге плагинов WordPress.
Плагин Gutenberg обновляется еженедельно, так как продолжают добавляться новые и улучшенные функции. Однако обратите внимание на описание этого плагина. Это все еще бета-версия программного обеспечения, и его следует использовать с надлежащей осторожностью. Как указывалось ранее, этот редактор, скорее всего, будет интегрирован в WordPress 5.0.

Гутенберг все еще реализуется

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

  • Гутенберг еще не закончен. В настоящее время реализуются различные функции Гутенберга. Наряду с этим в новой версии улучшены ранее реализованные функции и пользовательский интерфейс.
  • Не беспокойтесь, если Гутенберг в настоящее время не работает у вас правильно. Проблемы решаются по мере того, как команда продолжает его развивать.
  • Редактор пишется с помощью React JavaScript. Однако, учитывая текущий акт перелицензирования Facebook проекта под лицензией MIT, г-н Мэтт объявил, что Gutenberg и wordpress.com будут переписаны с использованием другой библиотеки. Это на некоторое время задержит прогресс Гутенберга.

Встраивания и блоки Гутенберга

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

Блоки

Общие блоки

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

Блоки макета

ВИДЖЕТЫ

Изображение

Стих

Более

Категории

Параграф

Стол

Разделитель

Короткий номер

Заголовок

Вытяните цитату

Текстовые столбцы

Последние посты

Галерея

Пользовательский HTML

Кнопка

Список

Пользовательский тест

Цитировать

предварительно отформатировано

Видео/Аудио

Код

Изображение обложки

Вот предлагаемые встраивания Гутенбергом.

Встраивает

YouTube

Облако

Mixcloud

СамодовольныйКружка

Твиттер

Анимото

Meetup.com

ТЕД

Инстаграм

Dailymotion

Реддит

Оратор

Фейсбук

КолледжЮмор

Фотоведро

ВидеоПресс

Звуковое облако

Хулу

Полидадди

Тамблер

Вордпресс

Иссуу

Скринкаст

WordPress.tv

видео

Имгур

ReverbNation

Вайн

Flickr

Забавный или умри

Слайдшер

Спотифай

Кикстартер

Скрибд

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

Вот некоторые из замечательных преимуществ включения Gutenberg в WordPress 5.0.

Прогресс визуального редактора WordPress

  • В течение многих лет визуальный редактор WordPress был довольно скучным.
  • Цель Gutenberg — интегрировать интуитивно понятный для пользователей интерфейс. Он разработан, чтобы помочь WordPress конкурировать с другими визуальными редакторами, такими как Squarespace и Wix.

Умный ход для хранения информации о блоках с помощью комментариев HTML

  • Гутенберг хранит информацию о блоках в комментариях HTML.
  • Эти комментарии не отображаются активно на активных страницах сайта и могут быть видны только на серверной части сайта.

Вы можете легко отключить Гутенберг, не нарушая работу сайта.

  • В отличие от любых других редакторов страниц, вы можете легко удалить этот визуальный редактор — Гутенберг, не нарушая работу сайта.
  • При повторной активации Гутенберга вы не потеряете ранее расположенные блоки. Комментарии HTML всегда сохраняются в содержимом.
  • Вы должны отметить, что если Гутенберг деактивирован, исходный код страницы может отображать комментарии HTML.

Лучшее выполнение процедуры копирования/вставки

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

Сильный вывод HTML5

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

Легко писать блоки

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

Минусы использования Гутенберга

Нет больше композиции в браузере

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

Пользовательский интерфейс может показаться вам немного неуклюжим.

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

Абзацы не имеют шорткодов

  • На данный момент нет возможности запуска шорткодов в блоках абзацев или текстовых столбцах.
  • Чтобы заставить их работать, они должны быть включены в блок шорткода.
  • Если шорткод создает какое-либо встроенное содержимое, такое как год или какой-либо встроенный призыв к действию, это может создать некоторые проблемы.
  • Обратите внимание, что шорткоды в записях/страницах могут продолжать работать, даже если Гутенберг интегрирован в существующий сайт. Разработчики лучше поработали над тем, чтобы текущая платформа не сломалась.

Никаких других вставок или изображений в абзацах

  • В Гутенберге изображения нуждаются в своем блоке. Таким образом, вы не можете обтекать изображения текстом.
  • Точно так же встраивания, такие как видео или аудио, также нуждаются в своем блоке. В противном случае вставки из Vimeo, YouTube и т. д. могут больше не работать в текстовых столбцах или абзацах Gutenberg.

Основные проблемы доступности (по крайней мере, на данный момент)

  • На данный момент Гутенберг сталкивается с проблемами доступности. Могут возникнуть серьезные проблемы с доступом к нему с помощью серверной части редактора. Это также относится к выводу контента во внешнем интерфейсе (т. е. встроенному CSS).
  • Перед окончательным выпуском команда WP Accessibility, скорее всего, решит эти проблемы.
    — Вообще, доступность — это приоритет для WordPress.
    - Поскольку встроенный CSS в настоящее время сохраняется в HTML-комментариях перед рендерингом во внешнем интерфейсе, то, как разработчики решат эту проблему, теперь является большим вопросом.

Старые темы не учитывают вывод HTML 5

  • Редактор блокирует вывод содержимого с помощью тегов HTML 5, таких как рисунок и раздел.
  • Многие старые темы не имеют CSS для настройки стилей тегов. Следовательно, отступы или поля для таких тегов могут отсутствовать.
  • Сам Гутенберг не имеет собственных таблиц стилей для этого.
Многое еще не решено с Гутенбергом

Связь между темами и редактором Гутенберга:

  • Как указывалось ранее, Гутенберг больше касается содержания, а не общего стиля. Вы все еще можете добавить некоторые цвета фона для блоков, но это больше похоже на встроенный стиль.
  • На данный момент поля и отступы блоков не учитываются.
  • Другие компоновщики страниц WordPress позволяют пользователю легко настраивать контроль над столбцами, строками, интервалами и т. д. В настоящее время Gutenberg зависит от темы для этого.
  • Что касается поддержки тем Gutenberg, в документации очень мало информации. Это также включает в себя широкую поддержку изображений, поддержку блоков и поддержку цветовой палитры.
  • В документации есть немного информации о применении стилей к редактору Gutenberg и использовании таблиц стилей.
  • Основная проблема заключается в том, что Гутенбергу еще предстоит решить проблемы для новичков в веб-разработке/дизайне. Это аудитория, которой Гутенберг стремится помочь, но большинство из этих людей понятия не имеют о том, как работают отношения между темами и системой WordPress.

Как Gutenberg будет интегрирован в ядро ​​WordPress?

Пока все указывает на то, что Гутенберг станет частью ядра WordPress. Ожидается, что версия WordPress 5.0 будет выпущена в 2018 году.
Если вам интересно, будет ли редактор включен по умолчанию или его можно отключить по выбору, на эти вопросы еще предстоит ответить. На данный момент ничего нельзя сказать с уверенностью. Возможно, редактор будет выполняться так же, как и REST API (включен по умолчанию). Кроме того, его можно легко отключить с помощью специального плагина или различных плагинов безопасности, таких как iThemes Security.

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

Дата выпуска редактора Gutenberg WordPress

Пока официальная дата релиза не объявлена.

Однако Мэтт Малленвег сказал: «Команда Гутенберга делает шаг назад. Они делают это, чтобы переписать Гутенберга с использованием другой библиотеки. Это может привести к задержке выпуска Гутенберга, по крайней мере, к задержке на несколько недель. Именно поэтому выпуск Гутенберга перенесен на 2018 год».

Было много бурных реакций на это конкретное заявление. Например, Йоаст сказал:

«Мы в Yoast были очень шокированы этими словами. В своем нынешнем виде Гутенберг вообще не готов к массовому использованию. На самом деле, мы не видим, что он готов к выпуску где-либо в первой половине 2018 года. Кроме того, готовность к выпуску означает, что у сообщества было достаточно времени, чтобы исправить все свои интеграции. Тем не менее, на данный момент плагины вообще не могут интегрироваться с Гутенбергом. Как, черт возьми, авторы плагинов должны иметь возможность построить свою интеграцию за несколько месяцев? Это невозможно. По крайней мере, без поломок».

Yoast рекомендует альтернативный курс для Гутенберга

«Мы с большим энтузиазмом относимся к идее блоков. Однако у нас есть серьезные опасения по поводу некоторых технических решений. Кроме того, нас беспокоит скорость процесса реализации. Тем не менее, мы очень обеспокоены тем, что плагины не могут интегрироваться с новым редактором».

Yoast обсудил концепцию включения своего плагина в Gutenberg.

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

Каково ваше мнение о Гутенберге?

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

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