Ikhtisar Chapter 24: Multiple Choice Block ("Are You Paying Attention?")

Apa yang Dipelajari?

Cara membuat block type kuis pilihan ganda dari nol — mulai dari UI editor untuk menulis soal & jawaban, menyimpan data ke database, hingga tampilan interaktif di front-end menggunakan React.

---

Poin Utama

1. Setup Block Type & Komponen WordPress

Block didaftarkan dengan wp.blocks.registerBlockType(). UI editor dibangun pakai komponen bawaan WordPress:

Komponen	Fungsi
TextControl	Input teks untuk pertanyaan
Flex, FlexBlock, FlexItem	Layout baris fleksibel
Button	Tombol tambah/hapus jawaban
Icon	Ikon bintang (star-filled / star-empty)

Styling pakai SCSS (bukan CSS biasa) — perlu build step via @wordpress/scripts.

---

2. Menyimpan Data dengan Attributes

Tiga attribute utama disimpan di database:

Attribute	Tipe	Fungsi
question	string	Teks pertanyaan
answers	array	Daftar jawaban
correctAnswer	number	Index jawaban benar

Jawaban ditambah pakai concat([]) (bukan push) karena React butuh array baru agar tahu harus re-render. Jawaban dihapus pakai filter().

---

3. Lock/Unlock Tombol Publish

Agar post tidak bisa dipublish tanpa jawaban benar:

• Pakai wp.data.subscribe() — listener yang jalan setiap ada perubahan di editor
• Dibungkus dalam IIFE (Immediately Invoked Function Expression)
• lockPostSaving(identifier) → kunci tombol Publish
• unlockPostSaving(identifier) → buka kunci jika sudah ada jawaban benar

---

4. React di Front-End (Sisi Pengunjung)

Front-end pakai file JS terpisah (frontend.js) yang bukan bagian dari admin editor:

• Multi-entry build di package.json → wp-scripts build src/index.js src/frontend.js
• Data dari PHP dikirim ke JS lewat tag <pre> tersembunyi berisi JSON
• React dimuat via dependency wp-element (~7KB, bukan bundle ulang React sendiri)
• ReactDOM.render() dengan spread operator {...data} untuk passing props

---

5. Interaksi User (useState, useEffect)

Hook	Fungsi
useState	Menyimpan state: jawaban dipilih, benar/salah, animasi
useEffect	Auto-reset tampilan setelah 2.6 detik jika salah

Alur klik jawaban:

1. User klik → handleAnswer() cek benar/salah
2. Tampilkan ikon SVG (centang hijau / silang merah) dari Bootstrap Icons
3. Jika salah → animasi fade-in, tunggu 2.6 detik, reset otomatis
4. Jika benar → tampilkan pesan selamat, tidak bisa diklik lagi

---

6. Opsi Admin di Sidebar (InspectorControls)

Lewat sidebar kanan editor, admin bisa:

• Ubah warna background → ColorPicker (bawaan WP) atau ChromePicker (dari react-color)
• Ubah alignment → BlockControls + AlignmentToolbar

Attribute tambahan: bgColor (string hex) dan theAlignment (left/center/right).

Block juga punya preview di inserter lewat property example di registerBlockType().

---

Alur Keseluruhan

[Editor]                          [Front-End]
Admin tulis soal & jawaban   →   Data disimpan di database
                                       ↓
                              PHP render <pre> berisi JSON
                                       ↓
                              frontend.js baca JSON
                                       ↓
                              React render kuis interaktif
                                       ↓
                              User klik jawaban → cek benar/salah

---

Satu Kalimat

Chapter ini membangun block kuis pilihan ganda lengkap — dari editor WordPress untuk membuat soal, sampai tampilan React interaktif di sisi pengunjung yang mengecek jawaban benar/salah dengan animasi.