Pengenalan Full Site Editing (FSE) & Membuat Block Theme

Catatan Penting tentang Best Practice 2024

Sebelum memulai chapter ini, perlu diketahui bahwa WordPress terus berkembang. Di chapter berikutnya (Chapter 28-29) akan dibahas pendekatan lebih modern menggunakan:

• block.json — file metadata untuk block
• render.php — file render terpisah
• Interactivity API — API baru untuk interaktivitas

Chapter ini tetap penting karena memahami fondasi dasar cara kerja block theme.

---

Apa Itu Full Site Editing (FSE)?

FSE adalah fitur WordPress yang memungkinkan pengguna mengedit seluruh bagian website melalui block editor, termasuk:

Fitur	Penjelasan
Edit homepage	Mengubah layout dan konten halaman utama
Rearrange content	Mengatur ulang posisi elemen
Edit single post template	Mengubah tampilan post individual
Custom landing page	Membuat halaman landing kustom
Clear customizations	Mengembalikan ke template default theme

Penting: File theme.json

Bahkan file theme.json kosong ({}) harus ada agar editor FSE berfungsi dengan benar.

---

Membuat Block Theme dari Nol

Struktur Minimum Block Theme

fictional-block-theme/
├── style.css          ← Theme metadata
├── index.php          ← File kosong (wajib ada)
├── theme.json         ← Konfigurasi theme (minimal {} kosong)
└── templates/
    └── index.html     ← Template utama

1. File style.css

/*
Theme Name: Fictional Block Theme
*/

2. File index.php

File ini kosong — hanya perlu ada sebagai persyaratan WordPress.

3. Folder templates/ dan index.html

File template menggunakan format HTML (index.html bukan index.php).

---

Sintaks Block Comments

Konten di block theme bukan HTML biasa, tapi menggunakan block comments:

<!-- wp:paragraph -->
<p>Ini adalah paragraf.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Ini Heading</h2>
<!-- /wp:heading -->

Penting: Konten harus dalam format block comments, BUKAN raw HTML biasa.

---

Workflow Database-to-File

Ketika pengguna mengedit template melalui FSE:

1. Perubahan disimpan di database (wp_posts table), bukan langsung di file
2. Template yang sudah dikustomisasi ditandai dengan ikon biru di daftar template
3. Pengguna bisa "Clear customizations" untuk mengembalikan ke versi file di hard drive
4. Untuk mendapatkan kode template: bisa export zip dari editor, atau copy dari database

Cara Export Template

• Dari full site editor → klik tiga titik (...) → pilih Export
• Atau langsung buka tabel wp_posts di database → cari entry template terbaru

---

Sistem Penamaan Template

Sama seperti traditional theme, hanya ekstensinya .html:

Traditional Theme	Block Theme	Fungsi
single.php	single.html	Single blog post
page.php	page.html	Single page
archive.php	archive.html	Archive listing
single-{posttype}.php	single-{posttype}.html	Single custom post type
front-page.php	front-page.html	Halaman depan
index.php	index.html	Fallback template

---

Dynamic Content di Block Theme

Block Bawaan WordPress untuk Konten Dinamis

WordPress menyediakan block bawaan seperti:

• Post Title — menampilkan judul post
• Post Content — menampilkan konten post
• Query Loop — menampilkan daftar post

Keterbatasan Query Loop Block

Query Loop block terbatas — hanya bisa filter berdasarkan:

• Post type
• Category

Tidak bisa melakukan:

• meta_query (query berdasarkan custom field)
• Query relasi yang kompleks
• Filter lanjutan lainnya

PHP Tetap Penting!

Di balik layar, block bawaan WordPress seperti Post Title tetap menggunakan PHP:

// Contoh: core block post-title.php secara internal memanggil
get_the_title()

Untuk kebutuhan yang lebih kompleks, kita harus membuat custom block sendiri.

---

Strategi: Memecah Desain Menjadi Block

Langkah membangun block theme:

1. Analisis desain — identifikasi bagian-bagian yang bisa dijadikan block
2. Mulai dari yang paling kompleks — seperti banner block
3. Buat block yang reusable — heading, button, dll.
4. Gunakan PHP render callback — untuk HTML yang kompleks
5. Gunakan placeholder block — untuk konten yang tidak perlu interaksi editor

---

Kesimpulan

Konsep	Penjelasan
FSE	Edit seluruh website via block editor
Block Theme	Theme berbasis HTML template + block comments
theme.json	File konfigurasi wajib (minimal kosong)
Database-to-file	Editan di DB, revert ke file template
Template naming	Sama seperti PHP theme, tapi .html
Query Loop	Terbatas — custom block diperlukan untuk query kompleks