Pengenalan JavaScript Plugin Development

Gambaran Umum

Video ini memperkenalkan konsep dasar membuat block types untuk editor Gutenberg menggunakan JavaScript. Kita akan belajar cara mendaftarkan block type pertama dan memahami fungsi createElement().

---

Konsep Dasar: registerBlockType()

Block types didaftarkan menggunakan fungsi WordPress JS:

wp.blocks.registerBlockType('ourplugin/are-you-paying-attention', {
  title: 'Are You Paying Attention?',
  icon: 'smiley',
  category: 'common',
  edit: function() {
    return wp.element.createElement('div', null, 'Hello from the editor!');
  },
  save: function() {
    return wp.element.createElement('div', null, 'Hello from the frontend!');
  }
});

Penjelasan Parameter:

Parameter	Keterangan
Namespace/Name	'ourplugin/are-you-paying-attention' — format wajib namespace/name
title	Nama block yang ditampilkan ke user
icon	Dashicon name (sama dengan icon admin menu)
category	Kategori block (common, formatting, layout, dll.)
edit	Function yang mengembalikan UI untuk editor (admin)
save	Function yang mengembalikan HTML untuk frontend (pengunjung)

---

wp.element.createElement() — 3 Argumen

wp.element.createElement('tag', attributes, children)

#	Argumen	Contoh
1	Element type	'div', 'h3', 'input'
2	Attributes/props	{ className: 'my-class' } atau null
3	Children	String teks atau nested createElement()

Contoh Nested Elements:

wp.element.createElement(
  'div',
  { className: 'wrapper' },
  wp.element.createElement('h3', null, 'Quiz Question'),
  wp.element.createElement('input', { type: 'text' })
);

Ini menghasilkan:

<div class="wrapper">
  <h3>Quiz Question</h3>
  <input type="text">
</div>

---

Memuat JavaScript di WordPress

File PHP Plugin:

class AreYouPayingAttention {
  function __construct() {
    add_action('enqueue_block_editor_assets', array($this, 'adminAssets'));
  }

  function adminAssets() {
    wp_enqueue_script(
      'ournewblocktype',
      plugin_dir_url(__FILE__) . 'our-new-block.js',
      array('wp-blocks', 'wp-element')  // Dependencies
    );
  }
}

new AreYouPayingAttention();

Dependencies Penting:

Dependency	Apa yang Tersedia
wp-blocks	wp.blocks.registerBlockType()
wp-element	wp.element.createElement() (wrapper React)
wp-editor	WordPress editor components

Action Hook:

• enqueue_block_editor_assets — Memuat JS hanya di halaman editor (admin)
• Jangan gunakan wp_enqueue_scripts karena itu akan memuat di frontend juga

---

Masalah dengan createElement()

Menulis UI kompleks dengan createElement() sangat verbose dan sulit dibaca:

// Sulit dibaca:
wp.element.createElement('div', { className: 'wrapper' },
  wp.element.createElement('h3', null, 'Title'),
  wp.element.createElement('p', null, 'Description'),
  wp.element.createElement('input', { type: 'text', onChange: handleChange })
);

// Jauh lebih mudah dengan JSX:
<div className="wrapper">
  <h3>Title</h3>
  <p>Description</p>
  <input type="text" onChange={handleChange} />
</div>

Solusi: Gunakan JSX — akan dipelajari di video selanjutnya.