Wordpress Theme JSON Block Theme Settings Styles Variations Global Styles

Definisi

theme.json adalah file konfigurasi terpusat untuk block theme (Full Site Editing). Ia mendefinisikan settings (fitur diizinkan: warna, font, spacing), styles (nilai default global), dan variations (preset gaya). Menggantikan banyak kode PHP untuk menghias theme.

Kapan dipakai

Pakai saat membuat block theme (FSE) modern. Untuk theme klasik, theme.json tetap berguna untuk settings global tapi tidak untuk template editing penuh. Hindari mengubah style via PHP wp_head bila bisa di theme.json.

Cara kerja

Struktur dasar

json

{
  "version": 2,
  "settings": {
    "color": { "palette": [{ "slug": "brand", "color": "#0a7", "name": "Brand" }] },
    "typography": { "fontSizes": [{ "slug": "lg", "size": "1.5rem", "name": "Large" }] }
  },
  "styles": {
    "blocks": { "core/paragraph": { "typography": { "fontSize": "var(--wp--preset--font-size--lg)" } } }
  }
}

Variation

json

{ "slug": "dark", "title": "Dark", "styles": { "color": { "background": "#111", "text": "#eee" } } }

Struktur alur

Catatan implementasi

• version: 2 (atau terbaru) mengaktifkan fitur FSE penuh; cek kompatibilitas WP.
• Preset warna/font terpapar sebagai CSS variables --wp--preset--*, bisa dipakai di block styles.
• settings.appearanceTools: true membuka banyak kontrol UI untuk user.
• Child theme bisa override theme.json parent dengan merge parsial.

Kesalahan umum

• Hardcode warna di CSS: sebaiknya pakai preset agar user bisa ganti di editor.
• Menyisipkan style via PHP: duplikasi; taruh di styles.
• Variation tanpa slug unik: bentrok antar preset.
• Lupa version: fitur tak muncul kalau versi salah.

Referensi terkait

• WordPress Theme Hierarchy, Template Files, Loop, Enqueue
• WordPress Block Patterns dan Options API
• CSS Color, Contrast, dan prefers-color-scheme