Main/WordPress Fullstack/Blueprints/Gutenberg & FSE/Custom Gutenberg Block Development (React & ACF PRO)
Back to «Gutenberg & FSE» cards
Gutenberg & FSE(ТЗ 4 из 54)
Spec: Custom Gutenberg Block Development (React & ACF PRO)
Gutenberg & FSE5 шагов • +25 XP

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.

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

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

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.
Ключевые требования:
  • •Custom block registration adhering to WordPress Block API version 3
  • •block.json metadata manifest with attributes, styles, and supports declarations
  • •Native React edit component with InspectorControls, RichText, and MediaUpload
  • •Clean frontend render (static save component or dynamic render.php)
  • •Zero styling leakage outside the block container using scoped CSS modules or BEM
Ограничения проекта:
  • •Node.js LTS environment for compiling assets with @wordpress/scripts
  • •Compatible with WordPress 6.5+ Site Editor and classic block editor
Критерии приёмки (KPI):
  • Block insertion time < 50ms in block editor
  • Zero block validation errors upon post save and reload
  • Strict adherence to @wordpress/components guidelines

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

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

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

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

1
Этап 1 из 5

Step 1: Architecture choice: Native React vs ACF Blocks

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

Evaluate project requirements: choose native React (@wordpress/create-block) for maximum performance, distribution, and zero plugin dependencies, or ACF PRO for rapid PHP-based prototyping.

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

For commercial themes or client plugins intended for the repository, native React is mandatory.

2
Этап 2 из 5

Step 2 (React): Scaffolding block via @wordpress/create-block

3
Этап 3 из 5

Step 3 (React): block.json attributes schema & supports

4
Этап 4 из 5

Step 4 (React): Edit component with RichText & InspectorControls

5
Этап 5 из 5

Step 5: Asset compilation, validation QA & distribution

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

Интеграция

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

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

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

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