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

ТЗ: Добавление кастомных настроек и анимаций (AOS/GSAP) к стандартным блокам WordPress через Block Filters

Расширение возможностей редактора без дублирования блоков: добавление кастомных атрибутов, тумблеров в панель InspectorControls и data-атрибутов через JavaScript-фильтры wp.hooks.addFilter.

~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)

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

«Клиент хочет иметь возможность включать анимацию появления при скролле (Fade In, Slide Up) и эффект задержки для ЛЮБОГО стандартного блока (колонка, изображение, обложка). Мы не хотим создавать свои копии блоков WordPress — нужно добавить аккуратную секцию настроек «Анимация при скролле» в боковую панель существующих блоков.»
Ключевые требования:
  • •Добавление атрибутов animationType и animationDelay ко всем блокам-контейнерам (core/group, core/columns, core/image)
  • •Вывод дополнительной панели «Анимация при скролле» в InspectorControls
  • •Сохранение атрибутов data-aos и data-aos-delay в финальный HTML через фильтр getSaveContent.extraProps
  • •Подключение легковесной библиотеки анимаций на фронтенде
  • •Соблюдение доступности: отключение анимаций для пользователей с prefers-reduced-motion: reduce
Ограничения проекта:
  • •Запрет на дублирование стандартных блоков ядра
  • •Фильтры не должны вызывать ошибку Block Invalidation при открытии старых постов
  • •Анимация должна работать только на фронтенде и не мешать редактированию контента в админке
Критерии приёмки (KPI):
  • 0 ошибок валидации блоков в Gutenberg
  • Поддержка 6 типов анимаций (fade-up, fade-down, zoom-in, flip-left и т.д.)
  • Мгновенное отключение эффектов при выборе "Без анимации"

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

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

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

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

1
Этап 1 из 5

Расширение схемы блоков через фильтр blocks.registerBlockType

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

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

В файле src/filters/block-animation.ts подключите wp.hooks.addFilter("blocks.registerBlockType", ...). Добавьте атрибуты animationType и animationDelay к разрешенным типам блоков.

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

Фильтруйте список блоков: применяйте анимации только к контейнерам, колонкам и медиа-блокам.

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

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

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

Внедрение контролов в инспектор через фильтр editor.BlockEdit

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

Сохранение data-атрибутов через blocks.getSaveContent.extraProps

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

Инициализация библиотеки анимаций на фронтенде

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

Верификация в редакторе и тестирование страниц

~20 минЛегкий

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

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

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

Интеграция

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

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

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

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