theme json

Membedah theme.json dan Era Full Site Editing (FSE)

Jika Anda terbiasa dengan tema klasik (Classic Themes), file seperti functions.php (untuk add_theme_support), style.css, dan Customizer API adalah senjata utama Anda. Namun di era WordPress modern (Block Themes), “otak” dari desain situs Anda kini berpindah ke satu file bernama theme.json.

File ini bukan sekadar konfigurasi; ia adalah mesin yang men-generate CSS, mengontrol antarmuka editor (Gutenberg), dan membatasi apa yang bisa (dan tidak bisa) dilakukan oleh klien.

Mari kita bedah strukturnya.

1. Filosofi: Settings vs Styles

Struktur theme.json dibagi menjadi dua pilar utama yang sering membingungkan pemula:

  1. settings: Mengatur kontrol UI yang tersedia di Editor. (Contoh: “Apakah user boleh memilih warna custom?”, “Font apa saja yang muncul di dropdown?”).

  2. styles: Mengatur tampilan default situs. (Contoh: “Apa warna background body?”, “Berapa padding default tombol?”).

2. Mengontrol Palet Warna (The CSS Variable Engine)

Salah satu fitur terkuat theme.json adalah kemampuannya mengubah definisi JSON menjadi CSS Custom Properties (Variables) secara otomatis.

Kode di theme.json:

JSON
 
{
    "version": 2,
    "settings": {
        "color": {
            "palette": [
                {
                    "slug": "primary",
                    "color": "#0073AA",
                    "name": "Primary Blue"
                },
                {
                    "slug": "dosa-merah",
                    "color": "#FF0000",
                    "name": "Danger"
                }
            ]
        }
    }
}

Apa yang terjadi di Frontend:

WordPress akan otomatis menyuntikkan CSS berikut di <body>:

CSS
 
body {
    --wp--preset--color--primary: #0073AA;
    --wp--preset--color--dosa-merah: #FF0000;
}

Artinya, Anda bisa menggunakan variabel ini di file CSS kustom Anda tanpa perlu mendeklarasikannya ulang.

3. “Client-Proofing”: Mengunci Desain

Developer sering frustrasi ketika klien mengubah warna font menjadi hijau neon atau merusak layout dengan margin aneh. theme.json adalah solusi lock-down terbaik.

Mematikan Warna Custom

Jika Anda ingin klien HANYA memilih warna dari palet yang sudah Anda tentukan di atas, matikan fitur color picker:

JSON
 
"settings": {
    "color": {
        "custom": false, 
        "palette": [ ... ] 
    }
}

Mengontrol Layout Container

Lupakan pembungkus .container manual di setiap file PHP. Tentukan lebar konten global di sini:

JSON
 
"settings": {
    "layout": {
        "contentSize": "800px",
        "wideSize": "1200px"
    }
}

Ini memastikan semua blok group atau cover mengikuti aturan lebar yang konsisten.

4. Styling Elemen Spesifik (Tanpa CSS File)

Anda bisa menargetkan elemen HTML atau Blok WordPress spesifik langsung dari JSON. Ini mengurangi ketergantungan pada file style.css yang membengkak.

Contoh: Mengubah Default Tombol (Button Block)

JSON
 
"styles": {
    "blocks": {
        "core/button": {
            "border": {
                "radius": "0px"
            },
            "color": {
                "background": "var(--wp--preset--color--primary)",
                "text": "#ffffff"
            },
            "typography": {
                "fontWeight": "700"
            }
        }
    }
}

Dengan kode di atas, semua tombol di situs otomatis akan kotak (radius 0), tebal, dan berwarna biru, tanpa menulis satu baris CSS pun.

5. Template Parts & Global Styles

Di tema FSE, header.php dan footer.php sudah tidak ada. Gantinya adalah file HTML statis di folder parts/. Namun, theme.json bertugas mendaftarkannya agar dikenali editor.

JSON
 
"templateParts": [
    {
        "area": "header",
        "name": "header-sticky",
        "title": "Header Sticky"
    },
    {
        "area": "footer",
        "name": "footer-minimal",
        "title": "Footer Minimalis"
    }
]

Kapan Menggunakan CSS vs JSON?

Transisi ke FSE tidak berarti Anda dilarang menggunakan CSS.

  • Gunakan theme.json untuk: Tipografi global, palet warna, layout dasar, dan style default blok core.

  • Gunakan CSS biasa untuk: Animasi (@keyframes), Pseudo-elements (:before/:after), dan query media yang kompleks (meskipun theme.json mulai mendukung ini perlahan).

Menguasai theme.json membuat tema Anda lebih ringan, lebih cepat (karena CSS di-load inline atau efisien), dan lebih aman dari “tangan jahil” klien.