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

Редактор блоков WordPress. 1 часть - анатомия блоков


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

В этой серии уроков я расскажу как создавать блоки к гутенберг редактору. Или к редактору блоков вордпресс. Но пока грань еще не стёрта, будем использовать кодовое имя "Гутенберг"

В этой вводной части я хотел бы показать наглядно терминологию, что принес нам редактор блоков. Т.к. разрабатывая свои блоки - мы столкнёмся с необходимостью знать её.

Содержание:

  1. Вводная в JS, или - почему примеры из интернета не работают
  2. Полезные ссылки на документацию и обучающие ресурсы
  3. Анатомия блоков
  4. Что дальше


Вводная в JS, или - почему примеры из интернета не работают

Найдя пример в интернете, некоторые разработчики могут столкнуться с проблемой и непониманием - "копирую всё куда надо, а не работает".
Потому что вы скорей всего столкнулись с ESNext и JSX (JavaScript XML) внутри этого скрипта. А автор мануала не стал акцентировать на этом внимание и опустил "мелочи".

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

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

Итак: вы писали на ES5 (Он же ECMAScript 5 - стандарт пришедший к нам в 2009-м году) - устоявшийся js. А примеры в интернете по гутенбергу в большинстве на ESNext и JSX

Сравните:

JSX

ES5

- в первом примере прям как html вёрстка (и даже class добавлен - почти похож) - это и есть JSX

ESNext требует у вас настроенного окружения (терминал, nodeJS, npm, webpack/babel и т.д.) - т.к. код надо транспилировать (преобразовать) в понятный большинству браузеров, а во вторых, скорей всего, там примеры с использованием JSX - языка разметки, удобночитаемого для человека и привычного, скажем так, фронтенд-разработчику.

Например: найденный вами на просторах интернета js-код работать не будет в браузере - если вы его сразу подключите и отдадите в вордпресс:

Пример JSX

- вот он: нюанс, с которым сталкивается ВП разработчик и есть для многих камень преткновения. Но настроив своё окружение - вы забудете о том, что раньше вас так отпугивало. Просто "нужно учить js" - как и советовал ранее Мэтт Мулленвег.
Или учись, или нет движения вперёд.

Многие сайты с уроками и примерами создания блоков сейчас идут нога в ногу со временем и стараются в своих туториалах не опускаться до уровня ES5. Многие и не заикаются что этот js не стоит подключать напрямую в браузер. Новички пробуют - а примеры у них ясное дело не работают. Внимательней с этим.

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


1. Gutenberg Handbook - официальная документация по гутенберг. Там собраны примеры по началу работы. Описана общая концепция. Найдете описание пакетов и компонентов. В общем номер 1 для разработчика.
Примеры в документации представлены в 2-х вариантах ES5 и ESNext. В некоторых местах правда не всё очевидно - но зная синтаксис JS - легко понять кто где.

2. gutenberg-examples от WordPress - отличная подборка уроков от самой команды вордпресс. Примеры создания блоков даны в 2-х вариантах без "компиляции" и с использованием консольных инструментов разработчика.

3. Уроки от Zac Gordon - зайдите в папку blocks. Примеры даны на ESNext

4. Агрегатор новостей по гутенберг. Подписывайтесь обязательно - полезные дайджест рассылки.

5. Create Guten Block Toolkit - руководство для тех, кто не хочет настраивать окружение под себя. Здесь собраны инструменты включающие в себя много полезного для разработки под гутенберг. Только одна зависимость. И пишите ESNext - на выходе браузер вас поймёт.


Анатомия блоков

1. Общий макет

Общий макет

Вверху мы видим тулбар с инструментами управления страницей. Справа сайдбар с параметрами страницы и расширенными настройками блока. Ну и по центру контентная часть, где располагается содержимое записи (сами блоки). Слева от блока есть кнопки "Block Mover" - для перемещения блока или изменения его позиции: вверх/вниз.

2. Область блока

В качестве примера блока возьмем блок параграфа:

Область блока

Стоит сказать что блок параграфа - это packages RichText. Именно packages выставляются как основные зависимости скрипта при его регистрации.
RichText - простой текстовый редактор. Позволяет выделять жирным, наклонный текст, вставлять ссылки или зачеркивать текст.

Сверху блока панель: панель компонента тулбара - block toolbar. Этот тулбар содержит в себе "переключатель блоков" (ориг. block chip ("фишка" блока?)), который может трансформировать один блок в другой - Transforms, если сам блок поддерживает эти трансформации:

Трансформации блока

В нём также могут содержаться заданные стили для блока - так называемые BSV - Block Style Variations. Например в блоке кнопки - там содержится переключатель дизайна блока кнопки:

Block Style Variations

Далее в block toolbar содержатся кнопки форматирования блока - block formatting. Простое выравнивание: слева, справа, по центру.
Внутреннее форматирование - inline formatting применяется к тексту внутри блока. Это работа RichText editor.

Ну и справа тулбара есть расширенное меню - advanced actions. Там вы обязательно найдете кнопку удаления блока и другие действия с блоком.

Рассмотрим что у нас в области сайдбара:

Область сайдбара

Вверху сайдбара - табы: вкладка настроек документа и вкладка настроек блока. Сторонние плагины, например Yoast добавляют свои вкладки.

Настройки блока, появляющиеся в сайдбаре, объединены общим термином - Inspector (InspectorControls)

Внутри этого инспектора все реализовано на секциях (Sidebar Sections). Эти секции могут сворачиваться и раскрываться по типу спойлера. Начальное состояние задается в настройках скрипта секции.

4. Библиотека блоков

Библиотека блоков (Block Library) содержит в себе все доступные блоки. Блоки, зарегистрированные каждый в своей категории (category), помещены в секции:

Библиотека блоков

- блоки, это кнопки с иконкой и названием блока, которое задается в js файле при регистрации блока.
Поиск блока осуществляется по ключевым словам (keywords) которые заданы при регистрации блока в его js-файле.


Что дальше

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

#WordPress #BlockEditor #Gutenberg

Комментариев нет

Оставьте комментарий

Авторизация
*
*
Регистрация
*
*
*
Настоящим подтверждаю, что я ознакомлен и согласен с условиями политики конфиденциальности
Генерация пароля
Написать
*
*