Konfigurasi theme.json

Apa Itu theme.json?

theme.json adalah file konfigurasi utama untuk block theme. File ini mengontrol:

• Layout & lebar konten
• Palet warna
• Tipografi
• Pengaturan per block
• CSS variables otomatis

---

Struktur Dasar

{
  "version": 2,
  "settings": {},
  "styles": {}
}

---

Layout & Lebar Konten

{
  "version": 2,
  "settings": {
    "layout": {
      "contentSize": "800px"
    }
  }
}

Konteks	Perilaku
Full site editor	Menggunakan full width secara default
Post/page editor	Menggunakan contentSize (800px)

Mengizinkan Full-Width Alignment pada Block

Tambahkan di registerBlockType:

wp.blocks.registerBlockType("ourBlockTheme/banner", {
  title: "Banner",
  supports: {
    align: ["full"]
  },
  attributes: {
    align: { type: "string", default: "full" }
  },
  edit: EditComponent,
  save: SaveComponent
});

---

Palet Warna (Color Palette)

Mendefinisikan Warna

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        {
          "slug": "blue",
          "color": "#0d3b66",
          "name": "Blue"
        },
        {
          "slug": "orange",
          "color": "#f4a259",
          "name": "Orange"
        },
        {
          "slug": "dark-orange",
          "color": "#bc6c25",
          "name": "Dark Orange"
        }
      ]
    }
  }
}

CSS Variables Otomatis

WordPress otomatis membuat CSS custom properties dari setiap warna:

/* Otomatis tersedia di seluruh theme */
var(--wp--preset--color--blue)        /* → #0d3b66 */
var(--wp--preset--color--orange)      /* → #f4a259 */
var(--wp--preset--color--dark-orange) /* → #bc6c25 */

Format: var(--wp--preset--color--{slug})

---

Styling Block Core

Mengatur Warna Default Button

{
  "styles": {
    "blocks": {
      "core/button": {
        "color": {
          "text": "var(--wp--preset--color--blue)",
          "background": "var(--wp--preset--color--orange)"
        }
      }
    }
  }
}

---

Pengaturan Per Block

Menonaktifkan Fitur untuk Block Tertentu

{
  "settings": {
    "blocks": {
      "core/button": {
        "border": {
          "color": false,
          "radius": false,
          "style": false,
          "width": false
        }
      }
    }
  }
}

---

Menonaktifkan Fitur Global

Tipografi

{
  "settings": {
    "typography": {
      "fontSizes": []
    }
  }
}

Mengosongkan fontSizes dengan array kosong menghilangkan pilihan ukuran font bawaan.

Daftar Fitur yang Bisa Dinonaktifkan

Properti	Lokasi di settings
Custom colors	color.custom: false
Default palette	color.defaultPalette: false
Duotone	color.duotone: []
Gradients	color.gradients: []
Custom gradient	color.customGradient: false
Text color	color.text: false
Link color	color.link: false
Font families	typography.fontFamilies: []
Font style	typography.fontStyle: false
Font weight	typography.fontWeight: false

---

Contoh Lengkap theme.json

{
  "version": 2,
  "settings": {
    "layout": {
      "contentSize": "800px"
    },
    "color": {
      "palette": [
        { "slug": "blue", "color": "#0d3b66", "name": "Blue" },
        { "slug": "orange", "color": "#f4a259", "name": "Orange" },
        { "slug": "dark-orange", "color": "#bc6c25", "name": "Dark Orange" }
      ],
      "custom": false,
      "defaultPalette": false,
      "duotone": [],
      "gradients": [],
      "customGradient": false,
      "text": false,
      "link": false
    },
    "typography": {
      "fontSizes": [],
      "fontFamilies": [],
      "fontStyle": false,
      "fontWeight": false
    },
    "blocks": {
      "core/button": {
        "border": {
          "color": false,
          "radius": false,
          "style": false,
          "width": false
        }
      }
    }
  },
  "styles": {
    "blocks": {
      "core/button": {
        "color": {
          "text": "var(--wp--preset--color--blue)",
          "background": "var(--wp--preset--color--orange)"
        }
      }
    }
  }
}

---

Referensi

Dokumentasi lengkap: developer.wordpress.org → theme.json reference

---

Kesimpulan

Fitur	Cara Pengaturan
Lebar konten	settings.layout.contentSize
Palet warna	settings.color.palette → array slug/color/name
CSS variables	Otomatis: var(--wp--preset--color--{slug})
Style per block	styles.blocks["core/button"]
Setting per block	settings.blocks["core/button"]
Nonaktifkan fitur	Set ke false atau array kosong []