Gutenberg Blocks для разработчиков WordPress и React

Используйте свои знания ReactJS и Redux для создания сложных блоков и плагинов Gutenberg с нуля.

Недавно WordPress решил изменить свой старый редактор WYSIWYG на новый редактор на основе ReactJS под названием «Gutenberg». Gutenberg, также известный как редактор блоков, основан на блоках. Таким образом, ваш пост будет состоять из нескольких блоков, и у каждого блока будет цель. Вы можете иметь блок, который отображает кнопку или изображение или какой-то текст и так далее.

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

Чтобы получить максимальную отдачу от этого курса, вам необходимо иметь знания по разработке тем / плагинов WordPress. Знание Javascript требуется для этого курса. Вы должны быть знакомы с основными понятиями JavaScript и предпочтительно с последними версиями ES6 +. Знания ReactJS также необходимы для этого курса. Поэтому такие понятия, как состояние компонента, метод жизненного цикла и базовые концепции React, не должны быть для вас новыми. Также были бы идеальны такие продвинутые концепции, как знание компонентов более высокого порядка, однако это будет кратко обсуждаться в курсе. Знание Redux тоже идеально. Не все блоки будут требовать использования redux, однако в некоторых блоках мы будем интенсивно использовать его. Поэтому было бы идеально, если вы знакомы с такими понятиями, как store, actions, reducers и так далее.

Содержание курса будет выглядеть следующим образом:

• Сначала и перед любым написанием кода мы обсудим некоторые рекомендации по проектированию, которым вы должны следовать при проектировании блока.
• Мы рассмотрим, как ваша публикация сохраняется в вашей базе данных и что происходит за кулисами, чтобы создать пользовательский интерфейс на основе ReactJS из содержимого, сохраненного в базе данных.
• В разделе 2 у нас будет учебник по webpack . В этом разделе не рассматривается ни один из вопросов WordPress. Это будет чисто webpack. webpack - это инструмент, который мы будем использовать для переноса и объединения файлов Javascript и CSS.
• В разделе 3 мы создадим плагин для WordPress. Внутри этого плагина мы зарегистрируем первый блок Гутенберга. Мы также будем использовать знания webpack  для обработки файлов JS и CSS в этом плагине.
• В разделе 3 у нас также будет некоторый бонусный контент. В этом материале мы узнаем, как интегрировать ESLint, более prettier и husky для улучшенного рабочего процесса.
• В разделе 4 мы кратко рассмотрим некоторые вещи, которые вы можете сделать в своей теме WordPress, что позволит вам изменять / добавлять некоторые функции в редакторе.
• В разделе 5 мы создадим простой блок. Однако в этом простом блоке мы узнаем много нового о том, что мы можем сделать в блоке.
• В разделе 6 мы будем использовать наши знания для создания более сложного блока с некоторыми расширенными функциями. Эти функции включают в себя, как добавлять блоки внутри других блоков, как обрабатывать изображения и многое другое.
• Раздел 7 будет о создании динамических блоков. Таким образом, блоки могут быть статическими или, другими словами, генерировать только некоторый статический HTML. Но они также могут быть динамическими, например, они могут что-то извлечь из базы данных.
• В разделе 8 вы узнаете больше о редуксе в Гутенберге. Мы увидим, как использовать существующие сторы, а также создать собственный стор.
• Наконец, в разделе 9 мы увидим различные способы, которыми мы можем следовать, чтобы управлять метаданными в Гутенберге. Мы будем управлять метаданными, используя блок. И мы также узнаем, как создать собственный плагин боковой панели и управлять метаданными на этой боковой панели.