Main/WordPress Fullstack/Blueprints/Gutenberg & FSE
WordPress54 ТЗReact & Next.js10 ТЗAI Engineering6 ТЗ
To all 6 blueprint sections
Custom ThemesGutenberg & FSEWooCommerceDevOps & SpeedSecurity & APIAI & Agents
Раздел • Gutenberg & FSE • 11 ТЗ

Gutenberg & FSE

11 production specs: FSE themes, React blocks with block.json v3, render.php, InnerBlocks, Block Bindings API, theme.json v3, PluginSidebar, Pattern Overrides, and Interactivity API.

Section «Gutenberg & FSE» Progress
0%(0/56 steps)
+0 XP0 of 11 solved

Foundational Articles & Theory for Zero-to-Pro Learning

7 articles

Master these key 7 materials to execute blueprints in this section with confidence and zero knowledge gaps.

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

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

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

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

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

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

~25 minOpen Lesson
Архитектурный паттернMiddle • Архитектура

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

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

~20 minOpen Lesson
Архитектурный паттернMiddle • Архитектура

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

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

~25 minOpen Lesson
Практический воркфлоуMiddle • Архитектура

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

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

~35 minOpen Lesson
Практический воркфлоуMiddle • Архитектура

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

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

~30 minOpen Lesson
Практический воркфлоуSenior • Production

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

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

~35 minOpen Lesson
Gutenberg & FSE
Middle~10 h

Spec: Creating a Unique Theme from Scratch (FSE / Blocks & Classic)

Comprehensive guide for developing a ultra-fast native WordPress theme with Full Site Editing (FSE), block templates, theme.json v3, fluid typography, Block Bindings API, and classic PHP template fallbacks.

I need a bespoke design for a technology blog. It must be blazing fast on mobile devices, load in under a second, and allow me to visually modify headers, template parts, and typography in the Site Editor without coding.
PHP 8.3/8.4WordPress 7.0 ReadyGutenberg Block Themestheme.json v3+5
Progress: 0 of 7 steps0%
Gutenberg & FSE

Spec: Custom Gutenberg Block Development (React & ACF PRO)

Engineering custom WordPress editor blocks: choosing between native React (@wordpress/create-block) and rapid PHP/ACF PRO prototyping, block.json metadata, attribute schemas, InspectorControls, and server-side render fallbacks.

We need custom interactive blocks for our media portal (pricing cards, author spotlights, comparison tables). Our team wants an architecture that is easy to maintain, supports responsive preview, and integrates cleanly into the core block inserter.
Progress: 0 of 5 steps0%
Gutenberg & FSE
Middle~8 h

Spec: Interactive Block with WordPress Interactivity API

Developing stateful, reactive WordPress blocks with the native Interactivity API: zero external frontend frameworks (no React runtime on frontend), reactive stores, directive syntax (data-wp-interactive, data-wp-context, data-wp-on), and instant UI updates.

We want an interactive quiz and instant product filter block. We do not want React or Alpine.js loaded on the frontend because it slows down our Core Web Vitals. We need the native WordPress Interactivity API.
WordPress 6.5+ / 7.0Interactivity APIblock.jsonrender.php+3
Progress: 0 of 4 steps0%
Gutenberg & FSE
Middle~8 h

Spec: Dynamic Block with Server-Side Rendering (render.php)

Building dynamic WordPress blocks with real-time server queries: render.php rendering, WP_Query optimization, transient caching, editor preview placeholder, and block attributes synchronization.

We need a 'Latest Courses / Case Studies Grid' block that always displays the freshest content without requiring editors to re-save the page. It must render server-side in PHP and update instantly when new posts are published.
@wordpress/scriptsblock.json v3render.phpServerSideRender+3
Progress: 0 of 5 steps0%
Gutenberg & FSE
Middle~9 h

Spec: Compound InnerBlocks Container with Layout Locking (templateLock='contentOnly')

Architecting structured multi-block container components: nested InnerBlocks, predefined templates (template attribute), allowedBlocks restrictions, and bulletproof layout protection via templateLock='contentOnly'.

Our agency builds client websites where marketing editors constantly break page layouts by accidentally deleting column wrappers, altering padding, or inserting unsupported blocks. We need container blocks with strict template locking.
React & JSX@wordpress/block-editoruseInnerBlocksPropstemplateLock="contentOnly"+2
Progress: 0 of 5 steps0%
Gutenberg & FSE
Junior~6 h

Spec: Connecting Custom Fields to Core Blocks via Block Bindings API

Leveraging WordPress core Block Bindings API: binding native Paragraph, Heading, Image, and Button blocks directly to custom post meta and ACF fields without developing custom blocks.

We want to display custom post meta (event dates, project budgets, author certifications) using standard WordPress blocks like Heading and Paragraph. We do not want to build custom blocks for every single field.
WordPress 6.7+ / 7.0Block Bindings APIregister_block_bindings_source()register_post_meta()+2
Progress: 0 of 5 steps0%
Показано 1–6 из 11 ТЗ