Головна/WordPress Fullstack/Блупринти/Gutenberg & FSE/Розробка кастомного Gutenberg-блока (React та ACF PRO)
До карток розділу «Gutenberg & FSE»
Gutenberg & FSE(ТЗ 4 из 54)
ТЗ: Розробка кастомного Gutenberg-блока (React та ACF PRO)
Gutenberg & FSE5 шагов • +25 XP

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

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

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

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

Нам потрібні кастомні блоки для медіа-порталу (таблиці тарифів, візитка автора, порівняльні таблиці). Команда очікує зручну підтримку, адаптивний попередній перегляд та повну інтеграцію у стандартний інсертер блоків.
Ключевые требования:
  • •Реєстрація блока згідно зі специфікацією WordPress Block API версії 3
  • •Маніфест block.json з описом атрибутів, стилів та параметрів supports
  • •Компонент Edit на React із полями RichText, панеллю налаштувань InspectorControls та MediaUpload
  • •Оптимізоване відображення у фронтенді (компонент Save або динамічний render.php)
  • •Повна ізоляція стилів блока без витоку CSS-правил на інші елементи сторінки
Ограничения проекта:
  • •Середовище Node.js LTS для компіляції асетів за допомогою @wordpress/scripts
  • •Сумісність із WordPress 6.5+ та повноцінна робота в редакторі сайту
Критерии приёмки (KPI):
  • Час вставки блока в редакторі < 50мс
  • Нуль помилок валідації блока під час збереження та перезавантаження статті
  • Повна відповідність дизайн-гайдлайнам @wordpress/components

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

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

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

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

1
Этап 1 из 5

Крок 1: Вибір архітектури: Нативний React чи ACF Blocks

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

Оцініть вимоги проекту: обирайте нативний React (@wordpress/create-block) для максимальної швидкодії та відсутності плагінів, або ACF PRO для швидкої розробки на чистому PHP.

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

Для публічних плагінів та комерційних тем використання нативного React є обов'язковим.

2
Этап 2 из 5

Крок 2 (React): Створення скаффолдингу через @wordpress/create-block

3
Этап 3 из 5

Крок 3 (React): Схема атрибутів та підтримка у block.json

4
Этап 4 из 5

Крок 4 (React): Розробка Edit-компонента з RichText та InspectorControls

5
Этап 5 из 5

Крок 5: Збірка JS, валідація та тестування блоку

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

Интеграция

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

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

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

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