Ikhtisar Chapter 29: Interactivity API

Apa yang Dipelajari?

Cara menggunakan WordPress Interactivity API — sistem resmi (sejak WordPress 6.5, April 2024) untuk menambahkan JavaScript interaktif di sisi pengunjung (front-end). Chapter ini membangun ulang kuis pilihan ganda menggunakan pendekatan modern ini.

---

Poin Utama

1. Mengapa Interactivity API?

Selama ~5 tahun sejak Gutenberg (2018), tidak ada cara resmi untuk menambahkan JS interaktif ke block di front-end. Developer harus pilih sendiri (React? Vue? plain JS?) dan bikin solusi custom.

Interactivity API menyelesaikan ini dengan:

• Server-side rendering + client-side hydration → HTML sudah ada (bagus untuk SEO), JS menambah interaktivitas
• Standarisasi → satu cara resmi, tidak perlu reinvent the wheel
• Context (local state) + State (global state) → manajemen data yang jelas

---

2. Scaffolding dengan @wordpress/create-block

npx @wordpress/create-block@latest interactivity-quiz --template @wordpress/create-block/interactive-template

File penting yang di-generate:

File	Fungsi
block.json	Metadata block
edit.js	UI admin editor
render.php	HTML front-end + directives
view.js	JavaScript interaktif (store, actions, callbacks)

---

3. Directives — Penghubung HTML dan JavaScript

Directives adalah atribut HTML khusus yang menghubungkan elemen dengan store JavaScript:

Directive	Fungsi	Contoh
data-wp-interactive	Hubungkan ke namespace	data-wp-interactive="create-block"
data-wp-context	Local state (per instance)	data-wp-context='{"count": 0}'
data-wp-on--click	Event handler	data-wp-on--click="actions.handleClick"
data-wp-text	Tampilkan & update teks	data-wp-text="context.count"
data-wp-class--nama	Toggle CSS class	data-wp-class--visible="context.showMsg"
data-wp-bind--attr	Toggle HTML attribute	data-wp-bind--hidden="!context.solved"
data-wp-each	Loop array	data-wp-each="context.answers"

---

4. Context (Local State) — Per Instance Block

Setiap instance block punya state terpisah dan independen:

<!-- Di render.php -->
<div data-wp-interactive="create-block"
     <?php echo wp_interactivity_data_wp_context($ourContext); ?>>

// Di view.js — akses context
import { store, getContext } from "@wordpress/interactivity";

store("create-block", {
  actions: {
    guessAttempt: () => {
      const context = getContext();
      context.clickCount++;
    }
  }
});

wp_interactivity_data_wp_context() → mengkonversi PHP array ke JSON attribute secara aman.

---

5. Blended Approach (PHP foreach + Directives)

Untuk data yang tidak berubah di runtime, gabungkan PHP loop dengan directives:

<?php foreach ($ourContext['answers'] as $answer) { ?>
  <li data-wp-on--click="actions.guessAttempt"
      <?php echo wp_interactivity_data_wp_context($answer); ?>>
    <?php echo esc_html($answer['text']); ?>
  </li>
<?php } ?>

Keuntungan: HTML sudah di-render server-side (SEO friendly), JS hanya menambah interaktivitas.

---

6. Logika Kuis (Benar/Salah)

Alur saat user menjawab:

1. Klik jawaban → actions.guessAttempt → cek context.index === context.correctAnswer
2. Benar: showCongrats = true → 1 detik → solved = true (tampilkan ikon centang)
3. Salah: showSorry = true → 2.6 detik → auto-reset

Tampilan dikontrol oleh:

• data-wp-class--visible → animasi CSS (opacity transition)
• data-wp-bind--hidden → sembunyikan/tampilkan ikon per jawaban
• Callbacks → logika kompleks untuk class management

---

7. State (Global) vs Context (Local)

Konsep	Scope	Contoh
Context	Per instance block	Pertanyaan, jawaban, solved status
State	Seluruh halaman	Total kuis yang dijawab benar

State diset dari PHP:

wp_interactivity_state("create-block", array("solvedCount" => 0));

Diakses dari JS:

const { state } = store("create-block", { ... });
state.solvedCount++;

Namespace ("create-block") adalah "lem" yang menghubungkan HTML, JS, dan PHP — harus sama di store(), wp_interactivity_state(), dan data-wp-interactive.

---

8. Cross-Plugin Communication

Block dari plugin berbeda bisa berbagi state asalkan pakai namespace yang sama:

• Plugin kuis → set state.solvedCount
• Plugin "Solved Counter" → tampilkan state.solvedCount
• WordPress otomatis merge state dari semua sumber

---

Satu Kalimat

Chapter ini mengajarkan Interactivity API sebagai cara resmi WordPress untuk menambahkan JavaScript interaktif di front-end — dengan sistem context (local), state (global), dan directives yang menghubungkan HTML dengan JavaScript secara deklaratif.