Главная/WordPress Fullstack/Блупринты/Gutenberg & FSE/Разработка панели SEO и управления статьей в правом сайдбаре редактора Gutenberg (PluginSidebar)
К карточкам раздела «Gutenberg & FSE»Gutenberg & FSE(ТЗ 34 из 54)
ТЗ: Разработка панели SEO и управления статьей в правом сайдбаре редактора Gutenberg (PluginSidebar)Трудозатраты~10 рабочих часов
Фриланс вилка~$450 – $750 (€400 – €700)
Оценка веб-студии~$950 – $1,600 (€900 – €1500)
ТЗ заказчика (исходный бриф):
«В нашей редакции авторы заполняют множество метаполей: краткий анонс для Telegram, сложность статьи, время чтения и кастомные SEO-тайтлы. Старые метабоксы внизу страницы неудобны. Нужна стильная выдвижная панель прямо в правом верхнем тулбаре Gutenberg с фирменной иконкой, реактивными полями и подсчетом количества символов.»
Ключевые требования:
- •Кастомная кнопка с фирменной иконкой в правом верхнем тулбаре редактора (PluginSidebarMoreMenuItem)
- •Выдвижная правая панель PluginSidebar с табами: «SEO метаданные» и «Анонс в соцсети»
- •Двусторонняя реактивная синхронизация данных без перезагрузки через useEntityProp
- •Счетчик символов с цветовой индикацией (зеленый при длине 140-160 символов, красный при переборе)
- •Блокировка кнопки «Опубликовать» при незаполненных обязательных полях
Ограничения проекта:
- •Запрет на использование устаревших PHP-метабоксов через add_meta_box
- •Все метаполя должны быть зарегистрированы через register_post_meta с show_in_rest => true
- •Полная интеграция с Redux-хранилищем ядра (@wordpress/data core/editor)
Критерии приёмки (KPI):
- Время отклика интерфейса сайдбара < 16 мс (60 FPS в React)
- 0 задержек при наборе текста (мгновенная синхронизация со стейтом редактора)
- Удобство для редакции: все служебные поля собраны в одном месте
Пошаговое практическое руководство по ТЗ
Подробный разбор архитектуры, код реализации и советы эксперта по каждому этапу: