Gutenberg & FSE(ТЗ 4 из 54)
ТЗ: Разработка кастомного Gutenberg-блока (React)
Gutenberg & FSE5 шагов • +25 XP

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

Линейное руководство по созданию интерактивного Gutenberg блока отзывов со слайдером.

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

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

«Нам нужен красивый интерактивный блок-слайдер отзывов клиентов для редактора Gutenberg. Внутри блока должна быть возможность загрузить фото клиента, ввести его имя, отзыв, выбрать рейтинг звездами (1-5) и задать цвет фона блока. Блок должен быть нативным, без использования Elementor.»

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

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

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

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

1
Этап 1 из 5

Анализ ТЗ и выбор инструментов

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

Оцените требования к блоку. Он содержит медиа-файлы (фото) и сложные интерактивные настройки. Выберите способ разработки в зависимости от ваших навыков и требований к проекту.

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

Нативный React-блок быстрее работает и не создает лишней нагрузки на сервер. ACF-блок пишется на чистом PHP за 20 минут, но требует плагина ACF Pro на сайте.

2
Этап 2 из 5

Инициализация блока через сборщик

3
Этап 3 из 5

Описание атрибутов в block.json

4
Этап 4 из 5

Написание edit.js (Интерфейс админки)

5
Этап 5 из 5

Инициализация JS слайдера и сдача

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

Интеграция