Главная/WordPress Fullstack/Блупринты/Gutenberg & FSE/Разработка динамического блока «Сетка свежих курсов/кейсов» с серверным рендерингом (render.php)
К карточкам раздела «Gutenberg & FSE»
Gutenberg & FSE(ТЗ 29 из 54)
ТЗ: Разработка динамического блока «Сетка свежих курсов/кейсов» с серверным рендерингом (render.php)
Gutenberg & FSE5 шагов • +25 XP

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

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

~8 ч работыУровень: Middle@wordpress/scriptsblock.json v3render.phpServerSideRenderWP_QueryTransient CacheInspectorControls
+5 XP за шаг
Выполнено 0 из 5 шагов (0%)
Трудозатраты~8 рабочих часов
Фриланс вилка~$360 – $600 (€320 – €560)
Оценка веб-студии~$760 – $1,280 (€720 – €1200)

ТЗ заказчика (исходный бриф):

«Нам нужен блок для главной страницы, который автоматически выводит 3 или 6 последних опубликованных курсов с ценами и бейджами уровней сложности. В редакторе администратор должен видеть реальный внешний вид блока и настраивать количество колонок и категорию, а на фронтенде разметка должна рендериться на PHP без лишнего JavaScript.»
Ключевые требования:
  • •Динамическая выборка актуальных курсов/кейсов через WP_Query без необходимости повторного сохранения страницы
  • •Настройка в боковой панели InspectorControls: рубрика, количество записей (3/6/9), количество колонок (2/3/4)
  • •Интерактивный визуальный предпросмотр в редакторе Gutenberg через ServerSideRender
  • •Серверный рендеринг на фронтенде через render.php (0 Кб клиентского JS в бандле)
  • •Кеширование скомпилированного HTML в Transient API со сбросом при публикации нового материала
Ограничения проекта:
  • •Использование block.json версии 3 с директивой render: "file:./render.php"
  • •Запрет на использование устаревшей функции register_block_type с массивом параметров в PHP
  • •Безопасное экранирование всех динамических полей перед выводом
Критерии приёмки (KPI):
  • Время генерации блока на сервере < 25 мс при прогретом кеше
  • 0 Кб постороннего JavaScript на фронтенде (чистый HTML/CSS)
  • Корректная обработка состояния отсутствия записей (empty state)

Конфигурация блупринта под условия проекта

Выберите архитектуру и стек — шаги роадмапа, структура файлов и примеры кода переключатся автоматически:

Пошаговое практическое руководство по ТЗ

Подробный разбор архитектуры, код реализации и советы эксперта по каждому этапу:

1
Этап 1 из 5

Описание метаданных блока в block.json v3

~30 минЛегкий

Практическое руководство:

В директории src/blocks/course-grid/ создайте block.json. Укажите apiVersion: 3, атрибуты postsToShow, columns, selectedCategory, а также путь к серверному файлу render: "file:./render.php".

План и контрольные точки реализации:
1Указать apiVersion: 3
2Задать атрибуты postsToShow, columns, selectedCategory с дефолтными значениями
3Привязать render: "file:./render.php"
4Отключить html: false в supports
Важные технические нюансы и подводные камни:

В block.json версии 3 директива "render" указывает относительный путь к PHP-файлу шаблона.

Ожидаемый артефакт этапа:

Валидный конфигурационный файл block.json v3.

JSON
{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "agenticlab/course-grid",
  "version": "1.0.0",
  "title": "Сетка курсов (Динамическая)",
  "category": "widgets",
  "icon": "grid-view",
  "description": "Автоматический вывод свежих курсов с фильтрацией по рубрикам и кешированием.",
  "supports": {
    "html": false,
    "align": ["wide", "full"],
    "color": { "background": true, "text": true },
    "spacing": { "margin": true, "padding": true }
  },
  "attributes": {
    "postsToShow": { "type": "number", "default": 3 },
    "columns": { "type": "number", "default": 3 },
    "selectedCategory": { "type": "number", "default": 0 }
  },
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css",
  "render": "file:./render.php"
}
2
Этап 2 из 5

Компонент Edit.tsx с ServerSideRender и InspectorControls

~45 минСредний
3
Этап 3 из 5

Разработка серверного шаблона render.php

~40 минСредний
4
Этап 4 из 5

Кеширование серверной разметки через Transient API

~35 минСредний
5
Этап 5 из 5

Сборка блока и проверка в редакторе Gutenberg

~20 минЛегкий

Типичные грабли на этом ТЗ

2 антипаттерна

Инструменты экосистемы Fullstack AI Lab для этого ТЗ

Интеграция

AI-Собеседование

Пройти голосовое или текстовое интервью по технологиям ТЗ

Архитектурные Воркфлоу

43 пошаговых сценария с командами CLI и готовыми конфигами