Principal/WordPress Fullstack/Blueprints/Gutenberg y FSE/Ampliación de bloques nativos con controles y animaciones mediante Block Filters
Volver a tarjetas «Gutenberg y FSE»
Gutenberg y FSE(ТЗ 33 из 54)
Especificación: Ampliación de bloques nativos con controles y animaciones mediante Block Filters
Gutenberg y FSE5 шагов • +25 XP

Especificación: Ampliación de bloques nativos con controles y animaciones mediante Block Filters

Ampliación de bloques nativos de WordPress sin modificar el núcleo: ganchos de filtro en JavaScript (blocks.registerBlockType, editor.BlockEdit, blocks.getSaveContent.extraProps), atributos personalizados y animaciones AOS/GSAP.

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

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

Queremos añadir controles de animación (atributos AOS / GSAP) e insignias a los bloques estándar de párrafo, encabezado e imagen sin necesidad de duplicarlos como bloques propios.
Ключевые требования:
  • •Ampliación del esquema de atributos de bloques mediante el filtro blocks.registerBlockType
  • •Inserción de un panel en la barra lateral mediante un componente HOC en editor.BlockEdit
  • •Inserción de atributos de datos en el frontend con blocks.getSaveContent.extraProps o mediante PHP
  • •Filtrado selectivo limitando los cambios a core/heading, core/paragraph y core/image
  • •Inclusión de un ejecutor ligero de animaciones basado en IntersectionObserver
Ограничения проекта:
  • •Cero alertas de validación o roturas en publicaciones previamente guardadas
  • •Arquitectura limpia de componentes de orden superior (HOC) en React
Критерии приёмки (KPI):
  • 0 errores de validación en la consola del editor en más de 100 artículos publicados
  • Animaciones fluidas a 60fps en dispositivos móviles sin bloqueos del hilo principal
  • Panel de animaciones oculto en bloques no compatibles

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

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

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

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

1
Этап 1 из 5

Paso 1: Ampliación de atributos con el filtro blocks.registerBlockType

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

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

Conéctese al filtro 'blocks.registerBlockType' mediante addFilter(). Compruebe si blockName coincide con los bloques objetivo. Incorpore los atributos: 'animationType' (string) y 'animationDelay' (number).

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

Devuelva siempre el objeto settings original e inalterado para el resto de bloques.

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

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

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

Paso 2: Inserción de panel en la barra lateral con el HOC editor.BlockEdit

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

Paso 3: Inyección de atributos en frontend con getSaveContent.extraProps

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

Paso 4: Inyección dinámica en servidor mediante el filtro render_block

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

Paso 5: Inicialización del script de animación y control de calidad

~20 минЛегкий

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

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

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

Интеграция

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

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

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

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