Main/WordPress Fullstack/Blueprints/Gutenberg & FSE/Extending Core Blocks with Custom Controls & Animations via Block Filters
Back to «Gutenberg & FSE» cards
Gutenberg & FSE(ТЗ 33 из 54)
Spec: Extending Core Blocks with Custom Controls & Animations via Block Filters
Gutenberg & FSE5 шагов • +25 XP

Spec: Extending Core Blocks with Custom Controls & Animations via Block Filters

Extending native WordPress blocks without modifying core code: JavaScript filter hooks (blocks.registerBlockType, editor.BlockEdit, blocks.getSaveContent.extraProps), custom attributes, InspectorControls injection, and AOS/GSAP animation attributes.

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

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

We want to add animation triggers (AOS / GSAP data attributes) and custom badge settings to standard WordPress Paragraph, Heading, and Image blocks without replacing them with custom blocks.
Ключевые требования:
  • •Extend core block attributes via blocks.registerBlockType filter hook
  • •Inject custom InspectorControls sidebar panel via editor.BlockEdit higher-order component (HOC)
  • •Apply custom data attributes to frontend DOM via blocks.getSaveContent.extraProps
  • •Filter specific block types only (core/heading, core/paragraph, core/image)
  • •Integrate lightweight client-side animation runner (IntersectionObserver / AOS)
Ограничения проекта:
  • •Zero core block deprecation errors or validation mismatches
  • •Clean React Higher-Order Component architecture with withSelect or compose
Критерии приёмки (KPI):
  • 0 validation errors in Gutenberg editor console across 100+ saved posts
  • Animation script executes at 60fps on mobile without layout thrashing
  • InspectorControls cleanly disabled for non-relevant core blocks

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

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

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

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

1
Этап 1 из 5

Step 1: Attribute extension via blocks.registerBlockType filter

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

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

Hook into 'blocks.registerBlockType' using addFilter(). Check if blockName is in target list (e.g. core/heading, core/image). Append custom attributes: 'animationType' (string) and 'animationDelay' (number).

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

Always return unmodified settings object for non-target blocks.

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

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

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

Step 2: InspectorControls injection via editor.BlockEdit HOC

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

Step 3: Frontend attribute injection via blocks.getSaveContent.extraProps

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

Step 4: Alternative server-side injection via render_block filter

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

Step 5: Animation runner initialization & QA testing

~20 минЛегкий

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

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

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

Интеграция

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

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

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

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