Как создать собственный блок WordPress Gutenberg: серия учебных пособий

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

Цель этого руководства, состоящего из 10 частей, научить вас писать собственные пользовательские блоки. Независимо от того, для чего они предназначены, начиная с самых основ и заканчивая более сложными функциями. Я рекомендую вам писать все самостоятельно, а не копировать+вставлять код. Это лучший способ учиться! Следуйте последовательности шагов с 1 по 10, так как мы будем строить поверх блока по мере продвижения.

Что вам нужно знать, прежде чем мы начнем

Прежде чем мы погрузимся в шаги; отказ от ответственности. Есть несколько вещей, которые вы должны знать заранее о том, чем является эта серия, а чем она не является.

Языки программирования

Вам нужно знать Javascript — это само собой разумеющееся. Не нужно быть экспертом, но это не учебник по Javascript. Что касается версии Javascript ECMAScript; вы можете писать на ES5 и не беспокоиться о компиляции кода с помощью Babel и прочего. Однако эта серия написана с использованием кода ES6 и ESNext. Не беспокойтесь — шаг 1 предназначен для того, чтобы помочь вам настроить среду разработки, готовую для кодирования в ESNext со всеми их новыми синтаксисами.

Как вы, наверное, знаете, Гутенберг основан на React JS. Эта серия также не является учебным пособием по React и предполагает базовые знания о React и о том, как он работает. Опять же, не нужно быть экспертом. Поскольку React существует уже некоторое время, существует множество хороших руководств, документации и ресурсов, предназначенных для обучения вас React. Так что рекомендую поискать их в первую очередь.

Эта серия посвящена изучению частей Javascript, React и JSX и не касается стилей/CSS. Поскольку цель вашего блока может быть совершенно другой, я решил не сосредотачиваться на стилях и предоставил только очень простой HTML. Вы можете добавить свой стиль и необходимый вывод HTML, чтобы ваш блок отображался именно так, как вам нужно.

Возраст этого учебника

И, наконец, обратите внимание на время написания этой серии. Гутенберг все еще довольно новый, но он радикально меняется и совершенствуется.

Если вы обнаружите это в далеком будущем, некоторые коды могут быть объявлены устаревшими или заменены лучшими методами. Это руководство было написано и доработано в версии WordPress 5.2.3 (конец 2019 года).

Что вы узнаете

В первой части мы сосредоточимся на основах. Настраиваем среду разработки с запущенной компиляцией нашего кода. А также основы регистрации блока и его необходимых PHP-частей. Мы узнаем об огромной библиотеке компонентов и методов, доступных нам из WordPress Gutenberg.

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

В конце мы рассмотрим более сложные вещи, такие как динамические блоки и как использовать PHP для рендеринга вывода блока. И, наконец, как делать пост-запросы внутри редактора — позволяя пользователю выбирать пост из списка для рендеринга.

Оглавление

Ниже вы найдете прямые ссылки на каждую часть серии.

• Часть 1: Настройка среды разработки
  В первой части этой серии руководств о том, как создавать пользовательские блоки Gutenberg, нам нужно настроить нашу среду разработки. Нам нужно место, где мы можем писать наш код в синтаксисе ES6/ESNext и компилировать его на ходу.

• Часть 2: Регистрация блока
  В этой части мы напишем Javascript для регистрации и настройки нашего пользовательского блока. В конце мы зарегистрируем скрипт в PHP и напишем необходимый PHP-код, чтобы WordPress распознал его как новый блок.

• Часть 3: Реквизиты и компоненты WordPress
  На предыдущем шаге мы узнали, как зарегистрировать пользовательский блок как в Javascript, так и в PHP. На этом этапе мы узнаем, как использовать компоненты WordPress для добавления различных полей и настроек.

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

• Часть 5: Добавление настроек инспектора
  На этом шаге мы сосредоточимся на том, что WordPress (по крайней мере, в коде) называет инспектором — боковой панели справа в редакторе. Мы коснемся некоторых новых компонентов, которые имеет смысл разместить на боковой панели, и того, как с ними обращаться.

• Часть 6: Добавление панелей инструментов
  В этом посте мы узнаем, как добавить панели инструментов WordPress в наш блок, то есть для выравнивания и выравнивания блоков. Мы также научимся добавлять собственные панели инструментов с собственными кнопками для выполнения пользовательских действий.

• Часть 7: Создание собственных компонентов До сих пор в
  этой серии руководств мы писали весь код внутрифункции. Это вполне возможно, и часто рекомендуется вместо этого назначать редактирование отдельному компоненту. Таким образом, мы можем использовать такие функции, как состояние компонента и методы жизненного цикла.registerBlockType()``edit

• Часть 8: Перевод вашего блока
  В этой части мы сосредоточимся на том, как переводить тексты и значения в нашем блоке. Мы используем WP-CLI для создания необходимых файлов, чтобы Гутенберг мог загружать наши переводы при переключении языка WordPress.

• Часть 9: Динамические блоки
  До сих пор мы визуализировали вывод блока в Javascript. Однако с динамическим контентом, таким как последние сообщения или отображение сообщения, может потребоваться отрисовка вывода блока в PHP.

• Часть 10: Получение сообщений и компонентов
  более высокого порядка. В заключительной части мы узнаем, как использовать компоненты более высокого порядка и, таким образом, как выполнить запрос сообщения из редактора и предоставить метод для выбора сообщений.