Главная/WordPress Fullstack/Блупринты/Gutenberg & FSE/Разработка панели SEO и управления статьей в правом сайдбаре редактора Gutenberg (PluginSidebar)
К карточкам раздела «Gutenberg & FSE»
Gutenberg & FSE(ТЗ 34 из 54)
ТЗ: Разработка панели SEO и управления статьей в правом сайдбаре редактора Gutenberg (PluginSidebar)
Gutenberg & FSE5 шагов • +25 XP

ТЗ: Разработка панели SEO и управления статьей в правом сайдбаре редактора Gutenberg (PluginSidebar)

Создание профессионального интерфейса для редакторов: регистрация PluginSidebar через @wordpress/plugins, реактивная привязка метаполей страницы через useEntityProp и валидация данных перед публикацией.

~10 ч работыУровень: Middle@wordpress/pluginsPluginSidebarPluginDocumentSettingPanel@wordpress/datauseEntityPropREST APIReact 19
+5 XP за шаг
Выполнено 0 из 5 шагов (0%)
Трудозатраты~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 задержек при наборе текста (мгновенная синхронизация со стейтом редактора)
  • Удобство для редакции: все служебные поля собраны в одном месте

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

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

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

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

1
Этап 1 из 5

Регистрация метаполей статьи в PHP с поддержкой REST API

~25 минЛегкий

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

В functions.php зарегистрируйте метаполя _seo_title, _seo_description и _telegram_preview для типа записей post через register_post_meta(). Укажите show_in_rest: true.

План и контрольные точки реализации:
1Зарегистрировать метаполя через register_post_meta
2Включить show_in_rest => true для всех полей
3Задать корректные типы данных
Важные технические нюансы и подводные камни:

Убедитесь, что auth_callback проверяет право пользователя редактировать данный пост.

Ожидаемый артефакт этапа:

Метаполя, доступные для Redux-хранилища Gutenberg.

PHP
<?php
// functions.php - Метаполя для PluginSidebar
declare(strict_types=1);

add_action('init', function (): void {
    $meta_fields = [
        '_seo_title'        => 'string',
        '_seo_description'  => 'string',
        '_telegram_preview' => 'string',
    ];

    foreach ($meta_fields as $field => $type) {
        register_post_meta('post', $field, [
            'show_in_rest'  => true,
            'single'        => true,
            'type'          => $type,
            'auth_callback' => fn() => current_user_can('edit_posts'),
        ]);
    }
});
2
Этап 2 из 5

Создание React-компонента PluginSidebar и кнопки меню

~35 минСредний
3
Этап 3 из 5

Подключение бандла через enqueue_block_editor_assets

~20 минЛегкий
4
Этап 4 из 5

Вывод кастомных мета-тегов в <head> темы

~25 минЛегкий
5
Этап 5 из 5

Тестирование сохранения данных и сброса

~20 минЛегкий

Типичные грабли на этом ТЗ

2 антипаттерна

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

Интеграция