Menambahkan Custom CSS Khusus untuk Satu Blok (Tanpa Plugin!)

1. Bagi Para Blogger & Content Creator

Blogger biasanya sangat peduli dengan kecepatan loading blog dan estetika artikel.

• Manfaat: Jika Anda ingin membuat sebuah kotak khusus untuk menonjolkan produk affiliate, atau membuat tampilan kutipan (quote) tokoh menjadi lebih artistik di satu artikel tertentu, Anda tidak perlu lagi menginstal plugin shortcode tambahan atau page builder berat. Cukup tambahkan sedikit CSS di blok tersebut, dan blog Anda tetap ringan serta cepat diakses pembaca.

2. Bagi Web Designer

Bagi desainer, akurasi visual (pixel-perfect) dan kebebasan berkreasi adalah segalanya.

• Manfaat: Fitur ini memberikan ruang untuk micro-interactions. Misalnya, Anda ingin satu tombol spesifik di halaman About memiliki efek transisi hover yang unik, atau sebuah gambar memiliki bayangan (drop shadow) asimetris yang berbeda dari gambar lainnya. Anda bisa mewujudkannya langsung di editor tanpa takut merusak Global Styles tombol dan gambar di halaman lain.

3. Bagi WordPress Developer & Agency

Untuk developer yang fokus pada Native WordPress dan membuat website untuk klien, kebersihan kode (clean code) adalah prioritas.

• Manfaat: Selamat tinggal kode CSS inline yang berantakan atau file style.css utama yang membengkak hanya karena berisi ratusan class modifikasi kecil. Karena WordPress otomatis membuatkan class hash yang unik (terskop/ scoped), kode CSS dijamin tidak akan bocor atau merusak elemen lain. Selain itu, Anda bisa mengatur lewat block.json mana saja blok kustom klien yang boleh atau tidak boleh diutak-atik CSS-nya.

4. Bagi Digital Marketer & Spesialis SEO

Fokus utama Digital Marketer adalah konversi (CTR) dan Core Web Vitals untuk SEO.

• Manfaat: Saat membuat Landing Page promo, seorang marketer bisa langsung menambahkan animasi pulse (berdenyut) ringan atau gradasi warna mencolok pada tombol Call-to-Action (CTA) tertentu agar pengunjung langsung mengklik tombol tersebut. Proses ini bisa dilakukan seketika (on the fly) oleh kita namun harus sedikit faham kode CSS. Dan karena berbasis native block, skor Lighthouse halaman promosi tersebut dijamin tetap hijau!

1. Penyimpanan (Storage)

Kode CSS yang Anda tulis akan disimpan di dalam struktur JSON blok tersebut, tepatnya di atribut style pada kunci css.

JSON

<h6 class="wp-block-heading has-custom-css">Heading</h6>

2. Output di Frontend

Saat halaman dirender dan ditampilkan ke pengunjung, WordPress akan secara pintar membuat class unik menggunakan sistem hash berdasarkan konten dan atribut blok tersebut. Class ini akan ditempelkan ke elemen HTML terluar dari blok bersama dengan class penanda has-custom-css.

Hasil output HTML dan CSS-nya akan terlihat seperti ini:

HTML

<h6 class="wp-block-heading has-custom-css wp-custom-css-8841bf3c3cc97689d62771455cc88782">
    Heading
</h6>

<style id="wp-block-custom-css">
    :root :where(.wp-custom-css-8841bf3c3cc97689d62771455cc88782) {
        color: blue;
    }
</style>

Style yang di-generate ini dipastikan akan dimuat setelah global-styles, sehingga kode kustom Anda dijamin akan menimpa ( override) pengaturan default tema.

3. Live Preview di Editor

Keuntungan lainnya, setiap baris CSS yang Anda ketik di kolom tersebut akan langsung merubah tampilan blok secara real-time di editor teks, tanpa perlu menekan tombol Save atau Preview terlebih dahulu.