Setup Multiple Blocks dengan Pendekatan Modern

Gambaran Umum

Pelajaran ini menunjukkan cara setup block pertama (footer) menggunakan pendekatan modern: block.json, render.php, dan auto-detection oleh @wordpress/scripts.

Langkah 1: Duplikasi Theme Folder

1. Buka folder site: App/Public/wp-content/themes/
2. Duplikasi folder fictional-block-theme → rename jadi fictional-clean-blocks
3. Buka folder baru di VS Code
4. Edit style.css — ubah Theme Name menjadi nama baru:

/*
Theme Name: Fictional Clean Blocks
*/

5. Di WP Admin → Appearance → Aktifkan theme baru

Langkah 2: Struktur Folder Modern

Block modern disimpan di folder src/ — setiap block punya subfolder sendiri:

src/
├── footer/
│   ├── block.json      ← Metadata block
│   ├── render.php      ← PHP rendering (front-end)
│   └── index.js        ← JavaScript (editor)
├── header/
│   ├── block.json
│   ├── render.php
│   └── index.js
├── banner/
│   └── ...
└── (block lainnya)

Kenapa src/ folder?

• Package @wordpress/scripts otomatis mendeteksi semua subfolder di src/ yang punya block.json
• Tidak perlu edit konfigurasi apapun — cukup buat folder + file

Langkah 3: Buat Footer Block

3a. Nonaktifkan Block Lama

Di functions.php, comment out placeholder block lama:

// new PlaceholderBlock("footer");

3b. Buat File block.json

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "ourblocktheme/footer",
  "title": "Fictional University Footer",
  "editorScript": "file:./index.js",
  "render": "file:./render.php"
}

Penjelasan properti:

Properti	Fungsi
$schema	Autocomplete & validasi di editor
apiVersion	Versi terbaru = 3
name	Nama unik block (namespace/block-name)
title	Label yang tampil di editor
editorScript	File JS untuk pengalaman editor
render	File PHP untuk rendering front-end

3c. Buat render.php

Copy isi dari file our-blocks/footer.php lama ke src/footer/render.php:

<footer class="site-footer">
  <div class="site-footer__inner container">
    <!-- ... konten footer ... -->
  </div>
</footer>

3d. Buat index.js (Editor)

import { registerBlockType } from "@wordpress/blocks";
import metadata from "./block.json";

function Edit() {
  return <div className="our-placeholder-block">University Footer Placeholder</div>;
}

registerBlockType(metadata.name, {
  edit: Edit,
});

Langkah 4: Daftarkan Block di functions.php

// Register our new blocks
function ourNewBlocks() {
  register_block_type_from_metadata(__DIR__ . "/build/footer");
}
add_action("init", "ourNewBlocks");

Perhatikan: Kita menunjuk ke folder build/ (bukan src/), karena @wordpress/scripts akan compile/transpile file dari src/ ke build/.

Langkah 5: Setup npm Task

Di package.json, tambahkan script baru:

{
  "scripts": {
    "start": "wp-scripts start src/index.js",
    "blocks": "wp-scripts start --experimental-modules"
  }
}

Perbedaan penting:

• npm start → task lama untuk file non-block (CSS, JS umum)
• npm run blocks → task baru, tanpa path = otomatis mendeteksi subfolder src/ yang punya block.json
• Jalankan dua terminal secara bersamaan

# Terminal 1:
npm start

# Terminal 2:
npm run blocks

Langkah 6: Verifikasi

Setelah menjalankan npm run blocks:

1. Cek folder build/ — harus ada subfolder footer/ dengan file-file yang sudah dicompile
2. Refresh front-end → footer tampil
3. Refresh editor → block footer tampil di editor

Alur Kerja Lengkap

1. Buat subfolder di src/ (misal: src/footer/)
2. Buat block.json (metadata)
3. Buat render.php (front-end HTML)
4. Buat index.js (editor experience)
5. Di functions.php: register_block_type_from_metadata(__DIR__ . "/build/footer")
6. Jalankan npm run blocks
7. Done! ✅

Perbandingan Lama vs Baru

❌ Cara Lama:
   functions.php → new PlaceholderBlock("footer")
   → Manual enqueue JS
   → Manual register block type
   → Custom PHP class

✅ Cara Baru:
   block.json = semua metadata
   functions.php → register_block_type_from_metadata(__DIR__ . "/build/footer")
   = Satu baris! Selesai!