Pengantar WordPress Interactivity API

Sejarah Singkat WordPress & Block

Tahun	Peristiwa
2003	WordPress pertama kali dirilis
Desember 2018	Revolusi Gutenberg/Block — block jadi inti WordPress
2019-2023	~5 tahun membangun dengan blocks, tapi tidak ada cara resmi untuk menambahkan JavaScript interaktif di sisi visitor/front-end
April 2024	WordPress 6.5 — Interactivity API resmi diluncurkan!

Apa Itu Interactivity API?

Interactivity API adalah cara resmi WordPress untuk menambahkan client-side JavaScript / interaktivitas ke block di sisi front-end (visitor-facing) website.

Masalah Sebelumnya

Selama ~5 tahun sejak Gutenberg:

• Admin editor → sudah sangat interaktif (drag & drop blocks, reorder, dsb.)
• Visitor front-end → tidak ada cara resmi untuk menambahkan JavaScript ke block di sisi pengunjung

Developer harus:

• Memilih sendiri: plain JS, React, Vue, Angular?
• Membuat solusi sendiri untuk "dance" antara server data dan client-side JS
• Decision fatigue yang luar biasa

Mengapa Ini Penting?

1. Missing puzzle piece — Block seharusnya tidak dirilis tanpa fitur ini
2. Menghilangkan kebutuhan headless — Tidak perlu Next.js untuk mendapatkan interaktivitas modern
3. Server-side rendering + Client-side JS — Best of both worlds
4. Standarisasi — Satu cara resmi, tidak perlu reinvent the wheel
5. SEO + Accessibility + Speed — HTML sudah di-render server-side, lalu di-hydrate oleh JS

Analogi

Sebelumnya developer merasa "ditinggalkan" oleh WordPress karena harus fend for themselves untuk interaktivitas front-end. Sekarang WordPress akhirnya "peduli" lagi terhadap developer experience.

Proyek di Chapter Ini

Kita akan rebuild block "Are You Paying Attention" multiple-choice quiz menggunakan Interactivity API — menggantikan solusi custom JavaScript dari chapter sebelumnya.

Yang Akan Dipelajari:

• @wordpress/create-block dengan interactive template
• Context (local state per block instance)
• State (global state antar block)
• Directives: data-wp-on--click, data-wp-text, data-wp-class, data-wp-bind, data-wp-each, data-wp-context, data-wp-interactive
• Actions dan Callbacks di view.js
• wp_interactivity_data_wp_context() — konversi PHP → JS
• wp_interactivity_state() — global state dari PHP
• Namespace sebagai "glue" yang menghubungkan semua block

Ringkasan

Konsep	Penjelasan
Interactivity API	Sistem resmi WP untuk JS interaktif di front-end
Dirilis	April 2024 (WordPress 6.5)
Menggantikan	Solusi custom JS yang tidak standar
Keunggulan utama	Server-side rendering + client-side hydration
Context	Local state per block instance
State	Global state antar block instances