Konversi Data PHP ke JavaScript (Blended Approach)

Mengapa Tidak Pakai template data-wp-each?

Untuk quiz ini, jawaban tidak akan berubah secara reaktif (tidak ada tambah/hapus/edit di runtime). Selain itu, per April 2024 ada bug CSS class management pada direct child dari <template>.

Solusi: Gunakan PHP foreach di-blend dengan Interactivity API directives — lebih stabil dan elegan.

Membangun Custom Context Array di PHP

Langkah 1: Buat Array Answers yang Lebih Kaya

<?php
// src/render.php — di bagian PHP atas

// Array kosong untuk answers yang sudah di-enrich
$answers = array();

// Custom context yang akan jadi data-wp-context
$ourContext = array(
  "solved" => false,
  "showCongrats" => false,
  "showSorry" => false,
  "correctAnswer" => $attributes['correctAnswer'],
  "answers" => $answers
);

// Loop untuk membangun array answers
for ($i = 0; $i < count($attributes['answers']); $i++) {
  $answers[$i]['index'] = $i;
  $answers[$i]['text'] = $attributes['answers'][$i];
  $answers[$i]['correct'] = ($attributes['correctAnswer'] == $i);
}

// Update answers di context
$ourContext['answers'] = $answers;
?>

Hasil Struktur Data

Setiap item di array answers sekarang punya:

[
  0 => ["index" => 0, "text" => "Meow", "correct" => false],
  1 => ["index" => 1, "text" => "Oink", "correct" => false],
  2 => ["index" => 2, "text" => "Bark", "correct" => true],
]

Mengapa Tidak Pakai $attributes Langsung?

Kita ingin mengontrol bentuk data yang masuk ke context:

• Hanya data yang benar-benar diperlukan (tanpa bgColor dll.)
• Setiap answer punya index untuk perbandingan mudah
• Property correct boolean untuk menampilkan icon ✓ atau ✗
• Property solved, showCongrats, showSorry untuk UI state

wp_interactivity_data_wp_context() — Fungsi Ajaib

Cara Penggunaan

<div class="paying-attention-front-end"
     data-wp-interactive="create-block"
     style="background-color: <?php echo esc_attr($attributes['bgColor']); ?>"
     <?php echo wp_interactivity_data_wp_context($ourContext); ?>>

Apa yang Dilakukan Fungsi Ini?

Mengkonversi PHP array → data-wp-context attribute dengan format JSON yang benar.

Input PHP:

$ourContext = [
  "solved" => false,
  "showCongrats" => false,
  "correctAnswer" => 2,
  "answers" => [
    ["index" => 0, "text" => "Meow", "correct" => false],
    // ...
  ]
];

Output HTML:

data-wp-context='{"solved":false,"showCongrats":false,"correctAnswer":2,"answers":[{"index":0,"text":"Meow","correct":false},...]}'

Tidak perlu manual encode JSON atau escape characters — WordPress handle semuanya!

PHP foreach + Interactivity API (Blended Approach)

Kode render.php

<ul>
  <?php foreach ($ourContext['answers'] as $answer) { ?>
    <li data-wp-on--click="actions.guessAttempt"
        <?php echo wp_interactivity_data_wp_context($answer); ?>>
      <?php echo esc_html($answer['text']); ?>
    </li>
  <?php } ?>
</ul>

Cara Kerja

1. PHP foreach → loop server-side, buat <li> untuk setiap jawaban
2. wp_interactivity_data_wp_context($answer) → setiap <li> punya context lokal berisi {index, text, correct}
3. data-wp-on--click → tetap pakai Interactivity API untuk interaktivitas
4. Context merging → saat klik <li>, context-nya berisi data lokal DAN data parent (correctAnswer, solved, dll.)

Inspect di Browser

Klik salah satu jawaban → DevTools Console:

// Klik "Meow"
{ index: 0, text: "Meow", correct: false, solved: false, correctAnswer: 2, ... }

// Klik "Bark" 
{ index: 2, text: "Bark", correct: true, solved: false, correctAnswer: 2, ... }

Evaluasi Jawaban di view.js

store("create-block", {
  actions: {
    guessAttempt: () => {
      const context = getContext();
      
      // Bandingkan index jawaban yang diklik dengan correctAnswer
      console.log(context.index === context.correctAnswer);
      // Klik Meow (0) → false
      // Klik Bark (2) → true
    },
  },
});

Perbandingan Pendekatan

Aspek	template data-wp-each	PHP foreach + directives
Rendering	Client-side looping	Server-side looping
Reaktivitas	List bisa berubah (add/remove)	List statis
CSS class management	Ada bug di direct child (April 2024)	Tidak ada masalah
SEO	Pre-rendered oleh WP	Pre-rendered oleh PHP
Gunakan untuk	To-do list, chat, dynamic lists	Quiz answers, navigation, static lists

Ringkasan

1. Buat custom context array di PHP — kontrol exact bentuk data
2. Gunakan wp_interactivity_data_wp_context() untuk convert PHP → JS context
3. Blend PHP foreach + Interactivity API directives — pendekatan paling stabil untuk data statis
4. Context merging tetap bekerja — child <li> bisa akses parent <div> context
5. Setiap jawaban punya index, text, dan correct — siap untuk logika benar/salah