Ikhtisar Chapter 28: block.json & render.php (Pendekatan Modern)

Apa yang Dipelajari?

Cara modern dan resmi WordPress untuk membuat custom blocks menggunakan block.json dan render.php — menggantikan class PHP manual (JSXBlock, PlaceholderBlock) dari chapter sebelumnya. Jauh lebih bersih dan sederhana.

---

Poin Utama

1. Mengapa Pendekatan Modern?

Cara Lama (Chapter 27)	Cara Baru (Chapter 28)
Class PHP manual (JSXBlock, PlaceholderBlock)	block.json = semua metadata di satu file
Entry point manual di package.json	Auto-detection subfolder oleh @wordpress/scripts
wp_register_script + register_block_type	register_block_type_from_metadata() = 1 baris PHP
wp_localize_script per block	Data langsung tersedia

Tiga alasan historis kenapa cara manual dipelajari dulu:

• block.json baru ada pertengahan 2021
• @wordpress/scripts dulu tidak support multiple blocks otomatis
• Interactivity API baru ada April 2024

---

2. Struktur Folder Modern

Setiap block = subfolder di src/ dengan 3 file:

src/
├── footer/
│   ├── block.json      ← Metadata (nama, attributes, supports)
│   ├── render.php      ← HTML untuk front-end
│   └── index.js        ← JavaScript untuk editor
├── banner/
│   ├── block.json
│   ├── render.php
│   ├── edit.js          ← JSX editor (untuk block kompleks)
│   └── index.js
└── genericheading/
    ├── block.json
    └── index.js          ← Tanpa render.php (HTML statis)

@wordpress/scripts otomatis mendeteksi semua subfolder yang punya block.json — tidak perlu konfigurasi apapun.

---

3. File block.json

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "ourblocktheme/banner",
  "title": "Banner",
  "supports": { "align": ["full"] },
  "attributes": {
    "imgID": { "type": "number" },
    "imgURL": { "type": "string" }
  },
  "editorScript": "file:./index.js",
  "render": "file:./render.php"
}

Attributes yang sebelumnya di JavaScript sekarang pindah ke block.json.

---

4. useBlockProps (API Version 3)

Dengan apiVersion: 3, block wajib dibungkus wrapper div agar bisa diklik/diseleksi di editor:

import { useBlockProps } from "@wordpress/block-editor";

export default function Edit() {
  const blockProps = useBlockProps();
  return (
    <div {...blockProps}>
      {/* konten block */}
    </div>
  );
}

Tanpa useBlockProps → block tidak bisa dipilih, tidak ada border biru.

---

5. Registrasi di PHP — Cuma 1 Baris!

function ourNewBlocks() {
  register_block_type_from_metadata(__DIR__ . "/build/footer");
  register_block_type_from_metadata(__DIR__ . "/build/banner");
  // ... dst
}
add_action("init", "ourNewBlocks");

Path menunjuk ke build/ (bukan src/) karena @wordpress/scripts compile dari src/ ke build/.

---

6. Block Tanpa render.php

Block seperti generic heading dan generic button menyimpan HTML statis di database — tidak perlu server-side rendering:

• block.json tanpa property "render"
• Punya save function di JavaScript yang return HTML
• Lebih cepat (tidak ada PHP setiap request), tapi kurang fleksibel

---

7. Proses Migrasi dari Cara Lama

Untuk setiap block:

1. Comment out class lama di functions.php
2. Buat subfolder di src/ dengan block.json, index.js, render.php
3. Pindahkan JSX editor ke edit.js
4. Pindahkan attributes ke block.json
5. Tambahkan useBlockProps wrapper
6. Daftarkan dengan register_block_type_from_metadata()

---

8. Workflow & Build Tasks

npm start         # Watch mode untuk CSS/JS non-block (src/index.js)
npm run blocks    # Watch mode untuk semua blocks (auto-detect block.json)
npm run build     # Build production sekali jalan (index + blocks)

Saat development butuh dua terminal: satu npm start, satu npm run blocks.

Package npm-run-all digunakan untuk menggabungkan build tasks secara sequential.

---

Satu Kalimat

Chapter ini mengajarkan cara modern membuat WordPress blocks menggunakan block.json dan render.php — jauh lebih bersih dari cara manual, dengan auto-detection, 1 baris registrasi PHP, dan workflow build yang rapi.