Mengontrol Post Meta dengan Block Type

Gambaran Umum

Video ini membahas cara membuat hubungan dua arah antara blog post dan professor menggunakan post metadata. Dengan menyimpan metadata, kita bisa query dari kedua sisi: blog post menemukan professor-nya, DAN professor menemukan blog post yang meng-feature-nya.

---

Mengapa Post Meta Diperlukan?

Situasi Saat Ini

• Block attribute profId tersimpan di post_content sebagai block comment
• Blog post bisa menemukan professor (one-way street)
• Professor tidak bisa menemukan blog post mana yang meng-feature-nya

Solusi: Post Meta

• Tabel wp_postmeta di database dengan kolom: post_id, meta_key, meta_value
• post_id = ID blog post
• meta_key = "featuredProfessor"
• meta_value = ID professor post

---

Mengupdate Meta dari JavaScript

Fungsi updateTheMeta

function updateTheMeta() {
  // 1. Ambil semua block di editor
  // 2. Filter hanya block "featured-professor"
  // 3. Map ke array profId saja
  // 4. Hapus duplikat
  const profsForMeta = wp.data.select('core/block-editor')
    .getBlocks()
    .filter(x => x.name == "ourplugin/featured-professor")
    .map(x => x.attributes.profId)
    .filter((x, index, ar) => {
      return ar.indexOf(x) == index;  // Hanya unique values
    });

  // Update meta di WordPress data store
  wp.data.dispatch('core/editor').editPost({
    meta: { featuredProfessor: profsForMeta }
  });
}

Penjelasan Step-by-Step

Step 1: Ambil semua blocks

wp.data.select('core/block-editor').getBlocks()

→ Return array dari SEMUA block di halaman (paragraphs, headings, dll.)

Step 2: Filter featured-professor blocks

.filter(x => x.name == "ourplugin/featured-professor")

→ Hanya sisakan block type kita

Step 3: Map ke profId saja

.map(x => x.attributes.profId)

→ Dari array of objects → array of numbers: [43, 41, 41]

Step 4: Hapus duplikat

.filter((x, index, ar) => ar.indexOf(x) == index)

→ indexOf(x) mencari index pertama dari value x → Jika index saat ini ≠ index pertama, berarti duplikat → dibuang → Hasil: [43, 41] (unique values saja)

Step 5: Dispatch ke data store

wp.data.dispatch('core/editor').editPost({
  meta: { featuredProfessor: profsForMeta }
});

→ Ini belum menyimpan ke database — hanya update memory JavaScript → Baru tersimpan saat user klik Update/Save post

---

Memanggil updateTheMeta di useEffect

Saat profId Berubah

useEffect(function() {
  if (props.attributes.profId) {
    updateTheMeta();        // Update meta setiap kali profId berubah

    async function go() {
      const response = await apiFetch({
        path: `/featuredProfessor/v1/getHTML?profId=${props.attributes.profId}`,
        method: 'GET'
      });
      setThePreview(response);
    }
    go();
  }
}, [props.attributes.profId]);

Saat Block Dihapus (Cleanup Function)

useEffect(function() {
  return function() {
    updateTheMeta();  // Re-calculate meta saat block di-unmount
  };
}, []);  // Empty array = hanya run sekali saat mount

Cara kerja cleanup:

1. useEffect dengan empty array [] → function hanya dijalankan sekali saat component pertama kali render
2. Jika function tersebut return sebuah function → itu disebut cleanup function
3. React memanggil cleanup function saat component di-unmount (dihapus dari DOM)
4. Cleanup memanggil updateTheMeta() → re-calculate daftar professor yang tersisa

---

Mendaftarkan Meta di PHP

register_meta() di onInit

function onInit() {
  // ... register script, style, block type ...

  register_meta('post', 'featuredProfessor', array(
    'show_in_rest' => true,
    'type' => 'number',
    'single' => false
  ));
}

Penjelasan Parameter

Parameter	Nilai	Penjelasan
Arg 1	'post'	Tipe metadata (bukan comment/user)
Arg 2	'featuredProfessor'	Nama meta key — harus match dengan JavaScript
show_in_rest	true	Agar bisa diakses/diupdate via REST API
type	'number'	Tipe data value
single	false	Penting: Setiap professor mendapat row terpisah di database

Mengapa single: false?

Jika single: true:

• WordPress mencoba menyimpan semua ID dalam satu row (serialized)
• Performance lookup lebih lambat

Jika single: false:

• Setiap professor mendapat row tersendiri di wp_postmeta:

| post_id | meta_key           | meta_value |
|---------|-------------------|------------|
| 100     | featuredProfessor  | 43         |
| 100     | featuredProfessor  | 41         |

• Lookup database jauh lebih cepat
• Lebih mudah untuk query dengan meta_query

---

Hasil di Database

Setelah save post, di tabel wp_postmeta:

post_id	meta_key	meta_value
(blog post ID)	featuredProfessor	43
(blog post ID)	featuredProfessor	41

• Setiap featured professor = 1 row
• Semua row punya post_id yang sama (blog post yang sama)
• Meta key identik, hanya value yang berbeda