Principal/WordPress Fullstack/Blueprints/Gutenberg y FSE/Conexión de campos personalizados a bloques nativos mediante Block Bindings API
Volver a tarjetas «Gutenberg y FSE»
Gutenberg y FSE(ТЗ 31 из 54)
Especificación: Conexión de campos personalizados a bloques nativos mediante Block Bindings API
Gutenberg y FSE5 шагов • +25 XP

Especificación: Conexión de campos personalizados a bloques nativos mediante Block Bindings API

Uso de la API oficial de Block Bindings de WordPress: vinculación directa de bloques de párrafo, encabezado, imagen y botón a campos personalizados de post meta y ACF sin programar bloques específicos.

~6 ч работыУровень: JuniorWordPress 6.7+ / 7.0Block Bindings APIregister_block_bindings_source()register_post_meta()core/paragraph & core/headingZero-JS Runtime
+5 XP за шаг
Выполнено 0 из 5 шагов (0%)
Трудозатраты~6 рабочих часов
Фриланс вилка~$270 – $450 (€240 – €420)
Оценка веб-студии~$570 – $960 (€540 – €900)

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

Queremos mostrar campos personalizados (fechas de eventos, presupuestos, certificados) utilizando los bloques nativos de WordPress como encabezados y párrafos. No queremos programar un bloque nuevo para cada campo.
Ключевые требования:
  • •Registro de metadatos con show_in_rest => true y esquemas de tipos de datos
  • •Sintaxis oficial de Block Bindings en los atributos del bloque (metadata.bindings)
  • •Registro de fuentes de datos personalizadas con register_block_bindings_source() en PHP
  • •Compatibilidad con bloques estándar: Paragraph, Heading, Button e Image
  • •Integración con patrones de bloques y datos dinámicos de publicaciones
Ограничения проекта:
  • •WordPress 6.5+ (requisito de versión mínima para Block Bindings API)
  • •Cero plugins de terceros: uso exclusivo de las APIs nativas del núcleo
Критерии приёмки (KPI):
  • Reducción del 80% en el código de bloques personalizados necesarios en el tema
  • Actualización inmediata del contenido mostrado al cambiar el metadato en la base de datos
  • Cero impacto negativo en el rendimiento o la estructura del DOM frente a bloques estándar

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

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

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

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

1
Этап 1 из 5

Paso 1: Registro de campos de post meta con register_post_meta

~25 минЛегкий

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

En functions.php, registre los campos (por ejemplo, '_event_date', '_project_budget') con 'show_in_rest' => true, 'type' => 'string' o 'number' y 'single' => true.

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

Si no activa show_in_rest como true, la API de Block Bindings no podrá acceder al campo en el editor.

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

Метаполя, доступные для блочного редактора.

PHP
<?php
// functions.php - Регистрация метаполей для Block Bindings
declare(strict_types=1);

add_action('init', function (): void {
    register_post_meta('portfolio_project', '_project_budget', [
        'show_in_rest'  => true,
        'single'        => true,
        'type'          => 'string',
        'auth_callback' => fn() => current_user_can('edit_posts'),
    ]);

    register_post_meta('portfolio_project', '_project_deadline', [
        'show_in_rest'  => true,
        'single'        => true,
        'type'          => 'string',
        'auth_callback' => fn() => current_user_can('edit_posts'),
    ]);
});
2
Этап 2 из 5

Paso 2: Vinculación en el bloque con el origen core/post-meta

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

Paso 3: Registro de un origen de vinculación personalizado en PHP

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

Paso 4: Vinculación en bloques de imagen y botón

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

Paso 5: Indicador visual en el editor y control de permisos

~20 минЛегкий

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

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

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

Интеграция

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

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

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

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