Principal/WordPress Fullstack/Blueprints/Gutenberg y FSE/Bloque dinámico con renderizado en el servidor (render.php)
Volver a tarjetas «Gutenberg y FSE»
Gutenberg y FSE(ТЗ 29 из 54)
Especificación: Bloque dinámico con renderizado en el servidor (render.php)
Gutenberg y FSE5 шагов • +25 XP

Especificación: Bloque dinámico con renderizado en el servidor (render.php)

Desarrollo de bloques dinámicos con consultas en vivo a la base de datos: renderizado con render.php, optimización de WP_Query, caché con Transients API, vista previa en el editor y sincronización de atributos.

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

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

Necesitamos un bloque de 'Cuadrícula de cursos recientes / casos de éxito' que muestre siempre el contenido actualizado sin necesidad de volver a guardar la página. Debe generarse en el servidor con PHP y actualizarse al publicar nuevas entradas.
Ключевые требования:
  • •Renderizado dinámico en servidor mediante render.php sin guardar HTML estático en post_content
  • •Atributos configurables en block.json: postType, categoryIds, postsPerPage, columns
  • •Vista previa en el editor mediante ServerSideRender o componente React ligero
  • •Caché de consultas SQL mediante Transients API con invalidación automática al publicar entradas
  • •Marcado semántico con cuadrícula adaptativa y datos estructurados
Ограничения проекта:
  • •Rendimiento estricto en consultas: cero consultas sin índices en bases con más de 100 000 entradas
  • •Gestión correcta de casos en los que no existan resultados para los filtros seleccionados
Критерии приёмки (KPI):
  • Tiempo de ejecución en servidor de render.php < 25ms (desde caché)
  • Cero contenido HTML residual en el campo post_content de la tabla wp_posts
  • Fidelidad del 100% entre la vista previa del editor y el resultado en el sitio web

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

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

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

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

1
Этап 1 из 5

Paso 1: Declaración de block.json con referencia a render.php

~30 минЛегкий

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

Configure block.json con 'render': 'file:./render.php'. Defina los atributos: 'postType', 'categoryIds', 'postsPerPage', 'columns' y 'showThumbnails'.

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

No incluya archivo save.js; los bloques dinámicos almacenan null o una cadena vacía en post_content.

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

Валидный конфигурационный файл 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

Paso 2: Componente de vista previa con ServerSideRender

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

Paso 3: Consulta WP_Query optimizada y caché de Transients

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

Paso 4: Marcado HTML semántico de tarjetas y escape de datos

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

Paso 5: Invalidación de caché y control de casos extremos

~20 минЛегкий

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

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

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

Интеграция

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

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

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

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