Custom Banner Block dengan JSX

Konsep: Block di Theme vs Plugin

• Block di plugin — cocok untuk distribusi luas, bisa dipakai di theme manapun
• Block di theme — cocok untuk proyek klien spesifik (bespoke client theme)

Dalam chapter ini, kita membuat block di dalam theme karena block-block ini didesain khusus untuk theme kita.

---

Struktur Folder

fictional-block-theme/
├── our-blocks/
│   └── banner.js       ← Source JSX
├── build/
│   └── banner.js       ← Output transpiled
├── src/
│   └── index.js        ← Entry point utama (CSS dll)
├── package.json
└── functions.php

---

Membuat Banner Block (banner.js)

Registrasi Block Dasar

wp.blocks.registerBlockType("ourBlockTheme/banner", {
  title: "Banner",
  edit: EditComponent,
  save: SaveComponent
});

function EditComponent() {
  return (
    <div className="page-banner">
      <div className="page-banner__bg-image"
           style={{backgroundImage: "url('/images/library-hero.jpg')"}}>
      </div>
      <div className="page-banner__content container">
        <h1 className="page-banner__title">Welcome</h1>
        <div className="page-banner__intro">
          <p>Some intro text here</p>
        </div>
      </div>
    </div>
  );
}

function SaveComponent() {
  return (
    <div className="page-banner">
      {/* ... sama seperti edit */}
    </div>
  );
}

Perbedaan JSX vs HTML

HTML	JSX
class="page-banner"	className="page-banner"
style="background-image: url(...)"	style={{backgroundImage: "url(...)"}}
for="inputId"	htmlFor="inputId"

Penting: Di JSX, class menjadi className dan inline style menggunakan object dengan properti camelCase.

---

Setup Build Tools (package.json)

Konfigurasi package.json

{
  "scripts": {
    "start": "wp-scripts start src/index.js our-blocks/banner.js",
    "build": "wp-scripts build src/index.js our-blocks/banner.js"
  },
  "devDependencies": {
    "@wordpress/scripts": "^26.0.0"
  }
}

Setiap file JS baru yang dibuat perlu ditambahkan ke script start dan build sebagai entry point terpisah.

Menjalankan Build

npm install
npm run start    # Development (watch mode)
npm run build    # Production

---

Registrasi Block di functions.php

// Di functions.php

// Mendaftarkan script block
wp_register_script(
    'banner',
    get_stylesheet_directory_uri() . '/build/banner.js',
    array('wp-blocks', 'wp-editor')
);

// Mendaftarkan block type
register_block_type('ourBlockTheme/banner', array(
    'editor_script' => 'banner'
));

---

Menambahkan Editor Styles

Agar tampilan block di editor sama dengan frontend:

// Di functions.php
add_theme_support('editor-styles');

add_editor_style(array(
    'build/style-index.css',    // CSS utama
    'build/index.css',          // CSS tambahan
    'https://fonts.googleapis.com/css?family=...'  // Google Fonts URL
));

Penjelasan

Fungsi	Tujuan
add_theme_support('editor-styles')	Mengaktifkan dukungan editor styles
add_editor_style()	Memuat CSS ke dalam block editor

Dengan ini, block yang muncul di editor akan memiliki styling yang sama seperti di frontend.

---

Alur Kerja Lengkap

1. Buat file .js di our-blocks/
2. Tulis JSX (registerBlockType, EditComponent, SaveComponent)
3. Tambahkan entry point di package.json
4. Daftarkan di functions.php (wp_register_script + register_block_type)
5. npm run start → build otomatis ke folder build/
6. Block muncul di editor Gutenberg

---

Kesimpulan

Langkah	Detail
Buat .js	wp.blocks.registerBlockType() dengan edit & save
Konversi HTML → JSX	className, style object, camelCase
package.json	Tambahkan setiap .js sebagai entry point
functions.php	wp_register_script + register_block_type
Editor styles	add_theme_support('editor-styles') + add_editor_style()