WordPress Interactivity API dan Block Bindings

Definisi

Interactivity API (dari @wordpress/interactivity) memungkinkan interaksi frontend (toggle, counter, filter) langsung di dalam block tanpa bundle JS besar — pola "islands". Block Bindings menghubungkan atribut block ke sumber data (custom field, meta) tanpa kode PHP manual.

Kapan dipakai

• Interactivity API: butuh interaksi ringan di block (accordion, cart, live search) dengan state terisolasi.
• Block Bindings: tampilkan meta/custom field di block bawaan (image, paragraph) lewat UI, bukan koding.
• Hindari untuk SPA penuh; pakai framework eksternal bila butuh routing kompleks.

Cara kerja

Interactivity API (view.js module)

js

import { store, getContext, state } from '@wordpress/interactivity';
 
store('myblock', {
  state: { open: false },
  actions: {
    toggle: () => { state.open = !state.open; },
  },
});

html

<div data-wp-interactive="myblock">
  <button data-wp-on--click="actions.toggle">Buka</button>
  <div data-wp-bind--hidden="!state.open">Konten</div>
</div>

Block Bindings (PHP register)

php

register_block_bindings_source('my/custom-field', [
  'label' => 'Custom Field',
  'get_value_callback' => fn($args) => get_post_meta($args['postId'], 'my_field', true),
]);

Struktur alur

Catatan implementasi

• data-wp-interactive wajib pembungkus; state global per store, getContext untuk per-item.
• Bindings butuh WP 6.5+; daftarkan source lewat register_block_bindings_source.
• Interactivity API otomatis batasi JS ke block yang butuh — bundle kecil.
• Jangan campur jQuery manual dengan reactivity API; pilih satu pola.

Kesalahan umum

• Lupa data-wp-interactive: directive data-wp-* tidak aktif.
• State global dipakai untuk list: gunakan context per-item.
• Bindings source return null: block kosong; sediakan default.
• Over-JS di block: Interactivity API untuk ringan, bukan SPA.

Referensi terkait

• Gutenberg Blocks, block.json, Dynamic Blocks
• Enqueue JS Modern: Script Modules
• Block Patterns dan Options API