WordPress Gutenberg: испытайте новый редактор блоков

Каждый новый выпуск WordPress воспринимается с большим энтузиазмом, и WordPress 5.0 «Bebo» не исключение.

Фактически, WordPress 5.0 вызвала больше энтузиазма, чем любая предыдущая версия, и причина проста: Gutenberg, новый редактор WordPress, основанный на «блоках», теперь является неотъемлемой частью популярной CMS!

В этой статье я расскажу, что такое редактор Gutenberg WordPress Editor и как с ним познакомиться. Давайте начнем!

Что такое WordPress Gutenberg?

WordPress Gutenberg - это полностью переработанный и переработанный редактор. Это отличное удовольствие для пользователей WordPress, которые видят в редакторе простое средство для решения ряда проблем. Фактически, пользователи, которые непосредственно занимаются производством контента (блогеры, редакторы, копирайтеры), могут сказать только хорошее о редакторе Гутенберга.

Он заменил классический редактор WordPress TinyMCE и стал частью ядра WordPress, начиная с версии WordPress 5.0.

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

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

Редактор Гутенберга против классического редактора

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

Вот как выглядел классический редактор WordPress:

Если вы обновитесь до WordPress 5.0, вот как будет выглядеть новый редактор блоков:

Как видите, это два совершенно разных редактора для создания контента в WordPress.

Старый классический редактор представлял собой текстовый редактор с кнопками форматирования, аналогичными кнопкам в Microsoft Word. В новом редакторе реализован совершенно другой подход к редактированию под названием «Блоки» (отсюда и название «Редактор блоков»).

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

Зачем использовать редактор Gutenberg WordPress

• Редактор Gutenberg наглядный, интуитивно понятный и чистый.
• Это позволяет вам изменять контент по разделам. Это дает ясную картину и помогает избежать ошибок.
• В нем есть большой выбор блоков практически для каждого случая использования.
• Верхние и нижние колонтитулы отображаются по умолчанию.
• С WordPress Gutenberg вам не нужно устанавливать другой конструктор для стилизации контента.
• Отличное удобство использования для мобильных устройств и планшетов.
• Простое и быстрое встраивание контента с других платформ.

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

- Источник: WordPress / Тест производительности редактора Гутенберга.

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

Минусы редактора WordPress Гутенберга

Помимо проблем с редактированием контента, пользователи иногда сталкиваются с трудностями при работе с редактором Gutenberg. Вот пример!

Регулярно сталкиваюсь с проблемами при выполнении основных задач на новых сайтах #WordPress. Сегодня боролся с добавлением гиперссылок к тексту на новой странице, который еще не был сохранен, и теперь получает ошибки блокировки при обновлении существующей страницы. Может быть, снова пришло время для классического редактора. # Гутенберг pic.twitter.com/rdUII0OUZF

- Коллин М. Брэди (@ColleenMBrady) 12 апреля 2019 г.

Некоторые пользователи сообщали о проблемах совместимости с установленными плагинами и темами.

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

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

Работа с WordPress Gutenberg

Давайте теперь откроем для себя основные блоки Gutenberg, нового редактора WordPress.

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

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

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

Справа кнопка «+» открывает вкладку, разделенную на другие вкладки. На каждой вкладке отображается список логически организованных блоков. На вкладке «Блоки» показаны следующие группы блоков.

• В разделе «Встроенные элементы» в настоящее время есть единственный блок для вставки встроенных изображений.
• Раздел «Общие блоки» содержит все основные блоки, включая абзац, изображение, заголовок и т. Д., Для создания сообщения или страницы.
• В разделе «Форматирование» есть дополнительные параметры, такие как код, настраиваемый HTML-код, для настройки содержимого вашего сообщения или страниц.
• Раздел «Элементы макета» позволяет настраивать кнопки, столбцы, группы, мультимедиа и текст.
• Раздел «Виджеты» позволяет вставлять шорткоды, архивы, календарь, последние комментарии, сообщения и облако тегов.
• Раздел «Встраивание» добавляет поддержку интеграции внешних ресурсов, таких как Facebook, Twitter, YouTube и т. Д., Без дополнительных плагинов.

Блок-менеджер Гутенберга

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

Поиграйте с новым менеджером блоков, который приходит к вам #Gutenberg #WordPress установка * СКОРО *! Мне нравится то, что я вижу до сих пор, я думаю, что эта функция имеет большое значение для включения / выключения блоков на уровне пользователя (уже были вопросы по этому поводу на семинаре!) Pic.twitter.com/uZfAMNgF2y

- Моник Дуббельман (@BOEmedia) 15 марта 2019 г.

Эта функция в настоящее время доступна в последней версии Gutenberg, которая, как ожидается, будет поставляться с WordPress 5.2. Если вы используете WordPress 5.0, скачайте плагин Gutenberg. Вы можете настроить параметры «Диспетчера блоков» из «Скрыть дополнительные инструменты и параметры», представленных вертикальным многоточием (⋮) на каждой странице или в сообщении.

Когда вы нажимаете « Диспетчер блоков », появляется всплывающее меню, позволяющее включать и отключать блоки. Просто снимите флажки с тех блоков, которые хотите отключить.

Создание блоков Гутенберга

Верхняя панель редактора Gutenberg предоставляет ряд инструментов для интуитивно понятного управления записями. Под панелью инструментов есть две области для создания контента и меню настроек.

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

Блоки по умолчанию

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

Из этого меню также можно изменить текущий тип блока и преобразовать абзац в заголовок, список или цитату. Меню различается в зависимости от типа блока.

Меню инструментов

Кнопка, скрытая под символом «+», позволяет вставить новый блок. При наведении курсора мыши отображаются ярлыки блоков по умолчанию. И если щелкнуть эти блоки, откроется панель доступных блоков.

Добавить блоки для встраивания

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

Добавить формы для встраивания

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

Настроить встраиваемые блоки

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

Блок списка

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

Панель инструментов

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

Боковая панель по умолчанию

Новая боковая панель разделена на две вкладки: «Документ» и «Блок».

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

Создание многоразового блока

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

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

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

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

Импорт / экспорт блоков Гутенберга

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

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

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

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

Как отключить редактор Гутенберга?

Новый редактор WordPress - одна из самых спорных функций WordPress. К счастью, пользователи, которые просто не переносят парадигму «блоков», всегда могут вернуться к классическому редактору. И они могут делать это долгие годы.

В репозитории #Gutenberg ведутся интересные дискуссии о том, следует ли включать @SassCSS или @PostCSS (или оба) в стандартный процесс сборки `wp-scripts`. Ваш вклад ценен: https://t.co/qbPmY80NhJ #WordPress

- Мортен находится в длительном перерыве от всего этого (@ mor10) 4 апреля 2019 г.

Disable Gutenberg - один из самых популярных плагинов Anti-Gutenberg. Он намеревается уничтожить редактор блоков и заменить его классическим редактором WordPress.

Плагин предлагает возможность удалить любую дорожку Гутенберга из WordPress, включая приглашение «Попробовать Гутенберг», отображаемое в версиях WordPress до 5.0. После установки плагина все параметры становятся доступными (и включены по умолчанию) в новом разделе области «Настройки».

Подведение итогов!

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

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