Rendering HTML dengan Interactivity API

Membangun Front-End Quiz

Struktur HTML Dasar

<!-- src/render.php -->
<?php ?>
<div class="paying-attention-front-end"
     data-wp-interactive="create-block"
     style="background-color: <?php echo esc_attr($attributes['bgColor']); ?>">
  
  <p><?php echo esc_html($attributes['question']); ?></p>
  
  <ul>
    <li>Answer 1</li>
    <li>Answer 2</li>
    <li>Answer 3</li>
  </ul>
</div>

CSS Setup

Copy CSS dari plugin lama (front-end.css) ke src/style.css:

.paying-attention-front-end {
  padding: 20px;
  border-radius: 5px;
}
.paying-attention-front-end ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.paying-attention-front-end li {
  padding: 10px;
  margin-bottom: 5px;
  cursor: pointer;
  /* dll. */
}

Output Data PHP (Tanpa Interactivity API)

Menampilkan Pertanyaan

<p><?php echo esc_html($attributes['question']); ?></p>

Debugging: Lihat Isi $attributes

<?php print_r($attributes); ?>

Output:

Array (
  [question] => What sound does a dog make?
  [answers] => Array (
    [0] => Meow
    [1] => Oink
    [2] => Bark
  )
  [correctAnswer] => 2
  [bgColor] => #d4edda
)

Background Color Dinamis

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

Looping dengan template + data-wp-each

Metode Interactivity API

<ul>
  <template data-wp-each="context.answers">
    <li data-wp-text="context.item"
        data-wp-on--click="actions.guessAttempt"></li>
  </template>
</ul>

Cara kerja:

• data-wp-each="context.answers" → loop array answers dari context
• context.item → item saat ini dalam loop
• WordPress otomatis membuat <li> untuk setiap item

Server-Side Pre-rendering

View page source menunjukkan list items sudah ada di HTML mentah:

<ul>
  <template data-wp-each="context.answers">
    <li data-wp-text="context.item">Meow</li>
  </template>
  <!-- WordPress pre-renders: -->
  <li data-wp-text="context.item">Meow</li>
  <li data-wp-text="context.item">Oink</li>
  <li data-wp-text="context.item">Bark</li>
</ul>

Super penting untuk SEO — konten sudah tersedia tanpa JavaScript!

Event Handler pada List Items

Menambahkan Click Handler

<li data-wp-text="context.item"
    data-wp-on--click="actions.guessAttempt"></li>

Action di view.js

store("create-block", {
  actions: {
    guessAttempt: () => {
      const context = getContext();
      console.log(context);
      // { item: "Meow" } atau { item: "Bark" } tergantung yang diklik
    },
  },
});

Context Merging (Penggabungan Context)

Konsep Hierarki DOM

Context di Interactivity API bekerja berdasarkan hierarki DOM — child element bisa mengakses context dari parent, grandparent, dst.

<!-- Grandparent: set context besar -->
<div data-wp-context='{"question":"What sound?", "correctAnswer": 2}'>
  
  <!-- Child: set context lokal -->
  <li data-wp-context='{"skyColor": "blue"}'>
    <!-- Di sini, context.skyColor, context.question, 
         DAN context.correctAnswer semuanya tersedia! -->
  </li>
  
</div>

Bagaimana Merge Bekerja

Grandparent context: { question: "...", answers: [...], correctAnswer: 2 }
     ↓ merge
Child context:       { skyColor: "blue" }
     ↓ hasil
Merged context:      { question: "...", answers: [...], correctAnswer: 2, skyColor: "blue" }

WordPress menggabungkan context dari dalam ke luar — elemen child punya akses ke:

• Context sendiri (lokal)
• Context semua parent di atasnya

Mengapa Ini Berguna?

Dari dalam click handler list item, kita bisa mengakses:

• context.index → index jawaban yang diklik (dari context lokal li)
• context.correctAnswer → jawaban benar (dari context parent div)

Ini memudahkan perbandingan untuk menentukan benar/salah tanpa harus pass data secara eksplisit.

Kapan Gunakan template vs PHP foreach?

Pendekatan	Gunakan Ketika
template data-wp-each	Data akan berubah secara reaktif (tambah/hapus/edit item di runtime)
PHP foreach	Data statis — tidak berubah setelah page load

Lesson berikutnya akan menunjukkan pendekatan PHP foreach blended yang lebih cocok untuk quiz ini.

Ringkasan Directive Baru

Directive	Fungsi
data-wp-each	Loop array dari context/state dalam template
context.item	Akses item saat ini dalam loop data-wp-each