Главная/WordPress Fullstack/Блупринты/Gutenberg & FSE
WordPress54 ТЗReact и Next.js10 ТЗAI Инженерия6 ТЗ
Ко всем 6 разделам блупринтов
Кастомные темыGutenberg & FSEWooCommerceDevOps & СкоростьБезопасность & APIИИ & Агенты
Раздел • Gutenberg & FSE • 11 ТЗ

Gutenberg & FSE

11 практических ТЗ: FSE-темы, React-блоки block.json v3, render.php, InnerBlocks, Block Bindings API, theme.json v3, PluginSidebar, Pattern Overrides и Interactivity API.

Прогресс раздела «Gutenberg & FSE»
0%(0/56 шагов)
+0 XP0 из 11 решено

Теоретическая база и обучающие статьи для изучения с нуля

7 статей

Освойте эти 7 ключевых материалов, чтобы уверенно выполнять коммерческие ТЗ раздела без пробелов в знаниях.

Фундаментальная базаJunior • База

Структура манифеста block.json v3 и theme.json

Стандарт метаданных блока в WordPress: типизация атрибутов, поддержка стилей (supports), селекторы и привязка к theme.json.

~20 минИзучить урок
Фундаментальная базаJunior • База

React-компоненты Edit и Save в Gutenberg

Разделение интерактивного React-редактора в админке и статической сериализации контента в HTML-комментарии для фронтенда.

~25 минИзучить урок
Архитектурный паттернMiddle • Архитектура

Вложенные блоки InnerBlocks и паттерны макетов

Построение составных карточек и сеток с жесткими шаблонами templateLock и защитой верстки от разрушения контент-менеджером.

~20 минИзучить урок
Архитектурный паттернMiddle • Архитектура

Динамические блоки с серверным рендерингом render.php

Блоки с актуальными данными из БД: серверная генерация PHP-разметки, кеширование transient-ами и гидратация состояния.

~25 минИзучить урок
Практический воркфлоуMiddle • Архитектура

Воркфлоу: Создание кастомного блока Gutenberg на React 19

Полноценный цикл создания React-блока: манифест v3, кастомные инспекторы, RichText и сборка через @wordpress/scripts.

~35 минИзучить урок
Практический воркфлоуMiddle • Архитектура

Воркфлоу: Фильтры блоков ядра WordPress

Модификация разметки, атрибутов и инспекторов стандартных блоков ядра через хуки blocks.registerBlockType.

~30 минИзучить урок
Практический воркфлоуSenior • Production

Воркфлоу: Тонкая настройка theme.json v3 и дизайн-системы

Управление палитрами, Fluid Typography, интервалами и отключением лишних inline-стилей ядра WordPress.

~35 минИзучить урок
Gutenberg & FSE
Middle~10 ч

ТЗ: Создание уникальной темы с нуля (FSE / Блоки)

Линейное руководство по разработке быстрой нативной темы с поддержкой визуального редактирования Gutenberg блоков, Block Bindings API и стандартов WordPress 7.0.

«Мне нужен уникальный дизайн для блога о технологиях. Хочу, чтобы сайт летал на мобильных, быстро загружался и я мог сам визуально менять структуру блоков, заголовков и меню в админке без программиста.»
PHP 8.3/8.4WordPress 7.0 ReadyGutenberg Block Themestheme.json v3+5
Прогресс: 0 из 7 шагов0%
Gutenberg & FSE

ТЗ: Разработка кастомного Gutenberg-блока (React)

Линейное руководство по созданию интерактивного Gutenberg блока отзывов со слайдером.

«Нам нужен красивый интерактивный блок-слайдер отзывов клиентов для редактора Gutenberg. Внутри блока должна быть возможность загрузить фото клиента, ввести его имя, отзыв, выбрать рейтинг звездами (1-5) и задать цвет фона блока. Блок должен быть нативным, без использования Elementor.»
Прогресс: 0 из 5 шагов0%
Gutenberg & FSE
Middle~8 ч

ТЗ: Интерактивный блок на WordPress Interactivity API

Разработка реактивного клиентского блока калькулятора тарифов без jQuery и сторонних тяжелых фреймворков на базе официального WordPress Interactivity API, директив data-wp-* и SSR.

«Нам нужен динамический интерактивный блок переключения тарифов (месяц/год со скидкой 20%) и калькулятор стоимости в Gutenberg. Главное требование — никакой тяжелой сторонней гидратации и jQuery: страница должна загружаться мгновенно и иметь идеальный показатель INP < 100мс на мобильных устройствах.»
WordPress 6.5+ / 7.0Interactivity APIblock.jsonrender.php+3
Прогресс: 0 из 4 шагов0%
Gutenberg & FSE
Middle~8 ч

ТЗ: Разработка динамического блока «Сетка свежих курсов/кейсов» с серверным рендерингом (render.php)

Создание промышленного динамического блока с block.json v3: предпросмотр в редакторе через ServerSideRender, серверный рендеринг через render.php, оптимизированный WP_Query и кеширование вывода через Transient API.

«Нам нужен блок для главной страницы, который автоматически выводит 3 или 6 последних опубликованных курсов с ценами и бейджами уровней сложности. В редакторе администратор должен видеть реальный внешний вид блока и настраивать количество колонок и категорию, а на фронтенде разметка должна рендериться на PHP без лишнего JavaScript.»
@wordpress/scriptsblock.json v3render.phpServerSideRender+3
Прогресс: 0 из 5 шагов0%
Gutenberg & FSE
Middle~9 ч

ТЗ: Разработка составного блока-контейнера (InnerBlocks) с жестким шаблоном и защитой верстки (templateLock="contentOnly")

Проектирование сложных составных блоков с useInnerBlocksProps: ограничение вложенных блоков через allowedBlocks, жесткая схема template и защита макета от разрушения клиентом через templateLock="contentOnly".

«Дизайнеры нарисовали блок «Тарифный план»: карточка состоит из заголовка тарифа, бейджа скидки, списка преимуществ с галочками и кнопки оформления. Если дать клиенту обычную колонку, он случайно удаляет стили и двигает элементы. Нужен жесткий защищенный контейнер, где клиент может редактировать только текст и цены, не имея возможности сломать структуру карточки.»
React & JSX@wordpress/block-editoruseInnerBlocksPropstemplateLock="contentOnly"+2
Прогресс: 0 из 5 шагов0%
Gutenberg & FSE
Junior~6 ч

ТЗ: Нативное подключение произвольных полей (ACF / Post Meta) к стандартным блокам через Block Bindings API

Современная разработка без лишнего JavaScript: регистрация кастомного источника данных через register_block_bindings_source(), связывание метаполей с core/paragraph и core/heading и zero-runtime производительность.

«У нас есть десятки кастомных полей у проектов (стоимость, сроки, стек, клиент). Раньше разработчики писали под каждое поле отдельный React-блок, что раздувало код плагина. В WordPress 6.7 появилась поддержка Block Bindings API — мы хотим подключить наши метаполя напрямую к стандартным блокам абзаца и заголовка прямо в админке без сторонних плагинов.»
WordPress 6.7+ / 7.0Block Bindings APIregister_block_bindings_source()register_post_meta()+2
Прогресс: 0 из 5 шагов0%
Показано 1–6 из 11 ТЗ