Головна/WordPress Fullstack/Блупринти/Gutenberg & FSE/Нативне підключення довільних полів (ACF / Post Meta) через Block Bindings API
До карток розділу «Gutenberg & FSE»
Gutenberg & FSE(ТЗ 31 из 54)
ТЗ: Нативне підключення довільних полів (ACF / Post Meta) через Block Bindings API
Gutenberg & FSE5 шагов • +25 XP

ТЗ: Нативне підключення довільних полів (ACF / Post Meta) через Block Bindings API

Використання офіційного ядра Block Bindings API у WordPress: пряме зв'язування стандартних блоків Paragraph, Heading, Image та Button з метаполями без необхідності створення окремих React-блоків.

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

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

Ми хочемо виводити кастомні поля запису (дати заходів, бюджет проєкту, сертифікати) за допомогою стандартних блоків WordPress. Нам не потрібні саморобні блоки під кожне окреме поле.
Ключевые требования:
  • •Реєстрація метаполів із прапорцем show_in_rest => true та типами даних
  • •Нативний синтаксис підключення Block Bindings в атрибутах блоків (metadata.bindings)
  • •Реєстрація кастомного джерела даних через register_block_bindings_source() у PHP
  • •Підтримка зв'язування для базових блоків Paragraph, Heading, Button та Image
  • •Сумісність із патернами та динамічними даними постів
Ограничения проекта:
  • •WordPress 6.5+ (мінімальна вимога для роботи Block Bindings API)
  • •Повна відмова від зайвих плагінів — використання лише нативних можливостей ядра
Критерии приёмки (KPI):
  • Скорочення обсягу кастомного коду блоків на 80% у темі
  • Миттєве оновлення вмісту на сторінках при зміні метаполя в базі даних
  • Нуль зсувів макета та нуль додаткового HTML-коду порівняно зі звичайними блоками

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

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

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

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

1
Этап 1 из 5

Крок 1: Реєстрація метаполів через register_post_meta

~25 минЛегкий

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

У functions.php зареєструйте метаполя (наприклад, '_event_date', '_project_budget') з параметрами 'show_in_rest' => true, 'type' => 'string' або 'number', та 'single' => true.

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

Якщо параметр show_in_rest не дорівнює true, API Block Bindings не зможе зчитувати значення в редакторі.

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

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

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

Крок 2: Зв'язування атрибутів блоку з джерелом core/post-meta

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

Крок 3: Реєстрація кастомного джерела зв'язування у PHP

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

Крок 4: Зв'язування блоків зображення (Image) та кнопки (Button)

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

Крок 5: Індикація в редакторі та перевірка прав доступу

~20 минЛегкий

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

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

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

Интеграция

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

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

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

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