Principal/WordPress Fullstack/Blueprints/Gutenberg y FSE/Desarrollo de bloque Gutenberg personalizado (React y ACF PRO)
Volver a tarjetas «Gutenberg y FSE»
Gutenberg y FSE(ТЗ 4 из 54)
Especificación: Desarrollo de bloque Gutenberg personalizado (React y ACF PRO)
Gutenberg y FSE5 шагов • +25 XP

Especificación: Desarrollo de bloque Gutenberg personalizado (React y ACF PRO)

Desarrollo de bloques para el editor de WordPress: elección entre React nativo (@wordpress/create-block) y prototipado rápido en PHP con ACF PRO, manifiesto block.json, esquema de atributos, panel InspectorControls y renderizado dinámico.

+5 XP за шаг
Выполнено 0 из 5 шагов (0%)
Трудозатраты~8 рабочих часов
Фриланс вилка~$360 – $600 (€320 – €560)
Оценка веб-студии~$760 – $1,280 (€720 – €1200)

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

Necesitamos bloques interactivos personalizados para nuestro portal de medios (tarjetas de precios, fichas de autores, tablas comparativas). Buscamos una arquitectura fácil de mantener, con vista previa adaptativa e integrada en el selector de bloques.
Ключевые требования:
  • •Registro del bloque conforme a la especificación Block API versión 3 de WordPress
  • •Manifiesto block.json con definición de atributos, estilos y propiedades supports
  • •Componente Edit en React con edición en línea RichText, panel lateral InspectorControls y MediaUpload
  • •Visualización limpia en el frontend (componente Save o plantilla dinámica render.php)
  • •Aislamiento visual completo del bloque sin interferencias de estilos en el resto de la página
Ограничения проекта:
  • •Entorno Node.js LTS para la compilación de recursos mediante @wordpress/scripts
  • •Compatibilidad con WordPress 6.5+ y funcionamiento fluido en el editor del sitio
Критерии приёмки (KPI):
  • Tiempo de inserción del bloque < 50ms en el editor
  • Cero errores de validación de bloque al guardar y recargar la publicación
  • Cumplimiento total de las directrices de interfaz de @wordpress/components

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

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

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

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

1
Этап 1 из 5

Paso 1: Elección de arquitectura: React nativo vs ACF Blocks

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

Evalúe los requisitos del proyecto: seleccione React nativo (@wordpress/create-block) para el máximo rendimiento y cero dependencias de plugins, o ACF PRO para un prototipado ágil en PHP.

Важные технические нюансы и подводные камни:

Para temas comerciales o plugins destinados al repositorio oficial, React nativo es obligatorio.

2
Этап 2 из 5

Paso 2 (React): Generación de estructura con @wordpress/create-block

3
Этап 3 из 5

Paso 3 (React): Esquema de atributos y supports en block.json

4
Этап 4 из 5

Paso 4 (React): Componente Edit con RichText e InspectorControls

5
Этап 5 из 5

Paso 5: Compilación de recursos, validación y distribución

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

Интеграция

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

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

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

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