Landing page modular terdengar sederhana sampai editor mulai meminta susunan section yang berbeda-beda untuk setiap campaign. Di titik itu, field statis akan cepat terasa kaku dan duplikasi layout mulai muncul.
Payload blocks memberi titik temu yang bagus antara fleksibilitas konten dan disiplin komponen. Editor bebas menyusun section, sementara frontend tetap bekerja dengan daftar block yang terdefinisi dengan jelas.
Susun library block dari pola yang nyata
Saya biasanya memulai dengan memetakan section yang benar-benar sering muncul: hero, feature grid, testimonial, CTA, dan FAQ. Dari sana baru ditentukan field minimum yang dibutuhkan setiap block.
Pendekatan ini mencegah block menjadi terlalu generik. Kalau semua block bisa melakukan segalanya, editor justru kebingungan dan frontend makin sulit dijaga.
Tentukan batas tiap block
- Hero fokus ke pesan utama dan action.
- Feature grid fokus ke daftar benefit.
- CTA fokus ke satu tujuan akhir yang jelas.
Gunakan mapper render yang tegas
Di sisi frontend, setiap block saya render lewat mapper yang eksplisit. Artinya jenis block tertentu hanya punya satu komponen yang bertanggung jawab terhadap tampilan dan fallback-nya.
Cara ini sangat membantu saat ingin memperbarui style global atau menambahkan analytics per section karena titik ubahnya jelas.
const blockComponents = {
hero: HeroBlock,
featureGrid: FeatureGridBlock,
testimonials: TestimonialsBlock,
}Jangan abaikan pengalaman editor
Kualitas pengalaman editor sering ditentukan oleh detail kecil seperti label field, grouping, dan preview yang masuk akal. Walaupun bukan bagian visual publik, hal ini menentukan seberapa cepat tim konten bisa bekerja.
Dynamic blocks akan terasa modern kalau fleksibel, tetapi tetap membimbing. Bukan bebas tanpa batas.