Ikhtisar Chapter 23: Plugin Development (Blocks / JSX)

Apa yang Dipelajari?

Membangun custom block type Gutenberg dari nol — mulai dari createElement(), setup JSX dengan @wordpress/scripts, hingga konsep dynamic blocks yang di-render PHP.

Poin Utama

1. Mendaftarkan Block Type

wp.blocks.registerBlockType('namespace/name', {
  title, icon, category, attributes, edit, save
})

Properti	Fungsi
edit	UI yang tampil di editor (admin)
save	HTML yang disimpan ke database (static) atau return null (dynamic)

2. createElement() vs JSX

Pendekatan	Contoh
createElement	wp.element.createElement('div', null, 'Hello') — verbose
JSX	<div>Hello</div> — mudah dibaca, perlu build step

Setup JSX: npm init -y → npm install @wordpress/scripts --save-dev → tulis di src/index.js → build ke build/index.js.

3. Aturan JSX

• Satu root element (atau gunakan Fragment <>...</>)
• className bukan class
• Self-closing tags: <input />, <br />
• Dynamic values: {variable}

4. Static vs Dynamic Blocks

Aspek	Static	Dynamic
save()	Return HTML	Return null
Render	HTML tersimpan di DB	PHP render_callback
Update struktur	Perlu deprecated + re-save tiap post	Cukup ubah PHP, otomatis berlaku

Dynamic block lebih direkomendasikan — tidak perlu pusing soal backward compatibility.

5. Attributes & Props

• Attributes didefinisikan di registerBlockType (type, default)
• Data disimpan sebagai JSON di HTML comment: <!-- wp:... {"key":"val"} -->
• Akses via props.attributes, update via props.setAttributes()
• Jangan mutasi langsung — selalu buat copy array/object

6. Dependency Script

Dependency	Memberikan
wp-blocks	registerBlockType()
wp-element	createElement() / React wrapper
wp-editor	WordPress editor components

Satu Kalimat

Block type Gutenberg dibuat dengan registerBlockType(), ditulis dalam JSX yang di-compile @wordpress/scripts, dan sebaiknya gunakan dynamic block (save: null + PHP render) agar bebas masalah versi.