Ikhtisar Chapter 25: Plugin Featured Professor

Apa yang Dipelajari?

Cara membuat plugin WordPress yang menampilkan profil professor pilihan — mencakup block type dengan dropdown, preview di editor via REST API, relasi dua arah menggunakan post meta, dan lokalisasi (terjemahan) JavaScript.

---

Poin Utama

1. Struktur Plugin & Block Type

Plugin dibuat sebagai class FeaturedProfessor dengan block type sendiri. Di editor, admin memilih professor dari dropdown select yang diisi secara dinamis:

• useSelect hook → ambil daftar professor dari WP data store
• Attribute profId bertipe string (bukan number) karena WordPress menyimpan attribute sebagai string

---

2. Render HTML di Front-End (render_callback)

Front-end tidak pakai JavaScript — murni PHP:

render_callback → WP_Query (ambil post by ID) → ob_start/ob_get_clean → return HTML

Teknik	Fungsi
WP_Query dengan 'p' => $id	Ambil 1 post spesifik
ob_start() / ob_get_clean()	Tangkap output HTML sebagai string
File terpisah di inc/	Organisasi kode yang rapi

HTML yang dirender menampilkan foto, nama, dan daftar program terkait (dari ACF field related_programs).

---

3. Preview Langsung di Editor (REST API + apiFetch)

Agar admin bisa melihat preview professor langsung di editor tanpa buka front-end:

1. Buat custom REST API endpoint: register_rest_route() → generate HTML di server
2. Di JavaScript: apiFetch() panggil endpoint tersebut
3. useState + useEffect → simpan dan tampilkan HTML preview
4. dangerouslySetInnerHTML → render HTML mentah dari server ke React

---

4. Relasi Dua Arah (Post Meta)

Block ini membangun relasi Professor ↔ Program lewat post meta:

Arah	Cara Kerja
Block → Meta	useEffect + wp.data.dispatch('core/editor').editPost() → simpan daftar program ke meta
Meta → Related Posts	Filter the_content + WP_Query dengan meta_query → tampilkan "Related Programs"

Langkah penting:

• getBlocks().filter().map() → scan semua block di post, ambil profId yang unik
• register_meta() di PHP → daftarkan meta field agar bisa diakses REST API
• useEffect dengan cleanup function → hapus data saat block di-remove
• Safety checks: is_singular(), in_the_loop(), is_main_query()

---

5. Lokalisasi JavaScript (i18n)

Agar teks di block bisa diterjemahkan ke bahasa lain:

Langkah	Detail
Import	const {__} = wp.i18n
Gunakan	__("Choose a professor", "domain")
PHP setup	wp_set_script_translations('handle', 'text-domain')
Terjemahan	Pakai plugin Loco Translate untuk buat file .po/.mo

---

Alur Keseluruhan

[Editor]                              [Front-End]
Pilih professor dari dropdown    →    render_callback → WP_Query → HTML
         ↓
Preview via REST API + apiFetch       Relasi dua arah:
         ↓                            Professor halaman → "Related Programs"
Post meta otomatis disimpan           Program halaman → "Featured Professor"

---

Satu Kalimat

Chapter ini membuat plugin yang menampilkan professor pilihan dengan preview langsung di editor, relasi dua arah ke Programs via post meta, dan dukungan terjemahan untuk JavaScript.