Context dan Rendering Dasar di Interactivity API

Memulai dari render.php

Bersihkan Boilerplate

Hapus seluruh div boilerplate dari src/render.php. Mulai dari scratch:

<?php
// render.php
?>
<div>
  <p>The button below has been clicked 0 times</p>
  <button>Click me</button>
</div>

Pastikan npm start berjalan agar perubahan di src/ otomatis di-compile ke build/.

Directive: data-wp-on--click

Menambahkan Event Handler

<button data-wp-on--click="actions.buttonHandler">
  Click me
</button>

Anatomi directive:

• data-wp- → prefix WordPress Interactivity API
• on → jenis directive (event handler)
• --click → modifier (tipe event: click, keyup, scroll, hover, dsb.)
• "actions.buttonHandler" → nama fungsi di store

Mendefinisikan Action di view.js

// src/view.js
import { store, getContext } from "@wordpress/interactivity";

store("create-block", {
  actions: {
    buttonHandler: () => {
      alert("Hello there!");
    },
  },
  callbacks: {
    // akan dibahas nanti
  },
});

Menghubungkan HTML dengan Store: data-wp-interactive

Masalah

Klik button → tidak terjadi apa-apa. Store dan HTML belum "terhubung".

Solusi: Namespace

<div data-wp-interactive="create-block">
  <p>The button below has been clicked 0 times</p>
  <button data-wp-on--click="actions.buttonHandler">Click me</button>
</div>

Kunci: data-wp-interactive="create-block" harus cocok dengan namespace di store("create-block", {...}).

Namespace bisa dilihat di block.json → name: "create-block/interactivity-quiz" → bagian sebelum / adalah namespace.

Directive: data-wp-context (Local State)

Apa Itu Context?

Context = local state untuk instance block tertentu. Setiap instance block punya context-nya sendiri yang terpisah.

Syntax di HTML

<div data-wp-interactive="create-block"
     data-wp-context='{"clickCount": 0}'>
  <p>The button below has been clicked 
    <span data-wp-text="context.clickCount"></span> times
  </p>
  <button data-wp-on--click="actions.buttonHandler">Click me</button>
</div>

Penting: data-wp-context harus pakai single quotes ('...') di luar, dan double quotes ("...") untuk property names di dalam JSON.

Directive: data-wp-text

<span data-wp-text="context.clickCount"></span>

Otomatis menampilkan dan mengupdate nilai context.clickCount. Mirip {{ clickCount }} di Vue atau {clickCount} di React.

Mengubah Context dari JavaScript

getContext() — Akses Context dari Action

import { store, getContext } from "@wordpress/interactivity";

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

Cara kerja:

1. User klik button → actions.buttonHandler dijalankan
2. getContext() mengambil context dari elemen DOM terdekat
3. context.clickCount++ mengubah nilai
4. UI otomatis update (reactive!) — tidak perlu manual DOM manipulation

Server-Side Pre-rendering

Keajaiban SSR

Jika Anda view page source (bukan inspect element), span sudah terisi dengan nilai awal:

<!-- View Page Source — HTML mentah dari server -->
<span data-wp-text="context.clickCount">0</span>

WordPress pre-populate nilai di server sebelum mengirim HTML ke browser!

Keuntungan:

Aspek	Manfaat
SEO	Konten sudah ada di HTML — search engine bisa membaca
Accessibility	Screen reader langsung baca konten
Speed	Tidak perlu tunggu JS load untuk tampilkan konten awal
Hydration	JS "mengambil alih" setelah HTML ter-render

Ini menghilangkan kebutuhan framework headless seperti Next.js — WordPress sudah memberikan best of both worlds: server-side rendering + client-side interactivity.

Context vs State (Preview)

	Context	State
Scope	Per instance block	Global (seluruh halaman)
Gunakan untuk	Data spesifik untuk satu block	Data yang dibagi antar block
Contoh	Jawaban quiz #1	Total quiz yang terjawab benar
Frekuensi penggunaan	90% kasus	10% kasus khusus

Aturan praktis: Selalu mulai dengan context. Gunakan state hanya ketika butuh data yang dibagi antar block instances.

Ringkasan Directives yang Dipelajari

Directive	Fungsi	Contoh
data-wp-interactive	Menghubungkan DOM ke namespace store	="create-block"
data-wp-context	Set local state di DOM	='{"key": "value"}'
data-wp-on--click	Event handler klik	="actions.handler"
data-wp-text	Render teks dari context/state	="context.clickCount"