Workflow Cleanup: package.json & Build Tasks

Gambaran Umum

Setelah semua block berhasil dimigrasi ke pendekatan modern (src/ folder), saatnya membersihkan package.json dan membuat build command yang rapi.

Langkah 1: Bersihkan Build Folder

Hapus seluruh folder build/ — jangan khawatir, kita selalu bisa membuatnya ulang dengan satu command:

❌ build/
   ├── archive copy/     ← folder sampah dari duplikasi
   ├── banner copy/      ← folder sampah
   └── ...

Langkah 2: Install npm-run-all

npm install npm-run-all

Package ini memungkinkan kita menjalankan beberapa npm scripts secara berurutan (sequential) dari satu command.

Langkah 3: Update package.json Scripts

{
  "scripts": {
    "start": "wp-scripts start src/index.js",
    "blocks": "wp-scripts start --experimental-modules",
    "build": "run-s buildIndex buildBlocks",
    "buildIndex": "wp-scripts build src/index.js",
    "buildBlocks": "wp-scripts build --experimental-modules",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "@wordpress/scripts": "...",
    "npm-run-all": "..."
  }
}

Penjelasan Setiap Script

Script	Command	Fungsi
start	wp-scripts start src/index.js	Watch mode untuk CSS/JS non-block (dari src/index.js)
blocks	wp-scripts start --experimental-modules	Watch mode untuk semua blocks (auto-detect block.json di src/)
build	run-s buildIndex buildBlocks	Build sekali jalan (sequential): index dulu, lalu blocks
buildIndex	wp-scripts build src/index.js	Build satu kali untuk CSS/JS non-block
buildBlocks	wp-scripts build --experimental-modules	Build satu kali untuk semua blocks

Perbedaan start vs blocks vs build

npm start       → Watch mode, HANYA src/index.js (CSS, JS umum, Sass)
npm run blocks  → Watch mode, OTOMATIS deteksi semua block.json di src/
npm run build   → Sekali jalan, build semua (index + blocks)

Langkah 4: Cara Penggunaan

Saat Development (Watch Mode)

Butuh dua terminal terpisah:

# Terminal 1:
npm start

# Terminal 2:
npm run blocks

Catatan: Penulis sudah mencoba 10+ cara untuk menggabungkan kedua task ini jadi satu command (termasuk npm-run-all untuk watch mode), tapi belum menemukan solusi yang bekerja sempurna. Jadi untuk saat ini, dua terminal adalah pendekatan terbaik.

Saat Build untuk Production

Cukup satu command:

npm run build

Ini akan:

1. Build src/index.js (CSS/JS non-block)
2. Build semua block folders (auto-detect block.json)
3. Semua output masuk ke folder build/

Langkah 5: Verifikasi Build Folder

Setelah npm run build, folder build/ harus berisi:

build/
├── index.js          ← dari src/index.js
├── index.css         ← compiled CSS
├── style-index.css   ← style
├── footer/           ← block: footer
│   ├── block.json
│   ├── index.js
│   └── render.php
├── header/           ← block: header
│   ├── block.json
│   ├── index.js
│   └── render.php
├── banner/           ← block: banner
│   ├── block.json
│   ├── index.js
│   └── render.php
├── slide/
├── slideshow/
├── genericheading/
├── genericbutton/
├── eventsandblogs/
├── search/
└── (block lainnya)/

Apa yang Bisa Dihapus

Setelah semua migrasi selesai:

✗ Hapus folder our-blocks/ (semua block sudah di src/)
✗ Hapus class PlaceholderBlock dari functions.php
✗ Hapus class JSXBlock dari functions.php
✗ Hapus script "devfast" dari package.json (jika ada, dari era lama)
✗ Hapus entry point manual di script "start" (banner, heading, dll)

Ringkasan Chapter 28

Konsep	Keterangan
block.json	Semua metadata block: name, title, attributes, supports, file references
render.php	File PHP terpisah untuk server-side rendering (opsional)
edit.js	Komponen React untuk pengalaman editor
index.js	Registrasi block + save function
useBlockProps	Wrapper div wajib untuk API Version 3
register_block_type_from_metadata()	Satu baris PHP untuk mendaftarkan block
wp_localize_script	Menyediakan data PHP (theme path) ke JavaScript
@wordpress/scripts auto-detection	Otomatis mendeteksi block.json di subfolder src/
npm-run-all + run-s	Menjalankan build tasks secara sequential

Alur Kerja Modern (Final)

Development:
  Terminal 1: npm start          (watch CSS/JS umum)
  Terminal 2: npm run blocks     (watch block files)

Production Build:
  npm run build                  (build semua sekaligus)

Mendaftarkan Block:
  functions.php → register_block_type_from_metadata(__DIR__ . "/build/nama-block")

Menambah Block Baru:
  1. Buat folder src/nama-block/
  2. Buat block.json, index.js, edit.js, [render.php]
  3. Tambah register_block_type_from_metadata() di functions.php
  4. Selesai! ✅

Tools 100% Resmi WordPress — tidak ada boilerplate custom!