Головна/WordPress Fullstack/Блупринти/Gutenberg & FSE/Додавання кастомних налаштувань та анімацій (AOS/GSAP) через Block Filters
До карток розділу «Gutenberg & FSE»
Gutenberg & FSE(ТЗ 33 из 54)
ТЗ: Додавання кастомних налаштувань та анімацій (AOS/GSAP) через Block Filters
Gutenberg & FSE5 шагов • +25 XP

ТЗ: Додавання кастомних налаштувань та анімацій (AOS/GSAP) через Block Filters

Розширення стандартних блоків WordPress без зміни коду ядра: фільтри JavaScript (blocks.registerBlockType, editor.BlockEdit, blocks.getSaveContent.extraProps), кастомні атрибути, додавання налаштувань у сайдбар та анімаційні атрибути.

~8 ч работыУровень: Middle@wordpress/hookswp.hooks.addFilterInspectorControls@wordpress/componentsblocks.registerBlockTypeeditor.BlockEditblocks.getSaveContent.extraPropsAOS.js / GSAP
+5 XP за шаг
Выполнено 0 из 5 шагов (0%)
Трудозатраты~8 рабочих часов
Фриланс вилка~$360 – $600 (€320 – €560)
Оценка веб-студии~$760 – $1,280 (€720 – €1200)

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

Ми хочемо додати налаштування анімацій появи (атрибути AOS / GSAP) та кастомні бейджі до стандартних блоків Paragraph, Heading та Image без створення окремих блоків-дублікатів.
Ключевые требования:
  • •Розширення схеми атрибутів базових блоків через фільтр blocks.registerBlockType
  • •Додавання панелі налаштувань у сайдбар за допомогою HOC-компонента на хуку editor.BlockEdit
  • •Передача дата-атрибутів у фронтенд через blocks.getSaveContent.extraProps або PHP-фільтр
  • •Фільтрація лише необхідних типів блоків (core/heading, core/paragraph, core/image)
  • •Підключення легкого скрипту запуску анімацій на базі IntersectionObserver
Ограничения проекта:
  • •Нуль помилок валідації розмітки збережених раніше блоків
  • •Акуратна React HOC архітектура без зайвих перерендерів
Критерии приёмки (KPI):
  • 0 помилок валідації в консолі редактора на понад 100 опублікованих статтях
  • Швидкість анімацій стабільно 60fps на мобільних телефонах
  • Панель налаштувань анімацій прихована для невідповідних блоків

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

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

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

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

1
Этап 1 из 5

Крок 1: Розширення схеми атрибутів через blocks.registerBlockType

~30 минСредний

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

Підключіться до фільтра 'blocks.registerBlockType' через addFilter(). Перевірте, чи входить blockName до цільового списку. Додайте атрибути: 'animationType' (тип string) та 'animationDelay' (тип number).

План и контрольные точки реализации:
1Подключить фильтр blocks.registerBlockType
2Ограничить применение массивом TARGET_BLOCKS
3Объявить атрибуты animationType и animationDelay с дефолтными значениями
Важные технические нюансы и подводные камни:

Завжди повертайте незмінений об'єкт settings для всіх інших блоків.

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

Расширенная схема атрибутов для стандартных блоков ядра.

TYPESCRIPT
// src/filters/block-animation.ts
import { addFilter } from '@wordpress/hooks';

const TARGET_BLOCKS = ['core/group', 'core/columns', 'core/column', 'core/image', 'core/cover'];

addFilter(
  'blocks.registerBlockType',
  'agenticlab/add-animation-attributes',
  (settings, name) => {
    if (!TARGET_BLOCKS.includes(name)) return settings;

    return {
      ...settings,
      attributes: {
        ...settings.attributes,
        animationType: {
          type: 'string',
          default: 'none',
        },
        animationDelay: {
          type: 'number',
          default: 0,
        },
      },
    };
  }
);
2
Этап 2 из 5

Крок 2: Впровадження панелі в сайдбар через HOC editor.BlockEdit

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

Крок 3: Додавання атрибутів у фронтенд через getSaveContent.extraProps

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

Крок 4: Альтернативна динамічна модифікація через PHP-фільтр render_block

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

Крок 5: Ініціалізація анімаційного скрипта та тестування

~20 минЛегкий

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

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

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

Интеграция

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

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

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

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