Menggunakan Sistem Desain dengan Editor Blok WordPress Pt. 1: theme.json

Di posting blog kami sebelumnya, kami menunjukkan bagaimana Anda dapat mengimpor sistem desain Anda dari Figma ke theme.json dari tema WordPress. Dengan melakukannya, Anda dapat memastikan konsistensi berkelanjutan di seluruh properti digital Anda.

Seri dua bagian baru kami dibangun di atas fondasi tersebut dengan menunjukkan kepada Anda bagaimana Anda dapat menggunakan token desain yang diimpor dari theme.json di editor blok. Ini akan memungkinkan Anda mengatur situs WordPress Anda dengan lebih baik untuk mencerminkan sistem desain Anda. Ada dua tujuan utama:

• Pahami bagian theme.json yang relevan dengan sistem desain
• Ubah dan perluas theme.json untuk memanfaatkan sistem desain yang diimpor

Memahami theme.json

theme.json adalah file konfigurasi yang memungkinkan Anda mengonfigurasi dan memberi tema editor blok, mengubah pengaturan blok, dan membangun fondasi untuk mengembangkan seluruh tema blok.

Ini dimaksudkan untuk memungkinkan Anda mengontrol pengaturan dan gaya global untuk situs WordPress Anda. Setiap situs VIP WordPress baru hadir secara default dengan tema Dua Puluh Dua Puluh Tiga, tema blok. Tema ini adalah tempat awal yang bagus untuk bereksperimen dengan tema blok yang ringan dan memahami beberapa kontrol canggih yang tersedia di theme.json.

Memodifikasi theme.json

Mari kita mulai dengan theme.json yang digunakan di postingan blog kita sebelumnya. Perhatikan bagian kustom, di mana alat jembatan kami dapat menyisipkan dan memperbarui sistem desain dari Figma. Ini adalah bagian utama di mana Anda mereferensikan berbagai komponen sistem desain Anda (token desain) untuk benar-benar menggunakan theme.json secara efektif.

Di bawah ini kami membahas tip dan strategi sehingga Anda dapat memanfaatkan semua yang ditawarkan theme.json.

Menyimpan Token Desain

Meskipun lokasi token desain Anda dapat disesuaikan menggunakan alat penghubung, mereka harus selalu disimpan di bagian pengaturan khusus. Ini adalah lokasi default alat jembatan, dan tidak boleh diubah. Ini membuat mereka tertata dengan baik di satu lokasi dan dapat membantu menghindari konflik dengan bagian tema khusus yang ada.

Menggunakan Token Desain

Mari kita lihat contoh penggunaan bagian khusus theme.json. Di sini kami memiliki cuplikan yang telah kami tentukan warna teks utama hijau dan latar belakang hitam:

 "settings": { "custom": { "text": { "primary": "#00FF00", “background”: “000000” } } } }

Ini memungkinkan kita untuk mereferensikan kedua warna ini di mana saja di dalam theme.json menggunakan:

 var(--wp--custom--text--primary) and var(--wp--custom--text--background)

Cuplikan berikut memastikan bahwa secara default, kecuali ditentukan lain, setiap blok akan memiliki latar belakang hitam dengan teks hijau di atasnya:

 "styles": { "color": { "text": "var(--wp--custom--text--primary)", “background”: “var(--wp--custom--text--background)” } }

Skema untuk kunci apa pun yang ingin Anda rujuk dari pengaturan khusus Anda adalah:

 var(--wp--custom–<location to the value with -- as a separator between each key>)

Keuntungannya adalah Anda dapat mereferensikan semua token desain Anda menggunakan kunci ini sambil memiliki satu lokasi pusat di mana nilai sebenarnya dikelola.

Praktik terbaik

• Gunakan variabel token desain yang dihasilkan WordPress (misalnya, var(--wp--custom--text--primary) ) untuk mereferensikan token di mana saja. Perhatikan cuplikan yang diberikan di atas, tempat kami mereferensikan warna kustom utama dan latar belakang, daripada menggunakan nilai sebenarnya itu sendiri. Ini memastikan bahwa ketika Anda ingin memperbarui properti seperti warna teks, Anda hanya perlu mengubah satu lokasi, karena lokasi lain hanyalah referensi.
• Token desain yang dimasukkan ke dalam theme.json juga dapat diakses dengan CSS di luar theme.json, menggunakan referensi kunci yang sama seperti yang ditunjukkan di atas. Ini berlaku untuk memblokir pengembangan dan komponen lain yang digunakan dalam sebuah tema. Mereka tidak dimaksudkan untuk digunakan hanya di dalam theme.json dan harus digunakan kembali di CSS khusus apa pun.

Kami merekomendasikan untuk mengikuti kedua praktik terbaik ini untuk mempertahankan theme.json sebagai satu sumber kebenaran. Ini akan memungkinkan Anda untuk memperbarui token desain dengan mudah, terutama ketika Anda menggunakan alat otomatis seperti alat penghubung WordPress VIP yang terhubung ke Figma.

Ubah gaya editor dan blok

Cuplikan di atas adalah cara yang bagus untuk menyelami penyesuaian gaya blok. Misalnya, Anda dapat mengubah gaya default untuk sebuah blok serta preset apa yang tersedia untuk dipilih dari editor blok. Ini berguna ketika Anda ingin menjadi lebih terperinci dan mendikte dengan tepat seperti apa blok bawaan yang digunakan di situs Anda nantinya.

Ada dua lokasi utama di theme.json:

• Pengaturan dan pengaturan.blok—memungkinkan penyesuaian pengaturan yang umumnya tersedia di editor blok, dan pengaturan yang disesuaikan untuk masing-masing jenis blok.
• Styles dan styles.blocks—memungkinkan penentuan gaya prasetel untuk seluruh editor blok, dan kustomisasi per blok.

Misalnya, berikut cara memastikan semua judul memiliki warna hijau (primer) default dan opsi warna sekunder:

 "settings": { "custom": { "text": { "primary": "#00FF00", “secondary”: “#FF0000” } }, “blocks”: { “core/heading”: { “color”: { “text”: true, “palette”: [ { "slug": "primary", "color": "var(--wp--custom--text--primary)", "name": "Primary" }, { "slug": "secondary", "color": "var(--wp--custom--text--secondary)", "name": "Secondary" } ] } } } }, "styles": { "blocks": { “core/heading”: { “color”: { "text": "var(--wp--custom--text--primary)" } } } }

Ini mengonfigurasi setiap blok tajuk untuk memiliki warna teks hijau primer dan menambahkan opsi editor blok kedua untuk mengubah warna menjadi warna sekunder merah. Catatan: Ini memerlukan beberapa pengulangan. Penataan gaya menentukan warna primer default, dan palet menggabungkan warna yang sama dengan warna sekunder untuk menyediakan kedua opsi di editor blok.

Peringatan gaya

Hanya gunakan bagian style dan styles.blocks theme.json untuk menata blok Anda jika memungkinkan. Jangan gunakan gaya CSS untuk mengganti gaya blok inti kecuali benar-benar diperlukan. Penggantian CSS untuk gaya blok umumnya tidak stabil – pembaruan editor blok dapat mengubah gaya dan struktur, menyebabkan gaya tersebut rusak.

Kustomisasi per blok

Sementara contoh di atas menunjukkan cara menyesuaikan pengaturan dan gaya blok, itu juga memungkinkan untuk menonaktifkan penyesuaian sepenuhnya dan membatasi opsi editor blok ke blok tertentu. Ini berguna untuk secara ketat mengontrol opsi mana yang tersedia untuk membuat konten, mempertahankan tampilan dan nuansa sistem desain.

Mari lanjutkan dengan contoh pengaturan warna lainnya di mana prinsip yang sama berlaku untuk properti lain yang dapat dikonfigurasi seperti warna, tipografi, dan spasi. Untuk menonaktifkan kemampuan untuk mengubah warna teks default di mana saja kecuali untuk blok judul, berikut cara mengkonfigurasi theme.json:

 "settings": { "custom": { "text": { "primary": "#00FF00", “secondary”: “#FF0000” } }, “color”: { “text”: false }, “blocks”: { “core/heading”: { “color”: { “text”: true, “palette”: [ { "slug": "primary", "color": "var(--wp--custom--text--primary)", "name": "Primary" }, { "slug": "secondary", "color": "var(--wp--custom--text--secondary)", "name": "Secondary" } ] } } } }

Contoh ini menunjukkan konfigurasi pengaturan global melalui pengaturan, dan pengaturan khusus blok melalui bagian blok di bawah pengaturan. Ini juga berlaku untuk gaya global (tersedia di bawah properti gaya root), dan gaya khusus blok (di bawah styles.blocks).

Templat prasetel sederhana

Cara yang baik untuk mulai membuat sistem desain adalah mengunci pengaturan editor blok secara global. Setelah itu, Anda dapat secara bertahap mengaktifkan pengaturan untuk masing-masing blok dan mengontrol bagaimana sistem desain Anda terlihat dan terasa tanpa kewalahan oleh opsi penyesuaian. Untuk memulai, berikut adalah serangkaian pengaturan sederhana yang digunakan sistem desain WordPress VIP untuk menonaktifkan semua batas, warna secara global , tipografi, dan kontrol spasi secara default di editor:

 { "$schema": "https://schemas.wp.org/trunk/theme.json", "version": 2, "settings": { "appearanceTools": true, "border": { "color": false, "radius": false, "style": false, "width": false }, "color": { "text": false, "background": false, "link": false, "custom": false, "defaultPalette": false, "defaultGradients": false, "defaultDuotone": false, "customGradient": false, "customDuotone": false, "palette": [ // Design system palette colors... ], "gradients": [ // Design system gradients... ] }, "spacing": { "margin": false, "padding": false, "units": ["rem", "%"] }, "typography": { "customFontSize": false, "fontStyle": false, "fontWeight": false, "letterSpacing": false, "lineHeight": false, "textDecoration": false, "textTransform": false, "dropCap": false, "fontFamilies": [], "fontSizes": [] } } }

Dengan default terkunci ini, Anda kemudian dapat menggunakan settings.blocks untuk mengekspos opsi untuk blok tertentu di editor dan membatasi penyesuaian ke pengaturan yang ditentukan dengan baik.

Kesimpulannya

Theme.json adalah alat yang ampuh untuk mengatur token desain global, mengatur gaya tema global, dan menyesuaikan blok individu. Memanfaatkan semua fitur yang diekspos oleh editor blok untuk penyesuaian membuat implementasi sistem desain terpusat dan kompatibel dengan editor blok bawaan.

Di Bagian 2 dari seri kami, kami akan membahas tips lebih lanjut di luar theme.json untuk mengelola tipe dan gaya blok bawaan dalam sistem desain.

Tautan yang bermanfaat

• Apa itu Theme.json?
• Pengaturan & Gaya Global (theme.json)

Penulis

Alec Geatches, Pengembang Perangkat Lunak Senior di Automattic

Pengembang Enterprise WordPress dan penggila sistem desain yang tinggal di Taipei, Taiwan.

Gopal Krishnan, Pengembang Perangkat Lunak Senior di Automattic

Gopal bekerja pada penawaran WordPress terpisah dari WordPress VIP, dengan minat pada sistem desain dan Gutenberg. Dia berbasis di Sydney, Australia dan baru saja pindah dari Kanada.