Tombol Styling di Tema Blok WordPress

Beberapa saat lalu, Ganesh Dahal menulis postingan di sini di CSS-Tricks menanggapi tweet yang menanyakan tentang menambahkan bayangan kotak CSS pada blok dan elemen WordPress. Ada banyak hal hebat di sana yang memanfaatkan fitur-fitur baru yang dikirimkan di WordPress 6.1 yang menyediakan kontrol untuk menerapkan bayangan ke berbagai hal secara langsung di Editor Blok dan UI Editor Situs.

Ganesh menyentuh sebentar elemen tombol di postingan itu. Saya ingin mengambilnya dan membahas lebih dalam tentang pendekatan untuk menata tombol di tema blok WordPress. Secara khusus, kita akan membuka yang baru theme.json file dan uraikan berbagai pendekatan untuk menata tombol dalam skema.

Mengapa tombol, Anda bertanya? Itu pertanyaan yang bagus, jadi mari kita mulai dengan itu.

Berbagai jenis tombol

Ketika kita berbicara tentang tombol dalam konteks Editor Blok WordPress, kita harus membedakan antara dua jenis yang berbeda:

1. Blok anak di dalam blok Tombol
2. Tombol-tombol yang bersarang di dalam blok lain (misalnya blok Post Comments Form)

Jika kami menambahkan kedua blok ini ke templat, mereka memiliki tampilan yang sama secara default.

Tetapi markupnya sangat berbeda:

<div class="wp-block-button"> <a class="wp-block-button__link wp-element-button">Button 1</a>
</div>
<p class="form-submit wp-block-button"> <input name="submit" type="submit" id="submit" class="wp-block-button__link wp-element-button" value="Post Comment"> </p>

Seperti yang bisa kita lihat, nama tag HTML berbeda. Ini adalah kelas umum — .wp-block-button dan .wp-element-button — yang memastikan gaya yang konsisten di antara kedua tombol.

Jika kami menulis CSS, kami akan menargetkan kedua kelas ini. Namun seperti yang kita ketahui, tema blok WordPress memiliki cara pengelolaan gaya yang berbeda, dan itu melalui theme.json file. Ganesh juga membahas ini dengan sangat rinci, dan Anda sebaiknya membaca artikelnya.

Jadi, bagaimana kita mendefinisikan gaya tombol di theme.json tanpa menulis CSS yang sebenarnya? Mari lakukan bersama.

Membuat gaya dasar

theme.json adalah seperangkat skema terstruktur yang ditulis dalam pasangan properti:nilai. Properti tingkat atas disebut "bagian", dan kita akan bekerja dengan styles bagian. Di sinilah semua instruksi penataan pergi.

Kami akan fokus secara khusus pada elements dalam styles. Pemilih ini menargetkan elemen HTML yang dibagikan di antara blok. Ini adalah shell dasar yang sedang kami kerjakan:

// theme.json
{ "version": 2, "styles": { "elements": { // etc. } }
}

Jadi yang perlu kita lakukan adalah mendefinisikan a button elemen.

={ "version": 2, "styles": { "elements": { "button": { // etc. } } }
}

Bahwa button sesuai dengan elemen HTML yang digunakan untuk menandai elemen tombol di ujung depan. Tombol-tombol ini berisi tag HTML yang dapat berupa salah satu dari dua jenis tombol kami: komponen mandiri (yaitu blok Tombol) atau komponen bersarang di dalam blok lain (misalnya blok Posting Komentar).

Daripada harus menata setiap blok individu, kami membuat gaya bersama. Mari lanjutkan dan ubah latar belakang default dan warna teks untuk kedua jenis tombol di tema kita. Ada color objek di sana yang, pada gilirannya, mendukung background dan text properti tempat kami menetapkan nilai yang kami inginkan:

{ "version": 2, "styles": { "elements": { "button": { "color": { "background": "#17a2b8", "text": "#ffffff" } } } }
}

Ini mengubah warna kedua jenis tombol:

Jika membuka DevTools dan melihat CSS yang dihasilkan WordPress untuk tombol, kita melihat bahwa .wp-element-button class menambahkan gaya yang kita definisikan theme.json:

.wp-element-button { background-color: #17a2b8; color: #ffffff;
}

Itu adalah warna default kami! Selanjutnya, kami ingin memberikan umpan balik visual kepada pengguna saat mereka berinteraksi dengan tombol.

Menerapkan gaya tombol interaktif

Karena ini adalah situs tentang CSS, saya berani bertaruh banyak dari Anda sudah akrab dengan status tautan dan tombol interaktif. Kita dapat :hover kursor mouse di atasnya, tab mereka :focus, klik untuk membuatnya :active. Heck, bahkan ada a :visited menyatakan untuk memberi pengguna indikasi visual bahwa mereka telah mengeklik ini sebelumnya.

Yaitu Kelas semu CSS dan kami menggunakannya untuk menargetkan interaksi tautan atau tombol.

Di CSS, kita mungkin membuat style a :hover nyatakan seperti ini:

a:hover { /* Styles */
}

In theme.json, kita akan memperluas deklarasi tombol kita yang sudah ada dengan pseudo-class ini.

{ "version": 2, "styles": { "elements": { "button": { "color": { "background": "#17a2b8", "text": "#ffffff" } ":hover": { "color": { "background": "#138496" } }, ":focus": { "color": { "background": "#138496" } }, ":active": { "color": { "background": "#138496" } } } } }
}

Perhatikan sifat "terstruktur" ini. Kami pada dasarnya mengikuti garis besar:

Kami sekarang memiliki definisi lengkap dari default tombol dan gaya interaktif kami. Tetapi bagaimana jika kita ingin mengatur gaya tombol tertentu yang bersarang di blok lain?

Tombol gaya bersarang di blok individual

Bayangkan kita ingin semua tombol memiliki gaya dasar kita, dengan satu pengecualian. Kami ingin tombol submit dari blok Post Comment Form berwarna biru. Bagaimana kita mencapai itu?

Blok ini lebih kompleks daripada blok Tombol karena memiliki lebih banyak bagian bergerak: formulir, input, teks instruktif, dan tombol. Untuk menargetkan tombol di blok ini, kita harus mengikuti jenis struktur JSON yang sama dengan yang kita lakukan untuk button elemen, tetapi diterapkan ke blok Post Comment Form, yang dipetakan ke core/post-comments-form elemen:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { // etc. } } }
}

Perhatikan bahwa kita tidak lagi bekerja elements lagi. Sebaliknya, kami bekerja di dalam blocks yang dicadangkan untuk mengonfigurasi blok aktual. Tombol, sebaliknya, dianggap sebagai elemen global karena dapat disarangkan dalam blok, meskipun tersedia sebagai blok mandiri juga.

Struktur JSON mendukung elemen di dalam elemen. Jadi, jika ada button elemen di blok Post Comment Form, kita bisa menargetkannya di core/post-comments-form blok:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { "elements": { "button": { "color": { "background": "#007bff" } } } } } }
}

Pemilih ini berarti bahwa kita tidak hanya menargetkan blok tertentu — kita juga menargetkan elemen tertentu yang terkandung dalam blok itu. Sekarang kita memiliki sekumpulan gaya tombol default yang diterapkan ke semua tombol dalam tema, dan sekumpulan gaya yang diterapkan ke tombol tertentu yang terdapat di blok Post Comment Form.

CSS yang dihasilkan oleh WordPress memiliki pemilih yang lebih tepat sebagai hasilnya:

.wp-block-post-comments-form .wp-element-button,
.wp-block-post-comments-form .wp-block-button__link { background-color: #007bff;
}

Dan bagaimana jika kita ingin menentukan gaya interaktif yang berbeda untuk tombol Post Comment Form? Ini kesepakatan yang sama dengan cara kami melakukannya untuk gaya default, hanya yang ditentukan di dalam core/post-comments-form blok:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { "elements": { "button": { "color": { "background": "#007bff" } ":hover": { "color": { "background": "#138496" } }, // etc. } } } } }
}

Bagaimana dengan tombol yang tidak di blok?

WordPress secara otomatis menghasilkan dan menerapkan kelas yang tepat untuk menampilkan gaya tombol ini. Tetapi bagaimana jika Anda menggunakan tema WordPress “hybrid” yang mendukung blok dan pengeditan situs lengkap, tetapi juga berisi template PHP “klasik”? Atau bagaimana jika Anda membuat blok khusus, atau bahkan memiliki kode pendek lama, yang berisi tombol? Tak satu pun dari ini ditangani oleh Mesin Gaya WordPress!

Jangan khawatir. Dalam semua kasus tersebut, Anda akan menambahkan .wp-element-button kelas dalam templat, blok, atau markup kode pendek. Gaya yang dihasilkan oleh WordPress kemudian akan diterapkan pada contoh tersebut.

Dan mungkin ada beberapa situasi di mana Anda tidak memiliki kendali atas markup. Misalnya, beberapa plugin blok mungkin sedikit terlalu beropini dan secara bebas menerapkan gayanya sendiri. Di situlah Anda biasanya dapat pergi ke opsi "Lanjutan" di panel pengaturan blok dan menerapkan kelas di sana:

Membungkus

Saat menulis "CSS" di theme.json mungkin terasa canggung pada awalnya, saya telah menemukan bahwa itu menjadi kebiasaan. Seperti CSS, ada sejumlah properti yang dapat Anda terapkan secara luas atau sangat sempit menggunakan pemilih yang tepat.

Dan jangan lupakan tiga keuntungan utama penggunaan theme.json:

1. Gaya diterapkan ke tombol di tampilan front-end dan editor blok.
2. CSS Anda akan kompatibel dengan pembaruan WordPress di masa mendatang.
3. Gaya yang dihasilkan berfungsi dengan tema blok dan tema klasik — tidak perlu menduplikasi apa pun di lembar gaya terpisah.

Jika sudah pernah digunakan theme.json gaya dalam proyek Anda, silakan bagikan pengalaman dan pemikiran Anda. Saya berharap untuk membaca setiap komentar dan umpan balik!

• Konten Bertenaga SEO & Distribusi PR. Dapatkan Amplifikasi Hari Ini.
• Platoblockchain. Intelijen Metaverse Web3. Pengetahuan Diperkuat. Akses Di Sini.
• Sumber: https://css-tricks.com/styling-buttons-in-wordpress-block-themes/