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

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

Что вы узнаете в этом курсе

Материал курса последовательно проведет вас через весь процесс разработки — от архитектуры блоков до создания сложных динамических компонентов, взаимодействующих с базой данных WordPress. Вы сможете уверенно работать с Webpack, React, Redux и особенностями WordPress REST API.

Ключевые навыки, которые вы приобретете

• Создание пользовательских Gutenberg-блоков — от базовых до продвинутых.
• Настройка Webpack для сборки JS и CSS в плагинах WordPress.
• Работа с React-компонентами, состоянием и жизненным циклом.
• Использование Redux внутри Gutenberg для управления состоянием.
• Понимание динамических блоков и взаимодействие с backend WordPress.
• Интеграция ESLint, Prettier и husky в рабочий процесс.
• Работа с метаданными WordPress из блоков и через кастомные боковые панели.

Для кого подходит этот курс

Курс рассчитан на разработчиков, уже имеющих опыт с WordPress и владеющих JavaScript на уровне ES6+. Знание React и базовые принципы Redux позволят вам быстрее погрузиться в материал.

Рекомендуемые предварительные знания

• Разработка тем и плагинов WordPress
• Современный JavaScript (ES6+)
• Основы React: состояние, компоненты, жизненный цикл
• Желательно — понимание Redux (store, actions, reducers)

Структура курса

Введение и основы Gutenberg

• Принципы проектирования блоков
• Как сохраняются данные и как работает рендеринг React-интерфейса

Раздел 2: Webpack

Углубленный разбор настройки Webpack, необходимой для сборки современных блоков Gutenberg — от базовой конфигурации до оптимизаций.

Раздел 3: Создание плагина и регистрация первого блока

• Создание структуры плагина
• Регистрация собственного Gutenberg-блока
• Сборка JS/CSS-файлов через Webpack
• Бонус: интеграция ESLint, Prettier и husky

Раздел 4: Взаимодействие блока с темой WordPress

Настройки темы, которые позволяют расширять возможности редактора и блоков.

Раздел 5: Создание первого простого блока

Изучение основных API Gutenberg и ключевых техник, необходимых для дальнейшей разработки.

Раздел 6: Продвинутый блок

• Работа с вложенными блоками
• Обработка изображений
• Создание сложных интерфейсов

Раздел 7: Динамические блоки

Как создавать блоки, которые получают данные из базы и рендерятся на сервере.

Раздел 8: Работа с Redux внутри Gutenberg

• Использование встроенных сторах редактора
• Создание собственного стора

Раздел 9: Управление метаданными

• Работа с метаданными через блоки
• Создание пользовательской боковой панели для управления мета-полями

Почему этот курс будет полезен

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