Головна/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 / Блоки та Класична)

Повний практичний посібник із розробки надшвидкої нативної теми WordPress: повне редагування сайту (Full Site Editing), блокові шаблони, theme.json v3, адаптивна типографіка, Block Bindings API та сумісність із класичними PHP-шаблонами.

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

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

Створення розширюваних блоків редактора: вибір між чистим React (@wordpress/create-block) та швидким прототипуванням на PHP/ACF PRO, маніфест block.json, схема атрибутів, панель InspectorControls та серверний рендеринг.

Нам потрібні кастомні блоки для медіа-порталу (таблиці тарифів, візитка автора, порівняльні таблиці). Команда очікує зручну підтримку, адаптивний попередній перегляд та повну інтеграцію у стандартний інсертер блоків.
Прогрес: 0 з 5 кроків0%
Gutenberg & FSE
Middle~8 год

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

Створення реактивних блоків WordPress без сторонніх бібліотек на фронтенді: повна інтеграція рідного Interactivity API, директиви (data-wp-interactive, data-wp-context, data-wp-on), стан у view.js та миттєвий відгук інтерфейсу.

Потрібен інтерактивний квіз та швидкий блок фільтрації товарів. Ми не хочемо вантажити React чи Alpine.js на фронтенді, бо це погіршує показники швидкості. Потрібно використати рідний WordPress Interactivity API.
WordPress 6.5+ / 7.0Interactivity APIblock.jsonrender.php+3
Прогрес: 0 з 4 кроків0%
Gutenberg & FSE
Middle~8 год

ТЗ: Розробка динамічного блока з серверним рендерингом (render.php)

Створення динамічних блоків із живими запитами до бази: серверний шаблон render.php, оптимізація WP_Query, кешування через Transients API, прев'ю в редакторі та синхронізація атрибутів.

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

ТЗ: Розробка складеного блока-контейнера (InnerBlocks) із захистом верстки (templateLock='contentOnly')

Проєктування структурних блоків-контейнерів: вкладені InnerBlocks, попередньо налаштовані макети (атрибут template), обмеження дозволених блоків (allowedBlocks) та надійний захист сітки через templateLock='contentOnly'.

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

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

Використання офіційного ядра Block Bindings API у WordPress: пряме зв'язування стандартних блоків Paragraph, Heading, Image та Button з метаполями без необхідності створення окремих React-блоків.

Ми хочемо виводити кастомні поля запису (дати заходів, бюджет проєкту, сертифікати) за допомогою стандартних блоків WordPress. Нам не потрібні саморобні блоки під кожне окреме поле.
WordPress 6.7+ / 7.0Block Bindings APIregister_block_bindings_source()register_post_meta()+2
Прогрес: 0 з 5 кроків0%
Показано 1–6 из 11 ТЗ