Ikhtisar Chapter 27: Block Themes & Full Site Editing (FSE)

Apa yang Dipelajari?

Cara membuat block theme dari nol untuk WordPress Full Site Editing — termasuk custom blocks (banner, heading, button, slideshow), konfigurasi theme.json, PHP render callback, dan pengelolaan template seluruh situs.

---

Poin Utama

1. Apa Itu Block Theme & FSE?

Block theme memungkinkan pengguna mengedit seluruh website (header, footer, template) lewat block editor — bukan hanya konten post/page.

Struktur minimum:

fictional-block-theme/
├── style.css         ← Nama theme
├── index.php         ← Kosong (wajib ada)
├── theme.json        ← Konfigurasi (minimal {} kosong)
└── templates/
    └── index.html    ← Template utama (HTML, bukan PHP!)

Template menggunakan block comments (<!-- wp:paragraph -->) bukan HTML biasa. Penamaan sama seperti classic theme: single.html, page.html, archive.html, dll.

---

2. Custom Banner Block (JSX)

Banner block dibangun pakai JSX di dalam theme (bukan plugin):

Teknik	Keterangan
JSX	className bukan class, style pakai object {{}}
Build tools	@wordpress/scripts → npm run start untuk watch mode
functions.php	wp_register_script() + register_block_type()
Entry points	Setiap block baru ditambah di package.json scripts

---

3. InnerBlocks & Class JSXBlock

InnerBlocks memungkinkan block menyarangkan block lain di dalamnya:

• <InnerBlocks allowedBlocks={[...]}/> → di editor
• <InnerBlocks.Content /> → di save component

JSXBlock: class PHP reusable agar tidak menulis kode registrasi berulang:

new JSXBlock("banner");
new JSXBlock("genericHeading");
new JSXBlock("genericButton");

---

4. theme.json — Konfigurasi Sentral

Fitur	Contoh
Layout	contentSize: "800px"
Palet warna	Array {slug, color, name} → otomatis jadi CSS variable var(--wp--preset--color--slug)
Style block core	Atur warna default core/button dll.
Full-width support	supports: { align: ["full"] } di block

---

5. Link Picker, Color Picker & Sidebar

Komponen	Lokasi	Fungsi
LinkControl	Toolbar (Popover)	Cari halaman/post atau input URL manual
ColorPalette	Sidebar (InspectorControls)	Pilih warna dari palet theme
getColorObjectByColorValue	—	Simpan nama warna (bukan hex) agar fleksibel

Hierarki sidebar: InspectorControls → PanelBody → PanelRow → ColorPalette

---

6. PHP Render Callback

Masalah: jika HTML di SaveComponent berubah, semua post lama rusak ("Attempt Block Recovery").

Solusi: database hanya simpan attributes, HTML dirender PHP setiap page load:

function ourRenderCallback($attributes, $content) {
    ob_start();
    require get_theme_file_path("/our-blocks/{$this->name}.php");
    return ob_get_clean();
}

Data dari PHP ke JS: wp_localize_script() untuk kirim path gambar, URL, dll.

---

7. Background Image Upload

Gambar dipilih lewat MediaUpload di sidebar editor:

• onSelect → simpan media.id (bukan URL)
• useEffect + apiFetch → fetch URL ukuran custom (page_banner) dari REST API
• MediaUploadCheck → pastikan user punya izin upload

---

8. PlaceholderBlock & Slideshow

PlaceholderBlock: block sederhana tanpa JSX/build step — hanya wp.element.createElement() + 100% PHP render. Cocok untuk block statis (header, footer, events listing).

Slideshow: arsitektur 3 layer nesting:

Slideshow → Slide (= banner copy) → Heading + Button

Menggunakan library Glide.js untuk animasi slide.

---

9. Templates & Konten Dinamis

• Layout dibangun di FSE editor → tersimpan di database
• Copy kode ke file .html di templates/ sebagai default
• Attribute themeimage → referensi gambar dari folder theme (bukan media upload)
• User bisa "Clear customizations" untuk kembali ke template file

---

10. Block Restrictions & Blank Template

Filter allowed_block_types_all membatasi block mana yang boleh dipakai:

• Di FSE: hanya custom blocks
• Di page/post editor: semua block atau per post type

Blank template (emptycanvas.html): hanya <!-- wp:post-content /--> — tanpa header/footer, cocok untuk landing page.

---

Satu Kalimat

Chapter ini membangun block theme lengkap dari nol untuk Full Site Editing — mencakup custom blocks (banner, heading, button, slideshow), konfigurasi theme.json, PHP render callback, dan pengelolaan template seluruh website.