Membuat Block Interaktif dengan @wordpress/create-block

Scaffolding Plugin Baru

Perintah CLI

# Arahkan terminal ke folder plugins
cd /path/to/wp-content/plugins

# Buat plugin baru dengan interactive template
npx @wordpress/create-block@latest interactivity-quiz --template @wordpress/create-block/interactive-template

Apa yang Di-generate:

interactivity-quiz/
├── build/           ← Output hasil compile
├── node_modules/    ← Dependencies (otomatis npm install)
├── src/
│   ├── block.json   ← Metadata block
│   ├── edit.js      ← Admin editor component
│   ├── editor.scss  ← CSS khusus admin
│   ├── index.js     ← Entry point
│   ├── render.php   ← Front-end output (Interactivity API)
│   ├── style.css    ← CSS untuk admin + front-end
│   └── view.js      ← Client-side JS (Interactivity API store)
└── package.json

Aktivasi

Setelah scaffold selesai → refresh halaman Plugins di WP Admin → Activate plugin baru.

Migrasi Admin Editor dari Plugin Lama

Langkah 1: Import Components

Dari plugin lama (are-you-paying-attention/src/index.js), copy 3 baris import ke src/edit.js:

// Komponen WordPress
import { TextControl, Flex, FlexBlock, FlexItem, Button, Icon, PanelBody, PanelRow, ColorPicker } from "@wordpress/components"
import { InspectorControls, BlockControls, AlignmentToolbar, useBlockProps } from "@wordpress/block-editor"
import { ChromePicker } from "react-color"

Langkah 2: Install react-color

npm install react-color

Langkah 3: Migrasi JSX

Copy return (...) beserta seluruh JSX dari edit() di plugin lama ke edit.js baru — replace JSX boilerplate "Hello from the editor".

Langkah 4: Fix Props Destructuring

// Boilerplate baru menggunakan destructuring:
export default function Edit({ attributes, setAttributes }) { ... }

// Ubah menjadi props langsung agar compatible dengan kode lama:
export default function Edit(props) { ... }

Langkah 5: Copy Functions

Copy semua fungsi handler (updateQuestion, deleteAnswer, markAsCorrect, dll.) dari plugin lama ke posisi di atas return di edit.js.

Setup Attributes di block.json

Error: map is not a function

Saat pertama kali load, error karena answers undefined — belum ada di block.json.

Solusi: Tambahkan Attributes

{
  "apiVersion": 3,
  "name": "create-block/interactivity-quiz",
  "attributes": {
    "question": {
      "type": "string"
    },
    "answers": {
      "type": "array",
      "default": []
    },
    "correctAnswer": {
      "type": "string",
      "default": ""
    },
    "bgColor": {
      "type": "string",
      "default": "#EBEBEB"
    }
  }
}

Penting: Di JSON semua key harus pakai double quotes ("key"), bukan tanpa quotes seperti di JS. Nilai undefined tidak valid di JSON — ganti dengan "".

useBlockProps untuk API Version 3

Masalah: Block tidak bisa di-select di editor

Block tidak ter-highlight dengan border biru saat diklik.

Solusi: Wrapper div dengan {...blockProps}

export default function Edit(props) {
  const blockProps = useBlockProps();

  return (
    <div {...blockProps}>
      {/* existing JSX */}
      <div>
        {/* question, answers, controls, dsb. */}
      </div>
    </div>
  );
}

useBlockProps() otomatis menambahkan class dan event handler yang dibutuhkan WordPress untuk mengenali block di editor.

Cleanup CSS Boilerplate

styles.css

Hapus padding dan background-color bawaan dari boilerplate — tidak diperlukan.

editor.scss

Hapus CSS bawaan boilerplate, lalu paste CSS dari plugin lama (index.css).

Tambahkan:

/* Margin bawah block di editor */
.paying-attention-front-end {
  margin-bottom: 20px;
}

Dependency dash-icons (Bug WP 6.5)

Jika icon tidak muncul, di block.json:

{
  "editorStyle": ["file:./index.css", "dashicons"]
}

Bug ini sudah diperbaiki di WP 6.5.2+, tapi berguna untuk diketahui.

Hasil Akhir

• Admin editor berfungsi: bisa input pertanyaan, tambah jawaban, pilih jawaban benar, ubah warna background
• Data tersimpan dengan benar (question, answers, correctAnswer, bgColor)
• Front-end masih boilerplate — akan dibangun dengan Interactivity API di lesson berikutnya

Alur Kerja

npm start       ← Jalankan watch mode
                 ← Edit file di src/
                 ← Otomatis rebuild ke build/
                 ← Refresh browser untuk lihat perubahan