Color Picker & InspectorControls

Konsep InspectorControls

InspectorControls menambahkan panel pengaturan di sidebar kanan editor (bukan di toolbar atas block). Cocok untuk opsi yang tidak perlu selalu terlihat.

---

Import yang Diperlukan

import { InspectorControls } from "@wordpress/block-editor";
import { PanelBody, PanelRow, ColorPalette } from "@wordpress/components";
import { getColorObjectByColorValue } from "@wordpress/block-editor";

---

Implementasi Color Picker

Definisi Warna

Buat file terpisah inc/ourColors.js:

// inc/ourColors.js
const ourColors = [
  { name: "Blue", color: "#0d3b66" },
  { name: "Orange", color: "#f4a259" },
  { name: "Dark Orange", color: "#bc6c25" }
];

export default ourColors;

Import di Block File

import ourColors from "../inc/ourColors";

Keuntungan: Satu sumber warna untuk semua block — cukup edit di satu tempat.

---

Sidebar Color Picker

function EditComponent(props) {
  // Dapatkan nama warna dari hex code
  const currentColorValue = cycleColors();
  
  function handleColorChange(colorCode) {
    // Konversi hex → nama warna (abstraction layer)
    const colorObject = getColorObjectByColorValue(ourColors, colorCode);
    props.setAttributes({ colorName: colorObject.name });
  }

  return (
    <>
      <InspectorControls>
        <PanelBody title="Color" initialOpen={true}>
          <PanelRow>
            <ColorPalette
              colors={ourColors}
              value={currentColorValue}
              onChange={handleColorChange}
              disableCustomColors={true}
              clearable={false}
            />
          </PanelRow>
        </PanelBody>
      </InspectorControls>

      {/* ... RichText dan komponen lainnya */}
    </>
  );
}

---

Hierarki Komponen Sidebar

<InspectorControls>           ← Masuk ke sidebar kanan
  <PanelBody title="Color">   ← Panel yang bisa collapse
    <PanelRow>                 ← Baris dalam panel
      <ColorPalette />         ← Picker warna
    </PanelRow>
  </PanelBody>
</InspectorControls>

---

Props ColorPalette

Prop	Nilai	Fungsi
colors	ourColors array	Daftar warna yang tersedia
value	Hex code aktif	Warna yang sedang dipilih
onChange	Handler function	Dipanggil saat warna berubah
disableCustomColors	true	Nonaktifkan input hex manual
clearable	false	Nonaktifkan tombol clear/hapus warna

---

Abstraction Layer: Nama vs Hex Code

Masalah

Menyimpan hex code (#0d3b66) langsung di database tidak fleksibel. Jika suatu saat warna biru diubah, semua block yang sudah tersimpan tetap menggunakan hex lama.

Solusi

Simpan nama warna ("Blue") di attribute, bukan hex code. Dengan getColorObjectByColorValue:

import { getColorObjectByColorValue } from "@wordpress/block-editor";

// Konversi hex → object warna (yang berisi name)
const colorObject = getColorObjectByColorValue(ourColors, "#0d3b66");
// colorObject.name = "Blue"

// Simpan nama, bukan hex
props.setAttributes({ colorName: colorObject.name });

Manfaat

Menyimpan	Contoh	Fleksibilitas
Hex code	#0d3b66	❌ Kaku — berubah = semua block rusak
Nama warna	"Blue"	✅ Fleksibel — tinggal update definisi warna

---

Attribute colorName

attributes: {
  colorName: { type: "string", default: "blue" }
}

Penggunaan di className

// Class CSS menggunakan nama warna
className={`btn btn--${props.attributes.size} btn--${props.attributes.colorName.toLowerCase().replace(/ /g, "-")}`}

Output: btn btn--large btn--blue atau btn btn--medium btn--dark-orange

---

File inc/ourColors.js — Satu Sumber Kebenaran

fictional-block-theme/
├── inc/
│   └── ourColors.js        ← Definisi warna terpusat
├── our-blocks/
│   ├── generic-button.js   ← import ourColors
│   ├── banner.js           ← import ourColors (jika perlu)
│   └── ...

Semua block yang butuh color picker cukup import ourColors from "../inc/ourColors".

---

Kesimpulan

Konsep	Penjelasan
InspectorControls	Menambahkan panel di sidebar kanan editor
PanelBody	Panel collapsible dengan judul
PanelRow	Baris konten dalam panel
ColorPalette	UI pemilih warna
getColorObjectByColorValue	Konversi hex → objek warna (untuk abstraction)
Abstraction layer	Simpan nama warna, bukan hex code
inc/ourColors.js	File terpusat untuk definisi warna (export default)