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

Зачем WordPress нужен новый редактор?

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

Я имею в виду, что контент требует определенного макета. Вы когда-нибудь пытались создать таблицу в сообщении? Кнопка TinyMCE для таблиц даже отключена по умолчанию, поэтому, если вы не знакомы с HTML, вам нужно использовать для этого плагин, хотите отображать два изображения рядом? Опять же, это просто, если вы понимаете CSS, но в противном случае вы, вероятно, в конечном итоге добавите разрывы строк повсюду, пытаясь исправить проблемы с переносом текста.

WordPress предоставляет несколько инструментов для решения этой проблемы, основными из которых являются:

  • Режим просмотра «Текст» редактора, ранее известный как представление HTML.
  • Шорткоды.
  • Опубликовать метаданные.

Все они очень полезны, однако имеют некоторые недостатки, представление «Текст» требует некоторых знаний HTML / CSS, шорткоды могут абстрагироваться от этой сложности, но вам необходимо изучить их синтаксис и не получать визуальной обратной связи от редактора (если вы не используете настраиваемый редактор. стили) и мета постов может быть сложно реализовать, если вы хотите использовать их более чем в одном месте.

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

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

В настоящее время все является составной частью

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

Gutenberg построен с использованием того же подхода, он основан на React, поэтому имеет смысл следовать компонентной архитектуре в его коде, но это выходит за рамки этого. Новый редактор разбивает контент на несколько блоков, так что, как и в современных JS-приложениях, он позволяет нам сосредоточиться на более мелких элементах и ​​объединить их в один согласованный интерфейс.

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

- Мэтт Мулленвег, основатель и генеральный директор Automattic

Думать о содержании в терминах блоков может быть не интуитивно, ведь на самом деле это всего лишь длинная строка HTML-текста, рассмотрим следующий пример сообщения:

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

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

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

Итак, готово?

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

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

Как разработчик Гутенберг потрясающий. Создавать собственные блоки с помощью плагинов на удивление легко, а кодовая база очень чиста и легко читается. Я рад, что WordPress решил отойти от jQuery или Backbone и начал использовать компонентный подход с React и Redux, похоже, что команда разработчиков кое-чему научилась, используя этот стек для Calypso.

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

Команда разработчиков работала очень быстро, удивительно, сколько работы было вложено в такую ​​большую функцию за такой короткий период времени. Код доступен в GitHub, так что вы можете отправлять проблемы или запросы функций, частые обновления публикуются в блоге WordPress Core с последними новостями, а обсуждения всегда открыты в канале # core-editor в ядре WordPress Slack ».

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

Я специализируюсь на WordPress, но мне нравится быть в курсе всего, что связано с фронтенд-разработкой, если вы хотите связаться с нами твитните! 👋